The Javascript IIFE prohibits accessing a variable before it has been initialized

Question

The Javascript IIFE prohibits accessing a variable before it has been initialized

I encountered an error message saying "Uncaught ReferenceError: Cannot access 'Q12' before initialization" while working in the changeCssClassIfOldAndNewValuesAreDifferent function. Any thoughts on what might be causing this issue? Thank you.

const formController = (function () {
                return {
                    'changeCssClassIfOldAndNewValuesAreDifferent': changeCssClassIfOldAndNewValuesAreDifferent
                };

                const formScope: any = $("form#userAnswerForm");
                const Q12: any = $('.persistable[id=Q12]', formScope);
                const Q23: any = $('.persistable[id=Q23]', formScope);

                function changeCssClassIfOldAndNewValuesAreDifferent() {
                    $('input.persistable, select.persistable').not(Q12) //<---Reference Error
                        .each(function () {
                            console.log('each persistable input and select listeners (change, mouseout)');
                            const thisPersistable: any = $(this);
                            const Q12_or_Q23_is_not_empty: boolean = !commonUtility.isEmpty(Q12) &&
                                !commonUtility.isEmpty(Q23);
                            ...
                            ...
                        });
                }
            })();

            $(function(){
                formController.changeCssClassIfOldAndNewValuesAreDifferent();
            });

javascript typescript

Answer 1

Answer №1

To solve the issue, remember to move the declaration before the return statement because the function called in return tries to access Q12 which is declared after the return.

const formController = (function () {
    const formScope: any = $("form#userAnswerForm");
    const Q12: any = $('.persistable[id=Q12]', formScope);
    const Q23: any = $('.persistable[id=Q23]', formScope);

    return {
      'changeCssClassIfOldAndNewValuesAreDifferent': changeCssClassIfOldAndNewValuesAreDifferent
    };
    
    function changeCssClassIfOldAndNewValuesAreDifferent() {
        $('input.persistable, select.persistable').not(Q12) //<---Reference Error
        .each(function () {
            console.log('each persistable input and select listeners (change, mouseout)');
            const thisPersistable: any = $(this);
            const Q12_or_Q23_is_not_empty: boolean = !commonUtility.isEmpty(Q12) && 
            !commonUtility.isEmpty(Q23);
            ...
            ...
        });
    }
})();

$(function(){
    formController.changeCssClassIfOldAndNewValuesAreDifferent();
});

Answer 2

To solve the issue, remember to move the declaration before the return statement because the function called in return tries to access Q12 which is declared after the return.

const formController = (function () {
    const formScope: any = $("form#userAnswerForm");
    const Q12: any = $('.persistable[id=Q12]', formScope);
    const Q23: any = $('.persistable[id=Q23]', formScope);

    return {
      'changeCssClassIfOldAndNewValuesAreDifferent': changeCssClassIfOldAndNewValuesAreDifferent
    };
    
    function changeCssClassIfOldAndNewValuesAreDifferent() {
        $('input.persistable, select.persistable').not(Q12) //<---Reference Error
        .each(function () {
            console.log('each persistable input and select listeners (change, mouseout)');
            const thisPersistable: any = $(this);
            const Q12_or_Q23_is_not_empty: boolean = !commonUtility.isEmpty(Q12) && 
            !commonUtility.isEmpty(Q23);
            ...
            ...
        });
    }
})();

$(function(){
    formController.changeCssClassIfOldAndNewValuesAreDifferent();
});

The Javascript IIFE prohibits accessing a variable before it has been initialized

Answer №1

Similar questions

Routes for Express are throwing a 500 internal server error

Challenges with the Express server console

Tips on handling parameters in the form of a single value or an array of values

Tips for incorporating user-entered data from a text box into a JavaScript function and utilizing a loop

AngularJS dynamically updates the minimum date in a datepicker

A function that retrieves the empty values from an array and returns undefined if there

The error message "Each item within a list must be assigned a unique 'key' prop" is being displayed

The functionality of jQuery is not functioning properly on dynamically created identical divs

What is the best way to execute my node script with a shell script file?

"Modify the value of an element in an array to an object

jQuery AJAX Triggered Only Once in Callback Function

I am attempting to incorporate a List View within a Scroll View, but they are simply not cooperating. My goal is to display a collection of items with additional text placed at the bottom

Loop through an array of arrays in JavaScript. If a match is found, add it to an existing inner array. If not, create a new

Guide to sending a similar request as a curl command through a JavaScript file

Overriding NavLink in React Bootstrap with custom CSS doesn't work as expected

Leveraging express functions in Node.js framework

An error was encountered: Component.setState is undefined and cannot be read, leading to a TypeError

Error encountered: When implementing mergeImages in express.js, a ReferenceError occurs stating that the window is not

How to conditionally import various modules in Next.js based on the environment

Ways to reload a page in Angular using routerLink and ID