Related
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?
#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 or const 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 and const in this matter?
No, they work the same as far as hoisting is regarded. The only difference between them is that a constant 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
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.
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.
When you define a variable with 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([])
As per ECMAScript® 2021
Let and Const Declarations
let and const declarations define variables that are scoped to the running execution context's LexicalEnvironment.
The variables are created when their containing Environment Record is instantiated but may not be accessed in any way until the variable's LexicalBinding is evaluated.
A variable defined by a LexicalBinding with an Initializer is assigned the value of its Initializer's AssignmentExpression when the LexicalBinding is evaluated, not when the variable is created.
If a LexicalBinding in a let declaration does not have an Initializer the variable is assigned the value undefined when the LexicalBinding is evaluated.
Block Declaration Instantiation
When a Block or CaseBlock is evaluated a new declarative Environment Record is created and bindings for each block scoped variable, constant, function, or class declared in the block are instantiated in the Environment Record.
No matter how control leaves the Block the LexicalEnvironment is always restored to its former state.
Top Level Lexically Declared Names
At the top level of a function, or script, function declarations are treated like var declarations rather than like lexical declarations.
Conclusion
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.
Examples below make it clear as to how "let" variables behave in a lexical scope/nested-lexical scope.
Example 1
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".
Example 2
let mylet = 'my value';
(function() {
//let mylet;
console.log(mylet); // "my value"
mylet = 'local value';
})();
Example 3
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".
Source
ECMA
MDN
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;
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
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.
Unlike var, they are not initialised with a default value while hoisting.
They cannot be read/written until they have been fully initialised.
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?
#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 or const 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 and const in this matter?
No, they work the same as far as hoisting is regarded. The only difference between them is that a constant 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
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.
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.
When you define a variable with 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([])
As per ECMAScript® 2021
Let and Const Declarations
let and const declarations define variables that are scoped to the running execution context's LexicalEnvironment.
The variables are created when their containing Environment Record is instantiated but may not be accessed in any way until the variable's LexicalBinding is evaluated.
A variable defined by a LexicalBinding with an Initializer is assigned the value of its Initializer's AssignmentExpression when the LexicalBinding is evaluated, not when the variable is created.
If a LexicalBinding in a let declaration does not have an Initializer the variable is assigned the value undefined when the LexicalBinding is evaluated.
Block Declaration Instantiation
When a Block or CaseBlock is evaluated a new declarative Environment Record is created and bindings for each block scoped variable, constant, function, or class declared in the block are instantiated in the Environment Record.
No matter how control leaves the Block the LexicalEnvironment is always restored to its former state.
Top Level Lexically Declared Names
At the top level of a function, or script, function declarations are treated like var declarations rather than like lexical declarations.
Conclusion
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.
Examples below make it clear as to how "let" variables behave in a lexical scope/nested-lexical scope.
Example 1
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".
Example 2
let mylet = 'my value';
(function() {
//let mylet;
console.log(mylet); // "my value"
mylet = 'local value';
})();
Example 3
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".
Source
ECMA
MDN
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;
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
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.
Unlike var, they are not initialised with a default value while hoisting.
They cannot be read/written until they have been fully initialised.
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?
#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 or const 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 and const in this matter?
No, they work the same as far as hoisting is regarded. The only difference between them is that a constant 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
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.
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.
When you define a variable with 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([])
As per ECMAScript® 2021
Let and Const Declarations
let and const declarations define variables that are scoped to the running execution context's LexicalEnvironment.
The variables are created when their containing Environment Record is instantiated but may not be accessed in any way until the variable's LexicalBinding is evaluated.
A variable defined by a LexicalBinding with an Initializer is assigned the value of its Initializer's AssignmentExpression when the LexicalBinding is evaluated, not when the variable is created.
If a LexicalBinding in a let declaration does not have an Initializer the variable is assigned the value undefined when the LexicalBinding is evaluated.
Block Declaration Instantiation
When a Block or CaseBlock is evaluated a new declarative Environment Record is created and bindings for each block scoped variable, constant, function, or class declared in the block are instantiated in the Environment Record.
No matter how control leaves the Block the LexicalEnvironment is always restored to its former state.
Top Level Lexically Declared Names
At the top level of a function, or script, function declarations are treated like var declarations rather than like lexical declarations.
Conclusion
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.
Examples below make it clear as to how "let" variables behave in a lexical scope/nested-lexical scope.
Example 1
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".
Example 2
let mylet = 'my value';
(function() {
//let mylet;
console.log(mylet); // "my value"
mylet = 'local value';
})();
Example 3
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".
Source
ECMA
MDN
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;
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
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.
Unlike var, they are not initialised with a default value while hoisting.
They cannot be read/written until they have been fully initialised.
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?
#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 or const 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 and const in this matter?
No, they work the same as far as hoisting is regarded. The only difference between them is that a constant 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
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.
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.
When you define a variable with 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([])
As per ECMAScript® 2021
Let and Const Declarations
let and const declarations define variables that are scoped to the running execution context's LexicalEnvironment.
The variables are created when their containing Environment Record is instantiated but may not be accessed in any way until the variable's LexicalBinding is evaluated.
A variable defined by a LexicalBinding with an Initializer is assigned the value of its Initializer's AssignmentExpression when the LexicalBinding is evaluated, not when the variable is created.
If a LexicalBinding in a let declaration does not have an Initializer the variable is assigned the value undefined when the LexicalBinding is evaluated.
Block Declaration Instantiation
When a Block or CaseBlock is evaluated a new declarative Environment Record is created and bindings for each block scoped variable, constant, function, or class declared in the block are instantiated in the Environment Record.
No matter how control leaves the Block the LexicalEnvironment is always restored to its former state.
Top Level Lexically Declared Names
At the top level of a function, or script, function declarations are treated like var declarations rather than like lexical declarations.
Conclusion
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.
Examples below make it clear as to how "let" variables behave in a lexical scope/nested-lexical scope.
Example 1
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".
Example 2
let mylet = 'my value';
(function() {
//let mylet;
console.log(mylet); // "my value"
mylet = 'local value';
})();
Example 3
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".
Source
ECMA
MDN
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;
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
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.
Unlike var, they are not initialised with a default value while hoisting.
They cannot be read/written until they have been fully initialised.
Thanks a lot in advance for helping me out!
var f2 = function() {
x = "inside f2";
};
f2();
console.log(x);
// → inside f2
Why do I get the x as a global variable with value "inside f2" when I didn't declare it to be a global variable with "var x;" before defining the function?
var f2 = function() {
var x = "inside f2";
};
f2();
console.log(x);
// → Uncaught ReferenceError: x is not defined
Am I right in assuming that x is not defined in this case because there is no global variable x, only the local variable x within the function f2?
Why do I get the x as a global variable with value "inside f2" when I didn't declare it to be a global variable with "var x;" before defining the function?
Because the specification says so. If you assign to an undeclared variable, a global variable is created. In strict mode this will throw an error (which is more reasonable).
Am I right in assuming that x is not defined in this case because there is no global variable x, only the local variable x within the function f2?
Yes.
8.7.2 PutValue (V, W)
[...]
3. If IsUnresolvableReference(V), then
a. If IsStrictReference(V) is true, then
i. Throw ReferenceError exception.
b. Call the [[Put]] internal method of the global object, passing GetReferencedName(V) for the property name, W for the value, and false for the Throw flag.
Declared variables (using var clause) are constrained in the execution context in which they are declared. Undeclared variables are always global.
ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
Doing x = "inside f2" will climb the scope chain until it hits an x or until the global space, where it will do property assignment on the global object.
It doesn't matter if you've declared x in the global space or not.
A variable can be declared both with an without the var-keyword. The main differences are that with the var-keyword the variable is contained within the closure in which it is declared - without the variable is considered global.
The reason it becomes global is that the runtime looks up the closure hierarchy to find the given variable. When it doesn't find it, it will declare it in the global scope in order for you to use it.
When you do x="inside f2" you are indeed declaring a variable. Because there was no x in that function’s scope, the compiler looks outside the current scope for this variable. It doesn’t exist, so it is set as a global.
Doing var x declares the variable in the current scope, which is not necessarily the global scope.
You should use strict; to catch errors like this.