Var, let and const in Javascript

Var, let and const Overview

Var, let and const are used to declare variable in JavaScript. It’s true that var holds variable within function scope or global scope and let and const hold variable within block scope. But there are some differences other than this. Let’s dive deep.

When variables in global scope

Variable with var keyword always hoist in current scope, so that mean javascript engine allocate necessary memory space for variable and initialize with undefined. so that available can be accessible within that scope.

console.log(greeting); // undefined
var greeting = 'Hi there';

Also var variable quite flexible to re-declare variable with same name again and again. So it makes more bugs in code. 🙂

var greeting = 'Hello there';
var greeting = 'Hi there';
console.log(greeting); //Hi there
console.log(window.greeting); //Hi there

This flexibility leads developer to overwrite variable value which defined in other place.

---

Only other hand, let and const variables are hoist in current scope. but can’t access until initialize the variable. Because javascript engine does not initialize these variable with undefined. 🙁

console.log(greeting); //Uncaught ReferenceError: Cannot access 'greeting' before initialization
let greeting = 'Hi there'; 

Const variable must be initialize during declaration.

console.log(greeting); //Uncaught ReferenceError: Cannot access 'greeting' before initialization
const greeting = 'Hi there';

const a; //Uncaught SyntaxError: Missing initializer in const declaration
         //can't declare const variable without initializing at the same time

let and const variable cannot be accessed through window object

let greeting = 'Hi there';
console.log(greeting); //Hi there
console.log(window.greeting); //undefined
console.log(this.greeting); //undefined


const customGreeting= 'Hello there';
console.log(customGreeting); //Hello there
console.log(window.customGreeting); //undefined
console.log(this.customGreeting); //undefined

When variables in function scope or block scope

Same as global scope, variable with var keyword always hoisted within the function scope.

function SayGreet(time) {
   var greeting = 'Hi there';
   console.log(greeting); // Hi there

  if(time){
     var greeting = 'Hello there';
     console.log(greeting); //Hello there
  }

  console.log(greeting); //Hello there
}

SayGreet('10.30AM');

---

But let and const variable work within the block scope. so that bracket within if condition consider as separate scope.

function SayGreet(time){

   let greeting = 'Hi there';
   console.log(greeting); // Hi there

  if(time){
     let greeting = 'Hello there';
     console.log(greeting); //Hello there
  }

  console.log(greeting); //Hi there
}

SayGreet('10.30AM');

When variables Mutate

Var variable can be mutated at anytime and even same variable name can be used to re-declare the variable with new value.

---

But on the other hand, let can be mutated but can’t use same variable name to re-declare variable.

const variable has something special behaviour, base on the value of the variable is primitive or not, some property can be mutated.

const greeting = 'Hi there';  // string is primitive type
greeting = 'Hello there';     // Uncaught TypeError: Assignment to constant variable.

const user = {
  name : 'user 1',
  greeting : 'Hi there'
}
user.greeting  = 'Hello there'; // this will work because object is non primitive and property can be overridden. 
delete user.greeting; //true because it holds none primitive type value.

How to prevent object from overwriting or deleting.

Object.freeze() and Object.seal() method can be used for that.

const user = {
  name : 'user 1',
  greeting : 'Hi there'
}

Object.freeze(user);

user.greeting = 'Hello there'; //This will NOT work.
delete user.greeting; //This will NOT work

const user = {
  name : 'user 1',
  greeting : 'Hi there'
}

Object.seal(user);

user.greeting = 'Hello there'; //Current value will be overwritten
delete user.greeting;  //This will NOT work.

References:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const