Common characteristics
Block scope
The keywords let and const in front of the variable declare the variable, which is available only in its local domain, the so-called “block scope”. When a variable is declared with let/const within curly braces, then the curly braces are the edges of its domain.
|
1 2 3 4 5 6 |
if (5 > 0) { const osoba = "Pera"; let godine = 44; } console.log(osoba); // Returns: ReferenceError: osoba is not defined console.log(godine); // Returns: ReferenceError: year is not defined |
No hosting variable at compile time
Variables declared with “let/const” are not hoisted to the top of the block, as variables declared with “var” do.
|
1 2 3 4 5 6 7 8 9 |
function uradi() { console.log(bar); // undefined console.log(pi); // ReferenceError pi is not defined console.log(foo); // ReferenceError foo is not defined var bar = 1; const pi = 3.14; let foo = 2; } uradi(); |
Do not create global variables
It should be noted that “let/const” keywords do not make global variables even when in the global domain:
|
1 2 3 4 5 6 |
var x = 'global'; let y = 'nije global'; const z = 'nije global'; console.log(this.x); // "global" console.log(this.y); // undefined console.log(this.z); // undefined |
Specifics of the “flight” keyword
Block scope
A variable can be declared with the keyword “let” and outside the curly braces, and it will still belong to the domain that makes up the curly braces. This exception applies to the case when a variable is declared within an iteration bound expression:
|
1 2 3 4 |
for (let i = 0; i < 5; i++){ // The domain for the variable "i" is between curly brackets } console.log(i); // Returns: ReferenceError: i is not defined |
Redeclaring a variable in the same block causes a Syntax Error
Unlike declaring a variable with the “var” keyword where redeclaration of the variable is allowed, redeclaring a variable in the same domain with the “let” keyword is not allowed, and throws an error.
|
1 2 3 4 |
if (5>0) { let foo; let foo = 5; // SyntaxError thrown. } |
For this reason, care should be taken not to use it within the “switch” expression because it is all one domain:
|
1 2 3 4 5 6 7 8 9 |
let x = 1; switch(x) { case 0: let foo = 5; break; case 1: let foo = 10; // SyntaxError for redeclaration. break; } |
This problem can be overcome as follows:
|
1 2 3 4 5 6 7 8 9 10 11 |
let x = 1; switch(x) { case 0: { let foo; break; } case 1: { let foo; break; } } |
Solves the problem of iteration and setTimeout() methods
Using the keyword “let” instead of “var”, within the “for…loop”, simply solves a known issue related to iteration within the setTimeout method.
|
1 2 3 4 5 |
for (var i = 0; i < 5; i++){ setTimeout(function(){ console.log(i); }, 1000); } // Returns: 5 5 5 5 5 |
Since the “let” keyword redefines a new variable “i” at each iteration of the loop, then the expected result is obtained:
|
1 2 3 4 5 |
for (let i = 0; i < 5; i++){ setTimeout(function(){ console.log(i); }, 1000); } // Vraća: 1 2 3 4 5 |
See more about this problem in the article (Impossible Errors in JavaScript).
Specificity of the “const” keyword
Variables declared with the keyword “const” generate a constant. Constants in JavaScript are “immutable variables”, ie. variables that cannot be reassigned new content.
|
1 2 3 |
const PI = 3.14; // Kada zelimo da promenimo konstantu: PI = 5; // Returnserror "Assignment to constant variable" |
Variability of constant content!?
It should be noted that immutability only applies to the variable, but not to the immutability of the constant content!
|
1 2 3 4 5 6 7 8 9 |
const someObject = { a : 5, b : 6 } // When we want to change a variable that is a constant: someObject = 10; // Returnserror "Assignment to constant variable" // However, we can easily change the property of the object, which is a constant: someObject.a = 8; // Ne pravi error |
or as in the following example adding new members to the array will not throw an error:
|
1 2 3 |
const people = ['Tesla', 'Musk'] people.push('Berners-Lee') console.log(people) // Returns: ['Tesla', 'Musk', 'Berners-Lee'] |
A real constant with immutable content
If we would like the content to be immutable, then we need to use the method Object.freeze():
|
1 2 |
const frozen = Object.freeze(['Ice', 'Icicle', 'Ice cube']) frozen.push('Water') // Returns: Uncaught TypeError: Can't add property 3, object is not extensible |
See more about “Object.freeze()” in the article “Object() & Object.prototype”