Difference Between var, let, and const in Javascript
var and let
These are two keywords used to declare variables in Javascript. Even though most beginners know these two keywords exist, we struggle with finding the difference between them. So let's look at the difference between these keywords.
Declaring variables Example
var humanOne = "usama";
let humanTwo = "jaba";
console.log(humanOne); //Output: usama
console.log(humanTwo); //Output: jaba
Declaring variables in for loop (let
and var
)
for (let i=0; i<10; i++){
console.log(i);//Ouput will contain numbers from 0 to 9
}
console.log(i);// This will throw an error.
In the above example, the console.log
inside the for
loop block will print numbers from zero to nine on the console. However, the last console.log
code outside for
loop block will throw an error, Since the variables declared using let
keyword is only accessible in the block where it is declared. In this case, the variable i
is only accessible inside the for
loop block.
Now let's change the let
with var
on the above code.
for (var i=0; i<10; i++){
console.log(i);//Ouput will contain numbers from 0 to 9
}
console.log(i);// Output: 10
In the above example, i
is accessible outside the for
loop block. Because we are using the keyword var
to declare a variable i
. Here the first console.log
code will print the numbers from 0 to 9. And after printing the number 9, the value of the i
becomes 10. Then the condition for for
loop fails and it will jump out from the for
loop. Thus execute the last line of code console.log(i)
. Which will then print the number 10 on the console.
The Scope of the var
variable in a function
The variable declared using the var
keyword inside a function is accessible throughout that function, but not outside the function. Look at the below example.
function count() {
for (var i = 0; i < 10; i++) {
console.log(i); // Output: print numbers from 0 to 9
}
console.log(i); // Output: 10
}
count(); // calling function
console.log(i); //Output: Uncaught ReferenceError: i is not defined
The last line of the above code will throw an error since var
variables are only accessible inside the function where it is declared.
Notes:
var
is there in javascript from the beginning, butlet
andconst
are introduced recently in es6.var
is function-scoped, whilelet
andconst
are block-scoped.- Global variables declared using the
var
keyword would automatically get attached to the browserwindow
object. Whereaslet
prevents it. - Variable defined with
var
gets hoisted at the top of it's function. Variable defined usinglet
andconst
doesn't gets hoisted. We can redeclare
var
variables as many times as we want, whilelet
cannot be redeclared.var humanOne = "usama"; var humanOne = "new Usama"; // This is OK let humanTwo = "jaba"; let humanTwo = "new Jaba"; // Throws an error.
We can re-assign a new value to
var
andlet
variables. But a new value cannot be re-assigned to theconst
variable.let personOne = "usama"; personOne = "new Usama"; console.log(personOne); // Output: new Usama const personTwo = "jaba"; personTwo = "new jaba"; //Uncaught TypeError: Assignment to constant variable. console.log(personTwo);
However,
const
does allow us to change the properties of an object.const Usama = { name: "usama v", age: 20 } Usama.age = 19; console.log(Usama); // Output: {name: "usama v", age: 19}
Use
const
andlet
almost every single time when you declare variables unless you have a very specific case usingvar
.