An Interest In:
Web News this WeekSearch Archive
Some of Our Sources
- Web Designer Wall
- Six Revisions
- 24 Ways
- Stylized Web
- Design Modo
- The Verge
This week we review Hoisting - what it is, function and variable hoisting, and a few key takeaways.
It is important to note that when code is hoisted it is not physically relocated in your program. Instead, your program is scanned for all variable/function declarations and those relationships are saved in the lexical environment. Your code maintains its original formatting and structure while variable/function declarations are accessible via lexical environment.
- Function Declarations are hoisted to the very top of the program. They can be called in the code prior to actual declaration. The example below logs without error:
- Function Expressions are not completely hoisted in the program. Instead, only the declaration will be hoisted because it is recognized as a variable (hint:
varkeyword). The actual assignment of the variable's value (in this case a function) is not hoisted. In the example below, you'll first get an error stating that expression is not a function. That is because the assignment was not hoisted - only the declaration. The second call of
expression()works, because the program has parsed through the program ad reached the assignment of the function to
Variables are hoisted to the top of their scope (local or global). Variables declared with
var are hoisted slightly differently that variables declared with
- var Variables are hoisted, initialized, but assigned value of
undefined. Similar to function expressions only the declaration is hoisted, not the actual assignment of the variable's value. The code below demonstrates how
varvariables are hoisted, initialized with a value of
undefined, and then reassigned their value once the program reaches the value assignment.
- let/const Variables are a little more tricky. These variables are hoisted, but remain uninitialized until they are evaluated. Unlike the
varvariables which are hoisted and initialized with a value of
constvariables are hoisted, but not initialized at all. That means they're sitting in the lexical environment uninitialized. Attempting to access a variable that is uninitialized throws a reference error. Once the program is in execution and reaches the variable declaration, your
constvariable will be initialized. It will either be initialized with a value (if assigned in the declaration line) or with
undefineduntil a value assignment is reached later on in the code.
This can be rather confusing at first, so let's take a look at the example below. You'll see that first an error is thrown because while the variable exists in the lexical environment, it remains uninitialized until the program reaches the line of variable declaration. Line 11 the variable gets initialized, but is assigned a value of
undefined because there is no value assignment. Line 13 the variable is assigned a value which overwrites previous value of
Take a look at the example below which showcases
var variables and their hoisting differences side by side:
- Variable declarations are hoisted, while variable definitions are not.
- Function declarations are hoisted, while function expressions are not.
- Variables with
varare hoisted, initialized, and assigned value of
- Variables with
constare hoisted, but remain uninitialized until their variable declaration code is reached. Then, they are either assigned
undefinedor a value depending if value assignment exists.
- It is helpful to declare your variables at the top of the function scope. This way, it is clear where variables are coming from and easier to identify their scope.
- Declare and initialize your variables before use to avoid bugs which stem from incorrect hoisting assumptions.