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);
console.log(humanTwo);
Declaring variables in for loop (let and var)
for (let i=0; i<10; i++){
console.log(i);
}
console.log(i);
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);
}
console.log(i);
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);
}
console.log(i);
}
count();
console.log(i);
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, but let and const are introduced recently in es6.var is function-scoped, while let and const are block-scoped.- Global variables declared using the
var keyword would automatically get attached to the browser window object. Whereas let prevents it.
- Variable defined with
var gets hoisted at the top of it's function. Variable defined using let and const doesn't gets hoisted.
We can redeclare var variables as many times as we want, while let cannot be redeclared.
var humanOne = "usama";
var humanOne = "new Usama";
let humanTwo = "jaba";
let humanTwo = "new Jaba";
We can re-assign a new value to var and let variables. But a new value cannot be re-assigned to the const variable.
let personOne = "usama";
personOne = "new Usama";
console.log(personOne);
const personTwo = "jaba";
personTwo = "new jaba";
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);
Use const and let almost every single time when you declare variables unless you have a very specific case using var.
