Posted inJavascript

Javascript – var, let and const (ES6)

26 August 20241 Comment

In this tutorial we will understand some of the features of var, let and const in ES6:

var, let and const

  • var declarations are function scoped and supports hoisting
  • let declarations are block scoped
  • const declarations are block scoped

When to use Var, let and const ?

There is no as such rule stating where to use each of them, Everyone has different opinions. But according to the properties of these three, it should be used as follows.

  • Use var for top-level variables that are shared across many (especially larger) scopes.
  • Use let for localized variables in smaller scopes.
  • Use const for, if there is no need to re-assign any variable like const PI = 3.14; .

Let’s now deep dive to understand var, let and const better

var

Var are function scoped, which means they are still accessible outside the block scope even though we have declared them inside it.

// for loop is block scoped
for (var i = 0; i < 10; i++) {
    var iAmInside = "I am available outside of the loop";
}

console.log(iAmInside);
// I am available outside of the loop

// block scope
if (true) {
    var inside = "Inside";
}
console.log(inside);
// Inside

// Function scoped
function myFunc() {
    var functionScoped = "I am available inside this function";
  console.log(functionScoped);
}
myFunc();
// I am available inside this function
console.log(functionScoped);
// ReferenceError: functionScoped is not defined
Javascript

This happens because of Hoisting.
Var are treated as if they are at the top of the function (or global scope) regardless of where the actual declaration occurs, this is called hoisting

var inside; // hoisted on the top of the function. As there is no function so it is present in the global scope.

// block scope 
if (true) {
    var inside = "Inside";
}
console.log(inside);
// Inside

// Function scoped. In this case value is hoisted inside the function
function getValue(condition) {
    if (condition) {
        var value = "blue";
        return value;
    } else {
        // value exists here with a value of undefined
        return value;
    }
    // value exists here with a value of undefined
}

console.log(getValue(true)); // blue
console.log(getValue(false)); // undefined

// while execution it is hoisted like this internally
function getValue (condition) {
    var value; // value is hoisted as there is no value attached, so it is undefined

    if (condition) {
        var value = "blue";
        return value;
    } else {
        // value exists here with a value of undefined
        return value;
    }

    // value exists here with a value of undefined.
}

console.log(getValue(true)); // blue
console.log(getValue(false)); // undefined
Javascript

Reassigning works in var 👍

var A = 10;
A = 15; // works
A = “Hello” // works
console.log(‘A’, A)
JavaScript

Redeclaring works in var 👍

var A = 10;
var A = "Hello"; // works

let

Let are declared same as var but it limits the variable scope to the given block. That is why we should declare let at the top of the block so that is accessible throughout the block and its sub-blocks.

 function getValue(condition) {
        if (condition) {
            let value = "blue"; // accessible inside the given scope only
            return value;
        }   else {
            // value does not exists here 
            return value;
        }
        // value does not exists here
 }

console.log(getValue(true)); // blue
console.log(getValue(false)); // ReferenceError: value is not defined

let x = 10;
if (x == 10) {
    let x = 11;
    console.log(x);  // 11  value of x inside if block
}
console.log(x); // 10   value of x global
Javascript

Reassigning works in let 👍

let A = 10;
A = 15; // works
A = "Hello"; // works
Javascript

Redeclaration’s does not work in let 👎

But Redeclaring works only in different scope

Suppose, Redeclared in Same Scope , let won’t work 👎

    let A = 10;
  let A = 15; // error can-not be redeclared as A is already defined
Javascript

Suppose, Redeclared in Different Scope , let will work 👍

let A = 10;
if (true){
    let A = "test"; // works without error as scope is different 
    console.log('A', A) // test
}
console.log('A', A); // 10
JavaScript

const

Just Like let , const is also block scoped. But it differs from the fact that their variable cannot be redeclared or change by reassigning the value. The value remains Constant.

const abc = "XYZ";
let abc; // SyntaxError: Identifier 'abc' has already been declared
abc = "pqr";  // Typeerror: Assignment to constant variable
JavaScript

A variable declared using ‘const’ cannot be redefined or re-declared within its scope. 👎

Every const declaration must be initialised at the time of declaration.

// Should be initialized while declaring
const XYZ;  // SyntaxError: Missing Initializer in a const declaration
JavaScript

Const is block scoped.

if (true) {
    const a = "I am inside";
    console.log(a); // I am inside
}
console.log(a);   // ReferenceError : a is not defined
JavaScript

However, the value a constant holds may be modified if it is an object:

const person = {
    name: 'Sujay',
    age: 25,
}

person.age = 26;
console.log(person.age); // 26
JavaScript

Const declarations for objects do not prevent modification of those objects. A const declaration prevents modification of the binding and not of the value of the binding.

But this will result in error.

const person = {
    name: 'Sujay',
    age: 25, 
}
person = 26;
console.log(person); // TypeError: Assignment to constant variable.

Reassigning does not work with const 👎

const x = 10;
console.log(x); //prints 10
x = 11; // error: Assignment to constant variable.
const y;
y = 2; //error

Redeclaration also does not work with const 👎

const z = 12;
console.log(z) //prints 12
const z = 13; // error: Identifier ‘z’ has already been declared
const userName = 'Max';
userName = 'MaxMillan'; //  will throw error
Tags:

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *