Need help understanding how the below IIFE code works

Question

I recently came across this javascript code in a competitive site and couldn't understand how this pretty much works.

var a= 1;
(function(){
    console.log(a);
    var a = 2;
    console.log(a);
})();

I expected the output to be..

1 2

But to my surprise, the original output was..

undefined 2

Can someone please explain how it works? Thanks in advance.

That is localization, I believe. The function creates a new "Global" scope that's localized. — FeaturedSpace, May 31 '19 at 15:49
This is an extraordinarily common example. Surely there is plenty of explanation online. — ziggy wiggy, May 31 '19 at 15:50

Maheer Ali · Accepted Answer · 2019-05-31T15:54:18.047

The declaration of variable a is brought to the top of the scope. This process is called hoisting.

var a= 1;
(function(){
    var a;
    console.log(a);
    a = 2;
    console.log(a);
})();

Consider a general snippet without a IIFE and global variable.

function func(){
  console.log(x)
  var x = 2;
  console.log(x)
}
func()

The declaration of x is hoisted to the top of the scope of the function.So the above code is same as

function func(){
  var x; //x is declared and its value is undefined
  console.log(x)
  x = 2;
  console.log(x)
}
func()

1 Answers1