4

Why is the second code snippet is behaving unexpectedly?

This question is different from Questions on Javascript hoisting, because this question includes an IIFE, a Local scope, and is an attempt to better understand parent scope.


This function outputs correctly

var one = 1;
function sayOne() {
    console.log(one); // actually gets the value from the global scope
}
sayOne();

Output:

1


But this one does not.

var one = 1;
function sayDoom() {
    console.log(one); // somehow does not get the value from parent scope
    var one = 2;
    console.log(one);
    (function() {
        var one = 3;
        console.log(one); // displays correctly
    })();
}
sayDoom();

Output:

undefined
2
3

Expected:

1
2
3

5
  • 4
    In sayDoom, you're experiencing hoisting, where locally declared variables (in a function) are hoisted up. You're seeing undefined, because the variable is "available" (through hoisting), but it just hasn't been assigned a value yet. Simply, a var declaration in a function, regardless of where it's placed in the code (top, middle, or bottom of the code block), will always be referenced thanks to hoisting.
    – Jack
    Aug 1, 2015 at 18:05
  • 2
    @JackPattishall you accidentally posted your answer in the form of a comment.
    – user4639281
    Aug 1, 2015 at 18:13
  • 1
    possible duplicate of Questions on Javascript hoisting
    – melpomene
    Aug 1, 2015 at 18:26
  • It's exactly equivalent to other questions about hoisting. The IIFE has no relevance to anything. Which parent scope do you believe a value is being accessed from?
    – user663031
    Aug 1, 2015 at 19:34
  • 1
    Just put your variables declarations at the top of the function and stop worrying about hoisting.
    – user663031
    Aug 1, 2015 at 19:38

2 Answers 2

4

In javascript due to variable hoisting if you refer to a variable before its declared it will return undefined

actually the code becomes like this

function sayDoom() {
    var one;               // global variable wont be accssible now
    console.log(one); // returns undefined
    one = 2;
    console.log(one);
    (function() {
        var one = 3;
        console.log(one); // displays correctly
    })();
}
sayDoom();

you can access your global one variable using this.one inside the sayDoom() function

edit if your using strict mode this wont work

5
  • 1
    +1. Note that this.one won't work to access the global variable if you're in strict mode. I prefer using window to access global variables, e.g. window.one. Aug 1, 2015 at 18:38
  • 2
    The question only refers to a "parent scope", which is not necessarily global: function outer() { var one = 1; function sayOne() { console.log(one); } sayOne(); }
    – melpomene
    Aug 1, 2015 at 18:42
  • @melpomene for that he needs to understand closures
    – hitesh1124
    Aug 1, 2015 at 18:48
  • @Matt Browne, it is still hard for me to understand why this.one hoists itself into the fuction of another function. I accept it as the case and functionality and have used it as well. But truely understanding it, I don't know. Aug 1, 2015 at 18:49
  • 3
    @AlexanderDixon the variable is not being hoisted into the closure, a separate variable is being declared within that scope.
    – user4639281
    Aug 1, 2015 at 18:51
0

Well, JavaScript declarations are hoisted. So, a variable can be declared after it has been used. In other words; a variable can be used before it has been declared. Because of this, Javascript will read your function like this:

var one = 1;
function sayDoom() {
    var one;
    console.log(one); // one is not defined in the current scope
    one = 2;
    console.log(one);
    (function() {
        var one = 3;
        console.log(one);
    })();
}
sayDoom();
1
  • 1
    This is the best explanation so far.
    – user4639281
    Aug 1, 2015 at 18:48

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.