JS hoisting by example

0.md

JavaScript function hoisting by example

Below are many examples of function hoisting behavior in JavaScript. Ones marked as works successfuly print 'hi!' without errors.

To play around with these examples (recommended) clone them with git and execute them with e.g. node a.js

Notes on hoisting

(I may be using incorrect terms below, please forgive me)

When JS is parsed, a first pass is done over each scope, and function definitions are immediately discovered. An example of a function definition is function foo() {}. When a function is declared like this, with a name, that name becomes available to the entire scope when the code in that scope is executed.

A crude timeline of how JS gets executed:

1. Parse the scope and detect all function definitions
2. Execute the code top-to-bottom with all functions found in step 1 available as variables

This behavior is called 'hoisting' because it is almost like the function definitions have been 'hoisted' up to the top of the function.

Assignments are not evaluated until the code is executed. An example of an assignment is var foo = function() {} or var foo = function foo() {}. A function must not be associated with an assignment in order for it to be hoisted (see example L)

Wrapping a function in parenthesis (()) is a quick way to convert a function definition into a function expression, which means it does not get hoisted (similar to assigning the function to a variable). I personally do not use this pattern regularly as I find it overly confusing to newbies etc, but I have included it because it is widely used in e.g. jQuery plugins.

I use hoisting as a code organization tool, for example here I rely on hoisting to make parseStream() available on line 20, even though it is defined on line 41, which I think makes that file more readable as I can put the 'meat' of the function at the top.

a.js

// A (works)

function sayHi() {
  console.log('hi!')
}

sayHi()

b.js

// B (works)

sayHi()

function sayHi() {
  console.log('hi!')
}

c.js

// C (works)

var sayHi = function() {
  console.log('hi!')
}

sayHi()

d.js

// D (does not work)

sayHi()  

var sayHi = function() {
  console.log('hi!')
}

e.js

// E (does not work)

(function sayHi() {
  console.log('hi!')
})

sayHi()

f.js

// F (does not work)

sayHi()

(function sayHi() {
  console.log('hi!')
})

g.js

// G (works)

(function sayHi() {
  console.log('hi!')
})()

h.js

// H (works)

(function() {
  console.log('hi!')
})()

i.js

// I (works)

var sayHi = (function() {
  console.log('hi!')
})()

j.js

// J (works)

var sayHi = (function() {
  console.log('hi!')
})

sayHi()

k.js

// K (does not work) 

sayHi()

var sayHi = (function() {
  console.log('hi!')
})

l.js

// L (does not work)

sayHi()

var x = function sayHi() {
  console.log('hi!')
}

m.js

// M

var x = (function sayHi() {
  console.log('hi!')
})

x() // works
sayHi() // does not work

Add my two cents:

var a = function () {
	b();
	c();
},
b = function () {
	alert("b");
},
c = function () {
	alert("c");
};

a();

jsfiddle

👍

Very useful tutorial! Thanks a lot!

JavaScript is so wild.

👍 leka man

awesome...

why e.js does not work?

superb.... great things explained in easiest way...

Thanks :)

i.js is somewhat misleading, in that sayHi does not get assigned a function like in the rest of cases, but the execution result. It would be clearer if the variable had some name other than sayHi in that case (e.g. x, as in l.js and m.js).

👍

Great. Thanks!

Great examples. Thanks ;)

Is this outdated now? Looks like at least most of the not working examples work in the console....

@BDGrace you have to clone this repo and run the examples with node <x>.js since the devtools console works differently in regards to hoisting logic

Great! Thanks for sharing.

Great explanation ! Thanks alot :)

Excelent explanaition!

cool.
Function declarations are hoisted but not function expressions.

Great examples!

Thx for sharing !

AMZNG!.

Thanks for the content!

Thanks for sharing!

#Suggestion.

You can make a link to it, "see example L" as.

see example L

URL: https://gist.github.com/maxogden/4bed247d9852de93c94c#file-l-js

Thanks for sharing! 🙏🏻

Thanks for sharing

Thanks for sharing!
For those who want to explore more about this topic & more, great article to read:
https://www.freecodecamp.org/news/execution-context-how-javascript-works-behind-the-scenes/

Thank you very much for this theory unit, it was very helpful :)

Thanks for sharing!