Ndtyjky

I have an inner function that references a variable initialized by its containing outer function:

function outer() {

    function inner() {

      if (foo) { ... }

    }

    let foo = 'bar';

    inner();  // no error

};

However, there are some circumstances where the inner function may be invoked before the statement defining foo has executed. In this case, any reference to foo causes a ReferenceError in the inner function:

function outer() {

    function inner() {

      if (foo) { ... } // ReferenceError: foo is not defined

    }

    inner();

    let foo = 'bar';

};

This is surprising to me, given that foo has block scope, and I am within the enclosing block when executing the inner function.

More surprisingly is that even attempting to detect this situation with the typeof operator - which I always understood to be a safe way to test for undefined variables - causes the same ReferenceError:

function outer() {

    function inner() {

      if (typeof foo !== 'undefined') { ... } // ReferenceError: foo is not defined

    }

    inner();

    let foo = 'bar';

};

Edit: I now understand that this behavior is the result of the "temporal dead zone" involving let and const variables discussed elsewhere. However, I'm still looking for a clean, safe way to handle the situation.

Is there any safe way to test whether a block-scoped variable (e.g., one created with 'let' or 'const') has yet reached its declaration?

One brute-force approach is to simply catch the exception thrown by typeof in the "temporal dead zone" before foo has been initialized:

function outer() {

    function inner() {

      let fooExists = false;

      try { fooExists = typeof foo !== 'undefined' } catch(e) {}

      if (fooExists) { /* ... */ }

    }



    inner();   // no error

    let foo = 'bar';

}

It is also possible to use var instead of let to work around this issue. Because var is function-scoped, the declaration will be hoisted to the top of outer, making the variable available (though undefined) at all times outer is executing:

function outer() {

    // due to hoisting, there is a logical `var foo;` here

    function inner() {

      if (typeof foo !== 'undefined') { /* ... */ }

    }



    inner();   // no error; `foo` has been hoisted

    var foo = 'bar';

}

A similar approach could be taken by putting the declaration (but not initialization) of foo at the top of the outer function while still using let:

function outer() {

    let foo;

    function inner() {

      if (typeof foo !== 'undefined') { /* ... */ }

    }



    inner();   // no error

    foo = 'bar';

}

This last solution would seem to be the cleanest solution for the example given in the question. Unfortunately, it cannot be used when using const variables.

function outer() {

    function inner() {

      if (foo) { ... } // ReferenceError: foo is not defined

    }

    inner();

    let foo = 'bar';

};

This is surprising to me, given that foo has block scope, and I am
within the enclosing block when executing the inner function.

Because of hoisting, the declaration for foo is hoisted to the top of the block, but not the initialization of the variable. It executes as if you had written:

function outer() {

    let foo; // declaration only, so still undefined value

    function inner() {

      if (foo) { ... } // ReferenceError: foo is not defined

    }

    inner();

    foo = 'bar'; // Not initialized until after you call inner!

};

Simply move the initialization up in the block and it will work:

function outer() {

    let foo = 'bar'; // declared and initialized

    function inner() {

      if (foo) { ... } // works as expected

    }

    inner();

};