var are function scoped and can be re-declared without triggering exceptions or warnings. let & const are block scoped and cannot be re-declared in the same scope.
var name = "jayman"; function userdetails() { let fullname = "jayman pandya"; let location = "mumbai"; console.log(name); //Will print "jayman" in console console.log(fullname); //Will print "jayman pandya" in console console.log(location); //Will print "mumbai" in console let fullname = "john doe"; //Will not run the script at all and throw a Syntax Error } userdetails(); console.log(name); //Will print "jayman" in console var name = "john doe"; console.log(name); //Will print "john doe" in console console.log(fullname); //Will throw a Reference Error console.log(location); //Won't come to this due to previous Reference Error
var and let can be re-assigned values. Properties of const object can be re-assigned values.
var name = "jayman"; console.log(name); //Will print "jayman" in console name = "John Doe"; console.log(name); //Will print "John Doe" in console let fullname = "jayman pandya"; console.log(fullname); //Will print "jayman pandya" in console fullname = "john doe"; //Will print "john doe" in console console.log(fullname); const person = { firstname : "jayman", lastname : "pandya", age : 32, location : "mumbai" } // Declaring a const object console.log(person) //Will print person object in console person.age = 33; // Properties of Const object can be re-assigned a new value. console.log(person) //Will print person object with updated "age" in console person = "john doe"; // Const object cannot be re-assigned to a new value
Variables declared by var bleed out of conditionals and loops. This is not the case with variables declared by let & const.
var cost_of_items = 800; if (cost_of_items < 1000) { var discount = 10; // Will be executed console.log(`You are eligible for ${discount}% discount.`); } else { // Will not be executed console.log("You have more than 20% discount."); } console.log(discount); // Will bleed and print "10" in console var cost_of_items = 800; if (cost_of_items < 1000) { let discount = 10; // Will be executed console.log(`You are eligible for ${discount}% discount.`); } else { // Will not be executed console.log("You have more than 20% discount."); } console.log(discount); // Will not bleed and will throw a Reference error
In the world of JavaScript it is advised to use IIFE (Immediately Invoked Function Expresssion) to obfuscate the values of variables outside the scope. There is a slight difference in writing the IIFE when using var, let & const.
function() { var name = "jayman"; } //IIFE ends { let name = "jayman" const person = { name: "jayman", age: 32, location: "mumbai" } //Const person ends } //IIFE ends
When I first understood this about JavaScript variables, I was confused what should be used and what shoudn’t. then I stumbled upon this article by Mathias and strongly agree to what he says at the end of it.
use
const
by default
only uselet
if rebinding is needed
(var
shouldn’t be used in ES6)
Peace ✌️