Notion
Variable Declaration
In JavaScript, there are three keywords to declare a variable: var, let, and const. Each has its own characteristics and best use cases.
Short Explanation
Variables declared with the const keyword cannot be reassigned, whereas let and var can be. It's generally recommended to use const by default and let if you need to reassign the variable later.
| Scope | Reassignable | Mutable | Temporal Dead Zone | |
|---|---|---|---|---|
| const | Block | No | Yes | Yes |
| let | Block | Yes | Yes | Yes |
| var | Function | Yes | Yes | No |
Sample Code
const person = "Nick";
person = "John"; // Will raise an error, person can't be reassigned
let person = "Nick";
person = "John";
console.log(person); // "John", reassignment is allowed with let
Detailed Explanation
The scope of a variable defines where it is available in the code.
var
var declared variables are function scoped, meaning they are accessible within the function they are declared in. They cannot be accessed outside that function.
function myFunction() {
var myVar = "Nick";
console.log(myVar); // "Nick" - myVar is accessible inside the function
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.
Variables declared with var can be re-declared and are subject to hoisting, which means they are moved to the top of their scope at execution.
console.log(myVar); // undefined -- no error raised
var myVar = 2;
is interpreted as:
var myVar;
console.log(myVar); // undefined -- no error raised
myVar = 2;
let
let declared variables are block scoped, meaning they are accessible within the block they are declared in. They cannot be accessed before they are assigned, and cannot be re-declared in the same scope.
function myFunction() {
let myVar = "Nick";
if (true) {
let myVar = "John";
console.log(myVar); // "John" - a new block-scoped variable
}
console.log(myVar); // "Nick", unaffected by the block-scoped variable
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.
Temporal Dead Zone
let and const variables cannot be accessed before they are assigned, a phenomenon known as the Temporal Dead Zone (TDZ).
console.log(myVar); // raises a ReferenceError
let myVar = 2;
const
const declared variables behave like let variables but cannot be reassigned. They are also block scoped, not accessible before assignment, and cannot be re-declared in the same scope.
const myVar = "Nick";
myVar = "John"; // raises an error, reassignment is not allowed
const variables are not immutable. Object and array const variables can be mutated.
Mutable const
For objects:
const person = {
name: 'Nick'
};
person.name = 'John'; // allowed, object properties can be mutated
console.log(person.name); // "John"
person = "Sandra"; // raises an error, reassignment is not allowed
For arrays:
const people = [];
people.push('John'); // allowed, array elements can be mutated
console.log(people[0]); // "John"
people = ["Nick"]; // raises an error, reassignment is not allowed