There are three different keyword you can use when declaring a variable(or constant) in Javascript. They are var
, let
, and const
. Shortly, you can use either var
or let
if you want to define a changeable variable. A variable define with var
or let
keyword is mutable. You can change their value as needed. Keyword const
in other hand is used to define a constant as the name implied. A value assign to a constant is immutable. It can never be change.
Go Deeper
Keyword var
:
Before ES6, var
is the only keyword you can use when defining a variable. A variable defined with var
keyword is accessible to entire script(global) when it defines outside a function. See below example:
var name = "Josh";
function greetings(){
//name is accessible here
console.log("Hi, ",name,"!")
}
greetings();
//name is accessible here as well
console.log("Your name is ", name);
From code above we will say that the variable name
is scoped globally, because it is defined outside a function. If it is defined wherever in a function body it has function scope, and it's accessible to the entire function where it's defined. Below is the sample script:
function count(){
for (var i = 0; i < 5; i++) {
if(i==0) {
// define counter in this if scope
var counter = 1;
}
else {
// counter is accessible here
counter += 1;
}
// counter is accessible here
console.log("Inside the loop:", counter);
}
// counter is accessible here
console.log("Outside the loop:", counter);
}
count();
You can see that even though you define the variable counter
inside the if block, it is accessible to the whole function. That's one of the characteristic of the var
. Another thing about var
is you can re-declare same variable multiple times with var
keyword:
var name = "James";
var name = "Albert";
var name = 5;
Keyword let
:
let
keyword is introduced in ES6 as a new way to declare variable in Javascript. What makes it different and better than var
is that a variable defined with let
keyword is a block scoped variable. It's only accessible in block where it's defined. With that, you can avoid unintentionally assign wrong value to another variable with same name as it may happen with var
keyword.
Here is sample script of let
usage:
for (let count = 0; count < 5; count++) {
// count is accessible here
console.log("Inside the loop:", count);
}
// here count is inaccessible
console.log("Outside the loop:", count);
Keyword const
:
Like let
, keyword const
is introduced in ES6 as well, and has block scope precisely like let
has although it has different purpose. It use to define constant variables. Once you define a constant, its values will stay the same throughout its scope. It will throw an error if you try to change it. Here is the example:
const PI = 3.14;
shouldChange = true;
if (shouldChange){
//try to change const value will result an error
PI = 2.5;
}
Though it's clear that you cannot change a const
variable's value for scalar data types like number, boolean, or string, it's a bit tricky to understand how it works when using const
to define an array or an object.
const
in array or object context
When you define an array or an object using const
, the variable will hold the reference to that object or array, so the reference is unchangeable, but its content is changeable. See code below:
/* Array example */
const arr1 = [1, 2, 3, 4];
//reassign value to arr1 will throw an error
//arr1 = [1,2,3,4,5]
//but change the arr1 content is ok
arr1.push(5);
/* Object example */
const person = {name:"Bob", age: 34}
//change content of person is ok
person["hobby"] = "badminton";
person.lastName = "Marley";
//reassign person will throw an error
//person = {name:"Bob", lastName:"Marley", age:34, hobby:"badminton"}
Those are var
, let
, const
with similarities and differences. Here are the key notes about those three:
var | let | const |
Available before ES6 | Come as new feature in ES6 | Come as new feature in ES6 |
Global and functional scope | Block scope | Block scope |
Use to hold changeable values | Use to hold changeable values | Use to hold constant values |