Let’s learn JavaScript Hoisting – User friendly Tech help

When was the last time, you encountered confusing questions on “JavaScript Hoisting” in your interview?

n

Not very long back if you are looking for change 🙂

n

Today’s topic is very simple, but most misunderstood concept in our coder’s fraternity.
n

nLets try to learn sharpen our concepts and be ready to face the interview panel with confidence.
n
n

n

n

n

n

n

n

n

Hoisting

nWhat is JavaScript Hoisting?n

JavaScript Hoisting(Raise Up), in simple words refer to moving declarations to the top.(Like our flag hoisting ceremony in school times ).

n

Technically it is the default behavior of JavaScript, to shift all the declarations to the top of the function or global scope .

n

In other words, declaring a variable anywhere in the code is equivalent to declaring it at the top which allows a variable to be used before it is declared. 

n

However, only the declaration will be hoisted. If the variable is initialized, the current value, at the top of the scope, will initially be set to undefined.

n

Meaning:-JavaScript only hoists declarations, not initialization.

n
nExample:-
n
Variable Hoistingn

function bar(){
 function foo(){}
 var a=7;
}

n

Will be interpreted as:
n

n

function bar(){
 var a;//initialized to undefined
 function foo(){}
 a=7; // assignments are not affected by Hoisting
}

n

Function Hoisting
nNote:- Variable name = function name = foo
n

n

var foo =3;
function bar(){
 foo= 7;
 return;
 function foo(){}
}
bar();
alert(foo);

nwill be interpreted as:n

var foo =3;// defines foo in global scope
function bar(){
 function foo(){} // defines foo in local scope and can be rewritten as “var foo = function(){}”
 foo= 7; // overwrites local variable foo
 return;
}
bar();
alert(foo);

n
n
nIn JavaScript, functions are the first class objects like strings and numbers which means they are assigned to variables that can be passed to other functions as well.
n
nExplanation:-n

n
• Function foo() is hoisted first and it will act like var foo = function(){};,as a result a local variable foo is created

n

• Local variable will always get precedence over global variable if there are two variables with same name (one in local, another in global).

n

• In above example, foo=7; means setting the value in the local scope. So the result of alert will be 3

n

• JavaScript does not have block statement scope; rather, it will be local to the code that the block resides within.

n

• Declaring variables in a function means that variables declared in a function are accessible within that function, even before they are assigned a value.

n

n

nHow Name Resolution Order works:-

n

n
• Both local and global scope, have the special name this, defined in them , which points the current object.

n

• Function scope also has the named arguments , defined in them which are passed to them.

n

n

Confused!! Lets comprehend with example,
n
For example, JavaScript will find the name in the following order when accessing a variable named bar inside the scope of a function.
n1.    Use var bar; statement if it is present in current/function scope.
n2.    Use function parameter if it is having the name as “bar”.
n3.    Use function itself, if its name is “bar”.
n4.    Look in the outer scope and repeat the entire process from point 1.
n

n

Key Learning’s:

n

nUse “use strict”;

n

Always declare variables at the top of the scope (function/global)