28 February 2018

3 mins

JavaScript Hoisting

Written by Dean Gilewicz
JS
Hoisting occurs when a variable or function declaration is put into memory during the compile phase and is conceptually moved to the top of its enclosing scope. Here the variable a is hoisted:

See the Pen thecodelog.com - JS Hoisting 1 by Deano (@deangilewicz) on CodePen.

 A couple more examples:

See the Pen thecodelog.com - JS Hoisting 2 by Deano (@deangilewicz) on CodePen.

 Here the function declaration myFn is hoisted:

See the Pen thecodelog.com - JS Hoisting 3 by Deano (@deangilewicz) on CodePen.

 A couple more examples:

See the Pen thecodelog.com - JS Hoisting 4 by Deano (@deangilewicz) on CodePen.

 Function expressions are not hoisted.

See the Pen thecodelog.com - JS Hoisting 5 by Deano (@deangilewicz) on CodePen.

 Functions are hoisted first, and then variables.

See the Pen thecodelog.com - JS Hoisting 6 by Deano (@deangilewicz) on CodePen.