Are variables declared with let or const hoisted?
@thefourtheye is correct in saying that these variables cannot be accessed before they are declared. However, it's a bit more complicated than that.
Are variables declared with
let
orconst
not hoisted? What is really going on here?
All declarations (var
, let
, const
, function
, function*
, class
) are "hoisted" in JavaScript. This means that if a name is declared in a scope, in that scope the identifier will always reference that particular variable:
x = "global";
// function scope:
(function() {
x; // not "global"
var/let/… x;
}());
// block scope (not for `var`s):
{
x; // not "global"
let/const/… x;
}
This is true both for function and block scopes1.
The difference between var
/function
/function*
declarations and let
/const
/class
declarations is the initialisation.
The former are initialised with undefined
or the (generator) function right when the binding is created at the top of the scope. The lexically declared variables however stay uninitialised. This means that a ReferenceError
exception is thrown when you try to access it. It will only get initialised when the let
/const
/class
statement is evaluated, everything before (above) that is called the temporal dead zone.
x = y = "global";
(function() {
x; // undefined
y; // Reference error: y is not defined
var x = "local";
let y = "local";
}());
Notice that a let y;
statement initialises the variable with undefined
like let y = undefined;
would have.
The temporal dead zone is not a syntactic location, but rather the time between the variable (scope) creation and the initialisation. It's not an error to reference the variable in code above the declaration as long as that code is not executed (e.g. a function body or simply dead code), and it will throw an exception if you access the variable before the initialisation even if the accessing code is below the declaration (e.g. in a hoisted function declaration that is called too early).
Is there any difference between
let
andconst
in this matter?
No, they work the same as far as hoisting is regarded. The only difference between them is that a const
ant must be and can only be assigned in the initialiser part of the declaration (const one = 1;
, both const one;
and later reassignments like one = 2
are invalid).
1: var
declarations are still working only on the function level, of course
Why can't assignment be done before the variable declaration with let and const?
Because they're explicitly designed not to allow that, because it's usually a programming mistake.
let
and const
are hoisted, but it's just the declaration of the binding that's hoisted. (Loosely, "binding" means "variable" [or constant or parameter...things with names we use to hold values].) The binding is not initialized until later, when the let
or const
statement is reached in the step-by-step execution of the code. You can't use an uninitialized binding (in any way), which is why you get an error.
In contrast, with var
both declaration and initialization are hoisted; var
bindings are initialized with the value undefined
. If there's an initialization value on the var
(var a = 42
), later when the var
statement is reached in the step-by-step execution of the code, that part is treated as simple assignment (a = 42
). With let
and const
, it's not just simple assignment, it's initialization of the binding, allowing it to be used.
Here's a concrete example of how let
hoists the declaration but not the initialization, and why it helps prevent programming mistakes:
let a = 1;
function foo() {
a = 2; // <=== Which `a` should be assigned to?
console.log(a);
// code
// code
// code
// code
// code
// code
// code
// code
let a = 3;
console.log(a);
}
foo();
JavaScript: Difference in hoisting for let, const?
One thing that const
or let
difference from var
is that the variable is not accessible before declaration.
Just checkout the specification: http://www.ecma-international.org/ecma-262/6.0/#sec-let-and-const-declarations
The variables are created when their containing Lexical Environment is instantiated but may not be accessed in any way until the variable’s LexicalBinding is evaluated.
Syntax
LexicalDeclaration[In, Yield] :
LetOrConst BindingList[?In, ?Yield] ;LetOrConst :
let
constBindingList[In, Yield] :
LexicalBinding[?In, ?Yield]
BindingList[?In, ?Yield] , LexicalBinding[?In, ?Yield]LexicalBinding[In, Yield] :
BindingIdentifier[?Yield] Initializer[?In, ?Yield]opt
BindingPattern[?Yield] Initializer[?In, ?Yield]
Related Topics
How to Convert an Image into Base64 String Using JavaScript
Selecting Text in an Element (Akin to Highlighting With Your Mouse)
What Is the Temporal Dead Zone
Getting the Id of the Element That Fired an Event
Combination of Async Function + Await + Settimeout
Detecting an "Invalid Date" Date Instance in JavaScript
How to Add 30 Minutes to a JavaScript Date Object
Uncaught Referenceerror: $ Is Not Defined
How to Encode a String to Base64 in JavaScript
How to Do String Interpolation in JavaScript
Create and Save a File With JavaScript
How Does the "This" Keyword in JavaScript Act Within an Object Literal
Disable/Enable an Input With Jquery
Pass Variables by Reference in JavaScript
Can Scrapy Be Used to Scrape Dynamic Content from Websites That Are Using Ajax