Var, let, const and everything in between
Gurjot-Sidhu
Posted on September 13, 2020
Var,Let and Const. All 3 are different ways to declare variables in javascript. They are different from one another in ways that change the way how they are used. Let me explain...
VAR was the go to declaration for a long time until ES6 came out in June of 2015. One of the new additions was let and const.
The first major difference occurs in the Scope of these variables.
Scope - determines the accessibility of variables
Global Scope - Available throughout the whole window
Function Scope - Available ONLY in that function {}
Block Scope - Available ONLY within its {}
Var can be declared to have global and function scope.
var intro = "hello";// available globally
function end2020pls (){
var outro = "bye"; // only available here
}
console.log(intro) // works
console.log(outro) // error outro not defined
Let can be declared within block scope.
function end2020pls (){
let newintro = "say Hi";
console.log(newintro); // say Hi
}
console.log(newintro)// error newintro not defined
- However, the same let variable can exist in different scopes
let intro = "hello";// outside
function end2020pls(){
let intro = "not today";// inside
console.log(intro); // not today
}
console.log(intro); // hello
Const can be declared within block scope
function end2020pls(){
const newoutro = "see you later, alligator";
console.log(newoutro);// see you later, alligator
}
console.log(newoutro);// error newoutro is not defined
Updating and Redeclaring
Var can be updated and redeclared.
var intro = "hello";
var intro = "goodbye"; // works
intro = "suh dude"; // works
Let can be updated but CANNOT be redeclared.
let intro = "hello";
let intro = "goodbye"; // error intro has already been declared
Const Cannot be updated or redeclared.
const intro = "hello";
intro = "yo"; // error Assignment to constant variable
const intro = "yo"; // error intro has already been declared
Objects declared with Const cannot be updated or redeclared its properties can.
const person = {
name: "bob";,
age: "99";
}
person.age = 67; //works
Hoisting - a javascript mechanism where variables and function declarations are moved to the top of code execution
Var gets hoisted but is undefined
So this
console.log(intro);
var intro = "hello";
is actually
var intro;
console.log(intro); // intro is undefined
intro = "hello";
Let gets hoisted but is not initialized.
function end2020pls(){
console.log(x)//error ReferenceError x is not defined
let x = 2;
}
Const gets hoisted but is not initialized.
function end2020pls(){
console.log(x) // error ReferenceError x is not defined
const x = 2;
}
Thats all for now, feel free to reach out if I am missing something ;)
💖 💪 🙅 🚩
Gurjot-Sidhu
Posted on September 13, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.