JavaScript: understanding scope chain

Question

What is the scope chain in following code snippet -

var name = 'John';

function foo() {
  if (false) {
    var name = 'James';
  }
  console.log(name);
}

foo();

I got couple of queries regarding this -

Why the logger in function foo is printing undefined even when the variable is available in global scope? Is it due to the fact that same variable is re-declared in conditional falsy block and so the global variable is getting removed from the scope?
Also if we replace the variable declaration under if statement inside function foo from var to let, the logger inside the function foo prints name from global scope. How this is working?

Your function re-declares a local `name` variable. Declarations with `var` are treated as if they appear at the very top of the enclosing function. — Pointy, Apr 11 '19 at 13:23
Under the term "js hoisting" you will find a lot of good explanations of this behaviour. — Jonas Wilms, Apr 11 '19 at 13:28

Maheer Ali · Accepted Answer · 2019-04-11T13:31:27.027

1

Yes this is because the variables declared with var have function scope and they are hoisted to the top of the function. It logs undefined due to hoisting.

Variables declared with let have block scope so until the if block is not executed the variable name is not declared.

Even if you change it with if(true) it will not work because the variable will only be available inside the block. {} not outside.

Here is the example how let works.

if(true){
  let x = 3
}
console.log(x);

edited Apr 11 '19 at 13:31

answered Apr 11 '19 at 13:26

Maheer Ali

35,834
5
42
73

Got it, had an idea about hoisting before, but didn't knew that variables are hoisted even if they are declared in falsy if block. – Abhinandan Khilari Apr 11 '19 at 18:23

score 0 · Answer 2 · answered Apr 11 '19 at 13:25

If you redeclare variable with var, it has the scope in the whole function. If you do it with let instead of var, it will be available only in the if scope.

var name = 'John';

function foo() {
  if (false) {
    let name = 'James';
  }
  console.log(name);
}

foo();

JavaScript: understanding scope chain

2 Answers2