CODEWITHSUNDEEP
javascripthoisting
Strike Eagle
Strike Eagle

Reputation: 862

JavaScript specific function hoisting

I want to know specifically what functions appear first when hoisted. Do they stay the same as they started as in:

var z;
function b(){}
function a(){}

Would become

function b(){}
function a(){}
var z;

Or does it do something else? How does this affect functions that call other functions? Does

var z;
function b(){a();}
function a(){}

Know to become

function a(){}
function b(){a();}
var z;

Or am I missing something?

Upvotes: 0

Views: 101

Answers (3)

Akshay Bande
Akshay Bande

Reputation: 2587

Both the function and variable declarations are hoisted, but functions declarations are hoisted before variables.

So your code: 

var z;
function b(){}
function a(){}

when compiled by JS engine will become:

function b(){}
function a(){}
var z;

Now the question is will below code work without errors?

var z;
function b(){a();}
function a(){}

In the above code function a is called in function b before it is declared. JS engine works in two phases first is compiler phase in which all hoisting will occur and second is execution phase in which execution will occur.

So when you call to function a(which will eventually occur in execution phase) will occur after the declaration of function a in compiler phase.

For example.

When you write:

console.log(a); // undefined cause var a; is declared first 

var a = 10;

above code will be interpreted by JS engine as,

var a ;

console.log(a); // undefined;

a = 10;

For more information about Hoisting.

Upvotes: 0

Roman Mahotskyi
Roman Mahotskyi

Reputation: 6625

Before hoisting

var z;
function b(){a();}
function a(){}

After hoisting

reference to b;
reference to a;
z = undefined;

After entering the b function you will be able to execute a function without problems.

JS Engine performs following two steps to while executing any code:

CREATION PHASE:

  • JS Engine parses - run through your code & identifies variables & functions created by code (which will be used in execution phase)
  • Setup memory space for Variables & Functions - "Hoisting"
  • Hoisting - before your code is executed, the JS Engine set asides memory space for Var & Func used inside the code. These variables & functions comprise the Execution Context of any function that is be executed. All variables in JS are initially set to undefined.

Execution PHASE: pretty simple to understand,

  • When the code is executed line-by-line (by JS interpreeter) it can access the variables defined inside Execution Context
  • variable assignment are done in this phase

A new Execution Context is created whenever function invocation is there

Link to the post - https://stackoverflow.com/a/44748585/7291317.

Upvotes: 0

ymz
ymz

Reputation: 6914

As described in MDN:

One of the advantages of JavaScript putting function declarations into memory before it executes any code segment is that it allows you to use a function before you declare it in your code.

So.. yes - your functions loads into memory before any actual function call. For instance: 

function b() { console.log('b'); a() }
b()
function a() { console.log('a')}

Will properly call function a although the b function call (in line #2) is placed before the declaration of function a

As a side note.. please try to avoid this behaviors in variables because you may ended up with attaching variable to a global scope or risk with "scope bubbling" (use this link for more details)

Upvotes: 3

Related Questions