CODEWITHSUNDEEP
javascriptnode.jsscopevar
Rashomon
Rashomon

Reputation: 6772

Why redeclaring a variable is allowed in an IF statement in JavaScript

I know an if statement doesnt have its own scope like a function, meaning it shares the same scope with the containing context. If so, why am I allowed to redeclare the same variable again?

var foo = 123;
if (true) {
    console.log(foo) // 123
    var foo = 456; // Shouldnt it throw an error if refers to same variable?
}
console.log(foo) // 456

Upvotes: 3

Views: 934

Answers (1)

Ekalavya
Ekalavya

Reputation: 41

We need to understand how the compiler and the Javascript runtime engine process and executes the code.

Compiler

lets see how the compiler sees the below code snippet and creates appropriate scopes.

1. var foo = 123;
2. if (true) {
3.   console.log(foo) // 123
4.   var foo = 456;
5. }
6. console.log(foo) // 456
  1. on Line 1 compiler places foo identifier in global scope as it encounters that identifier for the first time.
  2. on Line 2 it compiler creates a block scope to hold the references of identifiers.
  3. on Line 3 is a execution context so, compiler moves to next line.
  4. on Line 4 compiler sees foo identifier and it checks whether the identifier already exist in the global scope or not ( Note: var does not has the block scope. So it looks one level up in the scope, which is global scope). Here global scope already had the identifier so, it goes to next line of code.
  5. Line 6 is a execution context.

Javascript(JS) engine

It assigns and executes the code by using the scope created by the compiler.

  1. Line 1 runtime looks for the identifier foo in the scope, as it exist it assigns the value 123
  2. Line 2 is truthy So, it enters into the block.
  3. on Line 3 it looks for the identifier foo in the block scope. As foo does not exist in the block scope it looks one level above which is global scope. foo is available in the global scope with a value of 123. so console.log(foo) is 123
  4. on Line 4: it looks for the identifier foo in the block scope. As foo does not exist in the block scope it looks one level above which is global scope. foo is available in the global scope so it re-assigns the value 456 to foo. now foo is 456.
  5. on Line 6. JS engine looks for foo identifier in the current scope which is global scope. foo is available in the global scope with a value of 456.

Now, let see the question

Why redeclaring a variable is allowed in an IF statement in JavaScript?

var foo = 456; is looks like redeclaring but actually it's not doing that. it uses the same globally declared identifier.

In some cases it's good to doing this kind of pattern for readability purpose.

function test() {
  var siteId;
   
  if(condition) {
    // more code 100+ lines
    siteId = getId();
  } else {
    var siteId = 1001; // redeclaring here we are communicating the reader for sure we have the `siteId`
  }
   
 // other code

}

Upvotes: 3

Related Questions