Scoping and Hoisting in JavaScript
A scope can be defined as the context in which a variable exists. The scope can be local, or global in JavaScript.
Do you know the value logged on the JavaScript console when the following code snippet is run?
The answer here is “The Flash”. This happens due to Function-level scoping in JavaScript on the variable declaration (using var
keyword). Developers from a Java background may find this surprising!
Function-level Scope
In JavaScript, variables declared (using var
keyword) are function-level scoped. The block-level scoping with loops and conditionals ( if,for, while, switch
blocks) don’t delimit the scope.
Hoisting
In JavaScript, hoisting is a powerful and expressive feature by which, the JavaScript interpreter moves the function and variable declarations to the top of the current referenced scope. The variable declarations and function declarations are hoisted in JavaScript!
The function body is hoisted along with the function declaration. In the code snippet, the function declaration is moved to the top of the scope through hoisting (above return
statement). The equivalent code interpreted would be:
An aside:
The assignment part of variable and function expressions is not hoisted, but only the declarations are!
The equivalent code interpreted would be:
What’s new in ECMAScript 2015 (ES6)?
ECMAScript 2015 introduced keywords: let
and const
for block-level scoping in JavaScript.
The variables declared with let
or const
keyword has the block in which they are declared, as well as any continued sub-blocks as their scope.
Hoisting in ES6
In ECMAScript 2015, let
and const
keyword variable declarations will hoist the variable to the top of the block. However, referencing the variable in the block before variable declaration results in ReferenceError
. The difference between var/function
declarations and let/const
declarations is in the initialization portion. The former are initialized with undefined
or generator function right when binding is created at top of the scope, while the latter stay uninitialized until let/const
statement is run. The variable is called to be in a “temporal dead zone” from the start of the block until the declaration is executed.
variable declaration keywords: ‘var’ v/s ‘let’
This happens due to the block-level scoping of let
variable declaration.
Summary: Hoisting is a very powerful feature in JavaScript language. This provides high flexibility to the language if used necessarily. Also, a strong understanding of scoping in JavaScript can help us to avoid many common mistakes.