Understand var, let and const keywords in JavaScript6 min read
JavaScript ECMAScript 2015 or ES6 was released in 2015 is the version that has the most significant changes and new features in JavaScript up to this point. In this article, we are going to explore how to declare variables with the var keyword, let & const which were added in ES6. Let’s find out what is the difference between them, how we can use those keywords in different contexts. But first, if you don’t have a clue what is ES6, ECMAScript 2015, considering read this article first:
Now, I think we are ready to go forward, before JavaScript ES6, the only way to declare a variable in JavaScript was by using the var keyword. But with the introduction of ES6 in 2015, there are 2 more keywords you can choose to declare a variable, which are let and const. Three of them are using for the same purpose of declaring variables in JavaScript, but actually their features are not the same. First, we begin with the var keyword, which was introduced before ES6.
The var keyword
Function scoping is best practice to use the var keyword because when you define a variable inside function’s scope using the var keyword, this variable means it’s the local variable that outside cannot access. Following this code:
function foo(){
var x = "inside";
console.log(x);
}
foo(); //inside
console.log(x) // Error, x is not definedAs you can see, we tried to log out the value of x but because x is treated as a local variable with var keyword thus the error will appear unsurprisingly.
With the var keyword, we totally can re-assign the value of variables:
var x = 5;
x = 6;
console.log(x); // 6
function greeting() {
var a = "Hello";
a = "Hello JavaScript!";
console.log(a);
}
greeting(); // Hello JavaScript!
/* Because we can re-assign variable,
it will be a little confusing sometimes: */
function who(){
var x;
var y = x
x = 20;
y = 30;
console.log(x);
console.log(y);
}
who(); // Ouput 20, 30Not only were able to re-assign variables by using the var keyword, but it can also be re-declared even when you use strict mode:
'use strict';
var x = 30;
var x = 70;
console.log(x); // 70
var y = "Java";
var y = "JavaScript";
console.log(y); // JavaScriptWhen using the var keyword, you always need to remember put it in scope which means this variable is a local variable, but if in case you put it outside of a function or scope it would become a global variable that can be accessed anywhere in your program:
var x = "outside";
function inside(){
console.log(x);
}
inside(); // outside
/* Because declare variable outside of function scope
this variable will become global and it can be
re-assigned inside the function scope and when we log
the value of y, it has been changed, consider the code
below:
*/
var y = 30;
function number(){
y = 20;
var z = 50;
console.log(y + z);
}
number(); // 70
console.log(y); // 20The var keyword also being used in a loop context, not only it’s visible in loop scope, it can be visible as a whole function as well:
function looping(){
for(var i = 0; i < 5; i++){
console.log(i);
}
// i is also visible as a whole function
}Now you
The let keyword
The let keyword is used as a declare a local variable inside a block (like var), if you declare variable used let keyword outside of a block, it’s also being a global variable (also, like var) and if you want to re-assign the value of your variable which defined with let keyword, you totally can do it (as well var), consider the following codes below:
function name(){
let x = "My name is Jessica"; // Local variable
console.log(x);
}
name(); // My name is Jessica
let y = 27; // Global variable
function sumUp(){
let z = 23;
console.log(y+z);
}
sumUp(); // 50;
let q = 13;
function divide(){
let w = 2;
q = 14; // Re-assign
console.log(q/w)
}
divide(); // 7Nonetheless, the difference between var and let are, with var you can re-declare variable, but you can’t do it with let. A variable with the var keyword is used in a loop is visible in a whole function, with let keyword it’s just visible in loop scope. Consider the code below:
let x = 20;
let x = 30; // Uncaught SyntaxError: Identifier 'x' has already been declared
function aLoop(){
for(let i = 0; i < 20; i++){
console.log(i);
}
// i is not visible here.
}That is the shred of evidence why developers prefer the let keyword over the var keyword, which will help them reduce to encounter the potential errors.
The const keyword
In general, both var and let are used to declare variables that can be re-assigned, but sometimes you don’t want to re-assign values to your variable. It’s time when the const keyword comes in handy, when you declare a variable with the const keyword, meaning this variable might be a constant and its value cannot be changed once initialized. Yet, don’t be confused cannot re-assign with immutable because even with const keyword we cannot assign a variable to a different value but we still can access and change the value inside it somehow. For instance, an object declared with the const keyword and we can access its properties and change the values inside it – which called mutable. Now let’s see how it looks like:
const x = 2;
const x = 3; // Error, cannot be re-declare
const z = 5;
z = 7; // Error, cannot be re-assign
const a = [2, 3, 4, 5];
for(let i = 0; i < a.length; i++){
console.log(a[i]+ 1);
} // Output: 3, 4, 5, 6
/* Variable declared with const keyword
cannot be re-assigned, but it's still
mutable.
*/If you declare a variable using const keyword outside of a block context, it’s also become global:
const x = 69;
function count(){
console.log(x + 96);
}
count(); // 165Conclusion
With JavaScript ES6, there are a few different ways that help you declare a variable, depending on your purpose to choose the right keyword, remember var keyword is weakest, let is the popular keyword that is utilized for, maybe re-assigned variable but cannot re-declared. The const keyword is the best if you want to declare a constant or something that you firmly want that its values cannot be assigned.
