Why is let variable accessible within IIFE & var is not?

user_16659219 0
Viewed 104

This IIFE code is able to access count

let count = 0;
(function immediate() {
  if (count === 0) {
    let count = 1;
    console.log(count);
  }
  console.log(count);
})();

But why is count undefined in this case?

var count = 0;
(function immediate() {
  if (count === 0) {
    var count = 1;
    console.log(count);
  }
  console.log(count);
})();
iife javascript
1 Answers

If you use var the variable declaration is hoisted, that mean that your code will be rewritted in the following way:

var count = 0;
(function immediate() {
  var count; // decalration of variable hoisted on the function scope
             // and the count variable now is undefined.
  if (count === 0) {
    count = 1;
    console.log(count);
  }
  console.log(count); // just this is printed.
})();

As you can se, the variable inside the if block is now overriding the global count.

The fact that this behaviour is not so obvius is the reason why many suggest to avoid using var as we can use let and const instead, that have a block scope.

Update

Thanks to the comment of @t.niese I think is wort to mention another difference between var vs let and const.

Like var, let and const are hoisted, but with this differencese:

  1. they have a block scope and not a function scope like var has
  2. they are declared but not initialized to undefined like var
  3. any attempt to access a variable declared with let and const before it is initialized will result in a ReferenceError exception, while accessing an undeclared variable or a hoisted var will return just undefined.
user_64528290
Related