One function is in scope and one out of scope even though both are defined in the same location

Question

Both functions are called from document.ready:

$(document).ready(function () {
    pnp.sp.web.lists.getByTitle("inReviewContracts").items.getAll().then (function(items) {
        spContractList = items;
        constructTable('#in-review-requests-table');
        colorTable();
        getNumVisibleContracts();
        calculateTotalCost();
        populateDashboardNumbers();
    }).catch(function(items) {
        console.log("Catch: ", items);
    });

    const dirMenuElement = document.querySelector('.dir-menu');
    dirMenuElement.addEventListener('change', (event) => {
        constructTable('#in-review-requests-table');
        filterTable("");
    });
});

Both calls for constructTable() work fine. The filterTable() call throws "not a function" error. Both functions are defined outside of document.ready. Neither is using a specified namespace. This is the actual error:

Uncaught TypeError: filterTable is not a function
at HTMLSelectElement.<anonymous> (scripts.js:49)

(anonymous) @ scripts.js:49

Screenshot of function definitions:

Why can I call constructTable(), but cannot call filterTable()?

Function Definitions:

function constructTable(selector) {
var list = getContractsFromLocalStorage(); 
if (!list) {
    $(selector).addClass('no-data-text').html("No Data Available");
    return;
}

// Get column names 
var cols = getHeaderValues(list, selector);   

// Traverse JSON data 
for (var i = 0; i < list.length; i++) { 
    var row = $('<tr>');
    for (var colIndex = 0; colIndex < cols.length-1; colIndex++) 
    { 
        var val = list[i][cols[colIndex]];
        if (val) {
            if (colIndex !== cols.length-2) {
                switch (colIndex) {
                    case 0:
                        row.append($('<td><input type="checkbox" class="checkbox-col"></td>'))
                        row.append($('<td class="sca-number-col">').html(val + '</td></tr>'));
                        break;
                    case 1: 
                        row.append($('<td class="contract-duration-col"/>').html(val + '</td></tr>'));
                        break;
                    case 2:
                        row.append($('<td class="requested-cost-col"/>').html(val + '</td></tr>'));
                        break;
                    case 3:
                        row.append($('<td class="total-cost-col"/>').html(val + '</td></tr>'));
                        break;
                    case 4: 
                        row.append($('<td class="contract-term-col"/>').html(val + '</td></tr>'));
                        break;
                    case 5:
                        row.append($('<td class="scarb-review-col"/>').html(val + '</td></tr>'));
                        break;
                    case 6:
                        row.append($('<td class="region-scarb-review-col"/>').html(val + '</td></tr>'));
                        break;
                    case 7:
                        row.append($('<td class="status-col"/>').html(val + '</td></tr>'));
                        break;
                }
            }  else {
                $(selector).append(row); 
                $(selector).append($('<tr>' + '<td class="cont-desc-row">' + (val) + '</td>' + '</tr>'));
            }
        }
    } 
}
// use this to set the colspan attr with jquery b/c it cannot be done when building the table
$('td.cont-desc-row').attr('colspan', 9);

}

function filterTable(segName) {
var filter, activeTable, tr;
var dirFilter = document.getElementById("dir-menu").value.toUpperCase();
var officeFilter = document.getElementById("sca-menu-1").value.toUpperCase();
var activeTabID = $('.tab-link:not(.non-active-tab)').attr('id');
var activeTableID = activeTabID.replace('btn', 'table');
activeTable = document.getElementById(activeTableID);
tr = activeTable.getElementsByTagName("tr");

var yearFilter = document.getElementById("sca-menu-2").value.toUpperCase();

var filter3 = document.getElementById("sca-menu-3").value.toUpperCase();

var addFilter = document.getElementById("sca-menu-4").value.toUpperCase();

var scarbRevFilter = document.getElementById('scarb-review-menu-1').value.toUpperCase();

var contractFilter = document.getElementById('contract-term-menu-1').value.toUpperCase();

filterAll(activeTable, dirFilter, officeFilter, yearFilter, filter3, addFilter, scarbRevFilter, contractFilter, tr, segName);

colorTable(activeTable);
calculateTotalCost();
if (!segName) {
    populateDashboardNumbers();
}
getNumVisibleContracts();

}

Answer 1

The issue is unrelated to JS. SharePoint has a native function named "filterTable" that I was overwriting. Renamed the function, and the code is now working.