Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript

What are variables and their scoping in Javascript?

Amaaz Ahmad

A variable is similar to a named box in the memory, where the programmer can store a value and later access it to read or manipulate it.

Javascript offers different methods to create variables. These methods are differentiated by the keywords that are used to declare the variable. These keywords are:

  • let
  • var
  • const

The primary difference in variables declared by each of these keywords is the scope of the variable. The scope of the variable determines the blocks of code in which the variable will be accessible.

A block is a piece of code written within the curly braces, i.e. {}

Each of the above-stated keywords is explained in detail below.

The let keyword

The variables declared using the let keyword are block-scoped, i.e., these variables are only accessible within all the child blocks and the block in which they are declared

Once a variable is declared using the let keyword, it can be read or updated but not declared again.

Example

The following snippet of code shows the declaration variables using the let keyword and their scopes.

The variable x is declared in the main scope, and it is accessible within the child block of the if statement.

On the other hand, the variable y is declared inside the block of the if statement. Hence its scope is limited. It is not accessible outside the block of the if statement. That is why the compiler produces an error when we try to print the value of y outside the if statement block.

let x = 5;

if(x == 5) {
  let y = 10;
  console.log("Value of X inside the IF block: ", x);
  console.log("Value of Y inside the IF block: ", y);
}

console.log("Value of X outside the IF block: ", x);
console.log("Value of Y outside the IF block: ", y);

The var keyword

The variables declared using the var keyword are function-scoped. These variables are accessible within the function in which declared, even if they are declared in the child block of another statement like if, for or while etc. These variables are also accessible

Once a variable is declared using the var keyword, it can be read, updated and re-declared using the same variable name.

Example

The following snippet of code shows the usage of variables declared by the var keyword.

The variable x is declared in the body of the function named func using the var keyword. Hence, it will be accessible in the entire body of the function.

The variable y is declared, and then re-declared, inside the scope of the if statement, yet it is accessible outside the block of the if statement. This is because y has been declared using the var keyword which makes it accessible throughout the function even if it is declared in the child block of the function.

function func()
{
    var x = 5;

    if (x == 5){
        var y = 15;
        var y = 10;
        console.log("Value of X inside the IF block: ", x);
        console.log("Value of Y inside the IF block: ", y);
    }
    
    console.log("Value of X outside the IF block: ", x);
    console.log("Value of Y outside the IF block: ", y);
}

func();

The const keyword

The const keyword is used to declare constants. These are the type of variables whose values can not be changed.

The variables declared using the const keyword are block-scoped i.e. these variables are only accessible within the block in which they are declared and all the child blocks.

Unlike var and let, the variables declared with the const keyword must be initialised while declaration. Once a variable is declared using the const keyword, it can be read but not updated or re-declared.

Example

The following snippet of code shows the usage of variables declared using the const keyword.

The variable x is declared using the const keyword, hence it is accessible within its child blocks but not changeable. Therefore, if we uncomment line 5, the compiler will produce an error.

The constant y is declared inside the if statement block, hence it is not accessible outside that block. Therefore, the compiler generates an error when we try to read its value outside the if block.

const x = 5;

if(x == 5)
{
    // x = 10;
    const y = 10;
    console.log("Value of X inside the IF block: ", x);
    console.log("Value of Y inside the IF block: ", y);
}

console.log("Value of X outside the IF block: ", x);
console.log("Value of Y outside the IF block: ", y);

Summary

The following table summarizes the difference between the let, var and const keywords:

Keyword

Scope

Can be changed

Re-declaration

Initialization with declaration

let

block-scoped

yes

not allowed

not required

var

function-scoped

yes

allowed

not required

const

block-scoped

no

not allowed

required

RELATED TAGS

javascript

CONTRIBUTOR

Amaaz Ahmad
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring