JavaScript specific function hoisting

Question

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?

Is there some specific problem you're having? Function declaration statements don't actually do anything; the function name is bound to the function in the lexical scope. It therefore doesn't matter what the interpreted ordering is. — Pointy, Nov 20 '19 at 14:09
I would prefer to know exactly how the compiler is treating me code, specifically if function ordering changes when I don't expect it to it could cause issues later on. I like to write code that is as close to what runs as possible, makes debugging easier — Strike Eagle, Nov 20 '19 at 14:09
The rules around hoisting (and everything else) are called out [in the ECMAScript specifications](https://www.ecma-international.org/publications/standards/Ecma-262.htm), although there are parts that are left to implementations. — Heretic Monkey, Nov 20 '19 at 14:10
I'm not having any specific problem I just like to understand what it's doing — Strike Eagle, Nov 20 '19 at 14:11
The order of function declarations do not matter at all. Thank's to the hoisting itself, all the functions will get declared before any code is able to call any of them. So it's not something that changes how the code you write runs and consequently not knowledge that will be any help to you when debugging. — Lennholm, Nov 20 '19 at 14:14

score 3 · Accepted Answer · answered Nov 20 '19 at 14:14

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)

Roman Mahotskyi · Answer 2 · 2019-11-20T14:18:03.747

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.

Akshay Bande · Answer 3 · 2019-11-20T16:00:50.980

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.

JavaScript specific function hoisting

3 Answers3