ECMAScript, the JavaScript language standard adds new features to the JavaScript ecosystem every year. One of many amazing features introduced in the JavaScript language in ES6 are the let and const keywords for variable declaration.
The difference between var, let and const keywords are the use, hoisting and scope which we will cover all in details in this article.
Lets start with the var keyword.
The var keyword
Prior to the let and const keywords, var was the only keyword used in the JavaScript language for variable declaration.
A simple example of variable declaration using var will look like:
var name = 'Ahmad';
console.log(name); // Ahmad
var has global scope, which means, its accessible everywhere in the program or local scope which is accessible inside a function, conditional, loop and etc.
// Global scope
var firstName = 'Ahmad';
function myName() {
console.log(firstName); // Ahmad
// Local/function scope
var lastName = 'Ali';
console.log(lastName); // Ali
}
myName();
There are a few issues with the var keyword that are listed below:
1: var can be redeclared:
var name = 'Ahmad';
var name = 'Ali';
or it's value can be updated:
var name = 'Ahmad';
name = 'Ali';
2: The var keyword is hoisted to the top of the scope. Hoisting means, a variable is moved to the top of the program before it's extecution. To make it more clear, we execute a variable before it's declared or variable will be decalared after calling it.
console.log(name); // undefined
var name = 'Ahmad';
Above code is interpreted as:
var name;
console.log(name); // undefined
name = 'Ahmad';
The let keyword
The let keyword in JavaScript is basically the improved version of the var keyword and its widely used among developers for variable declaration.
let a = 5;
function myNumber() {
let b = 10;
console.log(b);
console.log(a);
}
myNumber();
/* Output:
5
10
*/
The let keyword is block scoped, that means it can not be accessed outside of it's block. A block is simply the {} brackets.
let a = 5;
function myNumber() {
let b = 10;
if (b === 10) {
let c = 20;
console.log(c); // 20
}
console.log(c); // c is not defined
}
myNumber();
In example above, c is scoped to it's block which is the conditional and it can not be accessed outside of it.
The value of the let keyword can be updated:
let name = 'Ahmad';
name = 'Ali';
console.log(name); // Ali
But, it can not be redeclared:
let name = 'Ahmad';
let name = 'Ali'; // name has already been declared
The const keyword
Same like let, the const keyword is also block scoped and can only be accessed within it's block.
The const keyword can be used to store contstant values. A const variable can not be redeclared and it's value can not be updated.
const name = 'Ahmad';
name = 'Ali'; // Assignment to constant variable
But, in terms of objects, we can update it's child values.
const person = {
firstName: 'Nangialai',
lastName: 'Stoman',
age: 26
};
console.log(
`${person.firstName} ${person.lastName} is ${person.age} years old.`
);
// Nangialai Stoman is 26 years old.
person.age = 27;
console.log(
`${person.firstName} ${person.lastName} is ${person.age} years old.`
);
// Nangialai Stoman is 27 years old.
Closing thoughts
I have seen many developers are using the newer keywords of JavaScript when declaring variable, which is perfectly OK, but I think understanding when to use which keyword is more important.
I personally use the var keyword in most cases, but when its a matter of scope that I don't want the variable to be accessible outside of its block, I use the let keyword. Similarly, when I know that the value of my variable is never going to be changed or updated, I use the const keyword.