Javascript variable declaration

You have three ways to declare variables in javascript.

  • const
  • let
  • var
Type Scope Redeclate Reassign
const block No No
let block No Yes
var function Yes Yes


Lets see in detail

const

Its scope is block

Means that if you declare a constant inside if scope, then you cannot access it outside that if block.

if(1){
    const PI = 3.14;
}
console.log(PI) // Uncaught ReferenceError: PI is not defined

It also means that if you declare a const inside a block, you can also declare another const with same name outside the block, and it will not throw the error.

if(1){
const PI = 3.14;
}
const PI = 3.143;
console.log(PI) // it will log 3.143

It cannot be redeclared inside same scope

If you define a constant, then you cannot declare another constant with same name inside the same block scope.

const PI = 3.14;
const PI = 3.143; //will throw Uncaught SyntaxError: Identifier 'PI' has already been declared

It cannot be reassigned (partially)

If you declare a const, then you cannot update its value, unless its an object or array.

const PI = 3.14;
PI = 3.143; // will throw Uncaught TypeError: Assignment to constant variable. But if the const is an object, then you can update its property.

const IMP_CONSTS = {
    PI : 3.14
}
console.log(IMP_CONSTS.PI); // 3.14
IMP_CONSTS.PI = 3.143;
console.log(IMP_CONSTS.PI); // 3.143

Same is the case with the arrays, you can update it even if it is a constant.

const IMP_ARR = [3.14];
console.log(IMP_ARR[0]); // 3.14
IMP_ARR[0] = 4;
console.log(IMP_ARR[0]); // 4

This shows that objects and arrays are mutable, while primitive values are not. As described from (mozilla docs about immutability)[https://developer.mozilla.org/en-US/docs/Glossary/Mutable]

Mutable is a type of variable that can be changed. In JavaScript, only objects and arrays are mutable, not primitive values. (You can make a variable name point to a new value, but the previous value is still held in memory. Hence the need for garbage collection.)

let

Its scope is block

Same as const, scope of let is block.

  • If you declare a let variable inside if, then you cannot access it outside.
  • You can declare a let inside if block, and you can declare another let with same name outside if, and it will not throw errorif(1){ let PI = 3.14; } console.log(PI); // Uncaught ReferenceError: PI is not definedif(1){ let PI = 3.14; let PI = 3.143; //Uncaught SyntaxError: Identifier ‘PI’ has already been declared }

It cannot be redeclared inside same scope.

Same as const, you cannot declare another let variable with same name inside same scope.

if(1){
    let PI = 3.14;
    let PI = 3.143; // Uncaught SyntaxError: Identifier 'PI' has already been declared
}

It can be reassigned

Unlike const, you can reassign the let variable.

if(1){
    let PI = 3.14;
    PI = 3.143;
    console.log(PI); // 3.143
}

var

Its scope is function

You can declare a var inside function, and access it inside if block. Conversly, you can declare a var inside if, and access it outside ( in same function. If no function, then inside window scope)

Example 1

if(1){
    var PI = 3.14;
}
console.log(PI); //3.14

Example 2

function declare(){
    var PI = 3.14;
}
declare();
console.log(PI); // PI is not defined

Example 3

var PI = 3.14;
function declare(){
    PI = 3.143; // this will access the PI from window scope
}
declare();
console.log(PI); // 3.143

Example 4

var PI = 3.14;
function declare(){
    var PI = 3.143; // this is new variable inside declare function scope
}
declare();
console.log(PI); // 3.14

It can be redeclared

You can declare a var variable, and again create another var variable with same name. It will not throw error.

var PI = 3.14;
var PI = 3.143;
console.log(PI); // 3.143

It can be reassigned

You can declare a var variable with any value, and it can be reassigned.

var PI = 3.14;
PI = 3.143;
console.log(PI); // 3.143