Reputation: 6615
I have been playing with ES6 for a while and I noticed that while variables declared with var
are hoisted as expected...
console.log(typeof name); // undefined
var name = "John";
...variables declared with let
or const
seem to have some problems with hoisting:
console.log(typeof name); // ReferenceError
let name = "John";
and
console.log(typeof name); // ReferenceError
const name = "John";
Does this mean that variables declared with let
or const
are not hoisted? What is really going on here? Is there any difference between let
and const
in this matter?
Upvotes: 364
Views: 97072
Reputation: 21
In JavaScript, variables declared with let
and const
are hoisted, but they have a behavior that distinguishes them from variables declared with var
.
Hoisting means that the variable declarations are moved to the top of their containing function or block scope during the compilation phase. However, there is a key difference between var
, let
, and const
in terms of hoisting:
var
variables are hoisted and initialized with the value undefined
. This means you can reference a var
variable before it's declared, and it will have the value undefined
at that point.console.log(x); // undefined
var x = 10;
let
and const
variables are also hoisted, but they are not initialized. If you try to access them before their declaration, you'll get a "ReferenceError."console.log(x); // ReferenceError: x is not defined
let x = 10;
So, while both let
and const
are hoisted to the top of their block or function scope, you cannot access them before their declaration due to the Temporal Dead Zone (TDZ) behavior. This behavior was introduced to catch potential errors and make code more predictable.
The Temporal Dead Zone (TDZ) is a concept in JavaScript related to variable declarations using the let
and const
keywords. It's a phase in the JavaScript execution context that occurs during variable initialization before a variable is assigned a value. Understanding TDZ is crucial for avoiding unexpected behavior in your code.
Here's how the Temporal Dead Zone works:
Variable Declaration: When you declare a variable using let
or const
, the JavaScript engine sets up a binding for that variable in the current scope. This means the variable is known to the engine, but it has not been initialized yet.
Initialization: Variables declared with let
and const
remain uninitialized in the TDZ until they are assigned a value using the =
operator.
Access Before Initialization: Attempting to access or reference a variable declared with let
or const
before it's been assigned a value will result in a ReferenceError
. This is because the variable exists in the TDZ, and accessing it in this state is not allowed.
Here's an example to illustrate the Temporal Dead Zone:
console.log(x); // Throws a ReferenceError
let x = 10;
In this example, we attempt to log the value of x
before it's declared and initialized. This results in a ReferenceError because x
is in the Temporal Dead Zone at the point of the console.log()
statement.
To avoid the Temporal Dead Zone, it's a good practice to always declare your variables at the top of the current scope before using them. For example:
let x; // Declare x at the top of the scope
console.log(x); // undefined (no error)
x = 10; // Initialize x
In this modified code, x
is declared at the top of the scope, which means it's still in the TDZ when we log it, but it doesn't throw an error because we're not trying to access its value before declaration.
So, the Temporal Dead Zone is a mechanism in JavaScript that prevents you from accessing variables declared with let
or const
before they are initialized. It helps catch potential bugs related to variable usage and encourages better coding practices by promoting variable declarations at the beginning of their respective scopes.
Upvotes: 2
Reputation: 665574
@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
Upvotes: 470
Reputation: 301
let and const are also hoisted. But an exception will be thrown if a variable declared with let or const is read before it is initialised due to below reasons.
Upvotes: 0
Reputation: 1786
At the top level of a function, or script, function declarations are treated like var declarations rather than like lexical declarations.
Referencing the variable in the block before the variable declaration results in a ReferenceError, because the variable is in a "temporal dead zone" from the start of the block until the declaration is processed.
Examples below make it clear as to how "let" variables behave in a lexical scope/nested-lexical scope.
var a;
console.log(a); //undefined
console.log(b); //undefined
var b;
let x;
console.log(x); //undefined
console.log(y); // Uncaught ReferenceError: y is not defined
let y;
The variable 'y' gives a referenceError, that doesn't mean it's not hoisted. The variable is created when the containing environment is instantiated. But it may not be accessed bcz of it being in an inaccessible "temporal dead zone".
let mylet = 'my value';
(function() {
//let mylet;
console.log(mylet); // "my value"
mylet = 'local value';
})();
let mylet = 'my value';
(function() {
let mylet;
console.log(mylet); // undefined
mylet = 'local value';
})();
In Example 3, the freshly declared "mylet" variable inside the function does not have an Initializer before the log statement, hence the value "undefined".
Upvotes: 12
Reputation: 99
in es6 when we use let or const we have to declare the variable before using them. eg. 1 -
// this will work
u = 10;
var u;
// this will give an error
k = 10;
let k; // ReferenceError: Cannot access 'k' before initialization.
eg. 2-
// this code works as variable j is declared before it is used.
function doSmth() {
j = 9;
}
let j;
doSmth();
console.log(j); // 9
Upvotes: 4
Reputation: 1907
From MDN web docs:
In ECMAScript 2015, let
and const
are hoisted but not initialized. Referencing the variable in the block before the variable declaration results in a ReferenceError
because the variable is in a "temporal dead zone" from the start of the block until the declaration is processed.
console.log(x); // ReferenceError
let x = 3;
Upvotes: 7
Reputation: 239693
Quoting ECMAScript 6 (ECMAScript 2015) specification's, let
and const
declarations section,
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.
So, to answer your question, yes, let
and const
hoist but you cannot access them before the actual declaration is evaluated at runtime.
Upvotes: 118
Reputation: 23642
ES6
introduces Let
variables which comes up with block level scoping
. Until ES5
we did not have block level scoping
, so the variables which are declared inside a block are always hoisted
to function level scoping.
Basically Scope
refers to where in your program your variables are visible, which determines where you are allowed to use variables you have declared. In ES5
we have global scope,function scope and try/catch scope
, with ES6
we also get the block level scoping by using Let.
var
keyword, it's known the entire function from the moment it's defined.When you define a variable with let
statement it's only known in the block it's defined.
function doSomething(arr){
//i is known here but undefined
//j is not known here
console.log(i);
console.log(j);
for(var i=0; i<arr.length; i++){
//i is known here
}
//i is known here
//j is not known here
console.log(i);
console.log(j);
for(let j=0; j<arr.length; j++){
//j is known here
}
//i is known here
//j is not known here
console.log(i);
console.log(j);
}
doSomething(["Thalaivar", "Vinoth", "Kabali", "Dinesh"]);
If you run the code, you could see the variable j
is only known in the loop
and not before and after. Yet, our variable i
is known in the entire function
from the moment it is defined onward.
There is another great advantage using let as it creates a new lexical environment and also binds fresh value rather than keeping an old reference.
for(var i=1; i<6; i++){
setTimeout(function(){
console.log(i);
},1000)
}
for(let i=1; i<6; i++){
setTimeout(function(){
console.log(i);
},1000)
}
The first for
loop always print the last value, with let
it creates a new scope and bind fresh values printing us 1, 2, 3, 4, 5
.
Coming to constants
, it work basically like let
, the only difference is their value can't be changed. In constants mutation is allowed but reassignment is not allowed.
const foo = {};
foo.bar = 42;
console.log(foo.bar); //works
const name = []
name.push("Vinoth");
console.log(name); //works
const age = 100;
age = 20; //Throws Uncaught TypeError: Assignment to constant variable.
console.log(age);
If a constant refers to an object
, it will always refer to the object
but the object
itself can be changed (if it is mutable). If you like to have an immutable object
, you could use Object.freeze([])
Upvotes: 35