fbpx

Difference between JavaScript var, let and const?

JavaScript gives us the flexibility to initialize a variable anywhere even without declaring it. Sometimes it is handy but it causes many problems when we forgot about this.

To avoid silly mistake and make coding more sensible JavaScript introduce two new keywords for variable let and const with ES2015 (ES6). Before using them we should know the difference between var, let, and const.

JavaScript var let and const
Difference between JavaScript var, let and const

var:

#1: The var statement declares a variable, optionally initializing it to a value. If you do not initialize a var then it by default initialize by undefined

var a;

if (x === 1) {
  var x = 2;

  console.log(x);  // expected output: 2
}

console.log(x); // expected output: 2

console.log(a); //expected output undefined

#2: Declared var variables are constrained in the execution context in which they are declared. Undeclared variables are always global.

It means if a var variable declare in function then it has function scope and if it is declare outside the function then it has global scope.

Scoping of variable
var x; // Declare at file scope

function abc() {
    var y; // declare at function scope
    z = 2 // Creates a new global variable z, and assigns it a value of 2.
    // (Throws a ReferenceError in strict mode.)
    y = 4;
    x = 8;
    function xyz() {
        console.log({y}) // expected output 4
        // because y has function cope of xyz and can be access by its inner function

        console.log({x}) // expected output 2
        // It has global scope


        var a = 4 // declare and initialize at function scope.
    }
    
    xyz(); // calling inner function
    console.log({z}) // expected output 2
    // It has global scope

    console.log({x})// expected output 2
    // It has global scope

    console.log({a}) // ReferenceError: a is not defined.
    // Because a has function scope of xyz
    
}
abc()
scope of JavaScript var
scope of JavaScript var

Proper logging can help you debugging and understanding the JavaScript code.
Check our blog beyond console.log()

The scope of a var declared in a JS function is the whole body of that function.

Blocks are not scopes

#3: Declared variables are created before any code is executed. Undeclared variables do not exist until the code assigning to them is executed.

console.log({a}) // expected output undefined
var a; //Declared variable

console.log({b}) // logging Undeclared variable
// expected outout ReferenceError: b is not defined

b = 3 //Undeclared variable

undeclared variables do not exist until code assigning them is executed. Therefore, assigning a value to an undeclared variable implicitly creates it as a global variable when the assignment is executed. This means that, all undeclared variables are global variables.

declare and undeclared variable
declare and undeclared variable

It is recommended to always declare variables, regardless of whether they are in a function or global scope

Always declare variable

let:

#1: The let statement declares a block scope local variable, optionally initializing it to a value.

let x = 1;

if (x === 1) {
  let x = 2;

  console.log(x);
  // expected output: 2
}

console.log(x);
// expected output: 1

#2: let allows you to declare variables that are limited to the scope of a block statement, or expression on which it is used.

#3: Variables declared by let have their scope in the block for which they are defined, as well as in any contained sub-blocks.
In this way, let works very much like var. The main difference is that the scope of a var variable is the entire enclosing function.

let have their scope in the block for which they are defined, as well as in any contained sub-blocks

Scope of let
scope of var in a function
scope of var

#4: let does not create properties of the window object when declared globally (in the top-most scope).

var x = 'global';
let y = 'global';
console.log(this.x); // "global"
console.log(this.y); // undefined
let does not create a property on the global object

#5: Re-declaring the same variable within the same function or block scope raises a SyntaxError.

if (x) {
  let foo;
  let foo; // SyntaxError thrown.
}

const:

#1: Constants are block-scoped, much like variables defined using the let statement. The value of a constant can’t be changed through reassignment, and it can’t be re-declared.

const number = 42;
console.log(number);
// expected output: 42

Global constants do not become properties of the window object, unlike var variables.

Global const

#2: An initializer for a constant is required; that is, you must specify its value in the same statement in which it’s declared.

#3: The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned.

A constant cannot share its name with a function or a variable in the same scope.

name sharing

let and const cannot be used before they are declared

let and const

Variable Hoisting:

Variable declarations (and declarations in general) are processed before any code is executed, declaring a variable anywhere in the code is equivalent to declaring it at the top.
This also means that a variable can be used before it’s declared. This behavior is called “hoisting“.

Hoisting: the variable declaration is moved to the top of the function or global code.

Hoisting in java script
Hoisting example

The above piece of code understands by JavaScript like this.

var a;
console.log({a}); ​

function abc(){
   var b;
    console.log({b}); 
}
abc();

It’s important to point out that the hoisting will affect the variable declaration, but not its value’s initialization. The value will be indeed assigned when the assignment statement is reached:

hoisting will affect the variable declaration but not its value’s initialization

The hoisting will affect the variable declaration, but not its value’s initialization

Hoisting affect

What scope of var ?

A variable declare in function then it has function scope and if it is declare outside the function then it has global scope.

What is hoisting ?

u003cstrongu003eHoistingu003c/strongu003e: the variable declaration is moved to the top of the function or global code.

What is scope of let ?

Variables declared byu00a0u003cemu003eu003ccodeu003eletu003c/codeu003eu00a0have their scope in the block for which they are defined, as well as in any contained sub-blocksu003c/emu003e.

Is const is immutable?

Theu003cstrongu003eu00a0u003ccodeu003econstu003c/codeu003eu00a0declarationu003c/strongu003eu00a0creates a read-only reference to a value. It doesu00a0u003cstrongu003enotu003c/strongu003eu00a0mean the value it holds is immutable, just that the variable identifier cannot be reassigned.