var vs let vs const

Introduction

Let, var and const are ways to create a new varibale in javascript. Before ES2015 (or ES6) only var was available which provided limited scoping capabilities. let and const were instroduced in ES6.

There are two scopes in JS called global scope and function scope. Global scoped variable is accessible everywhere whereas function scoped variable is accessible only inside function declaration.

"In JavaScript, variables are initialized with the value of undefined when they are created.". The JavaScript interpreter will assign variable declarations a default value of undefined during what's called the "Creation" phase.

var

For var, it does not matter where it is declared first inside the function. Creation phase will happen before anything and var declaration will assigned a value as 'undefined' until initialized. (Think of every var in the function declaration coming up and being declared as unassigned on the first line.)

function app() {
  console.log(declare); //undefined
  console.log(i); //undefined

  var declare;
  declare  = "initialize";

  for(var i = 0; i < 5; i++){
    var sum = i;
  }

  console.log(declare); //initialize
  console.log(i); //5
  console.log(sum); //4
}

app();

Notice, declare was assigned a default value of unassigned and is accessible even before declaration. For variable i and sum, their values are accessible outside the loop as var is function scoped and not block scope. (Remember every var in the function coming up on the first line);

Also, I do not think its a good practice to access variable before declaring as it can lead to unknown issues.

To solve the problem, let and const was introduced in ES6.

let

let is block scoped rather than function scoped as in the case of var. Block scoped in most simple terms means inside {} and below nested code. Variables declared using let are not accessible before declaration. Imagine making a box starting from declaration of let till corresponding closing bracket.

function app() {
  console.log(declare); //undefined
  console.log(i); //ReferenceError: i is not defined

  var declare;
  declare  = "initialize";

  for(let i = 0; i < 5; i++){
    let sum = i;
  }

  console.log(declare); //initialize
  // console.log(i);

}

app();

As we tried accessing variable i before declaring it throws a reference error opposed to case with variables declared using var. This difference occurs because of the difference in scope of let and var.

function app() {
  console.log(declare); //undefined

  var declare;
  declare  = "initialize";

  for(let i = 0; i < 5; i++){
    let sum = i;
  }

  console.log(declare); //initialize
  console.log(i); //ReferenceError: i is not defined

}

app();

Notice, variable i is accessible only inside for loop. Outside its block, it throws a reference error of not being defined.

const

const is almost similar to let only difference being it can not be reassigned.

let firstName = "vaibhav";
const secondName = "aggarwal";

firstName = "changeMyName";
secondName = "youCantChangeMyName"; //TypeError: Assignment to constant variable.

Dont confuse reassigned with change. Its properties can be changed and only restriction is on reassigning.

const name = {
  firstName: "vaibhav",
  secondName: "aggarwal"
}

console.log(name);

name.firstName = "changeMyName";

console.log(name); 
// {
//   firstName: "changeMyName",
//   secondName: "aggarwal"
// }

name = {}; //TypeError: Assignment to constant variable.

There are many important concepts such as scope, hoisting etc... being involved here. I have tried explaining in simple terms for better understanding.

Reference

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide