let, var, and const: Differences & Examples in JS

In JavaScript, let, var, and const are used to declare variables to store values or data. These three keywords have different behaviours and usage, and it's important to understand them to write correct and efficient code.

var

The var keyword is used for variable declaration in JavaScript, and it has function-level scope, meaning that the variable can be accessed within the entire function, even if it is declared inside a block. However, if it is declared outside of any function, it becomes a global variable and can be accessed throughout the entire program.

Example:

 function testVar() {

    var a = 10;

    if (true) {

        var a = 20;

        console.log(a); // Output: 20

    }

    console.log(a); // Output: 20

 }

In this example, the variable a is declared inside the testVar function with the var keyword. It is then declared again inside the if block, which should create a new variable with a different scope, but because var has function-level scope, the second declaration overrides the first one. Thus, both console.log statements output 20.

Valid cases:

1. Use var to declare global variables or function-scoped variables that need to be accessible throughout the function.

2. Use var to declare variables in legacy code or in specific situations where the behaviour of var is required.

Not valid cases:

1. Avoid using var for block-scoped variables, as it can lead to unexpected behavior.

Example:

 if (true) {

    console.log(a); // Error: Cannot access 'a' before initialization

    var a = 10;

 }

2. Avoid redeclaring the same variable with var in the same scope, as it can lead to variable shadowing and unexpected changes in variable values.

Example:

 function testVar() {

    var a = 10;

    if (true) {

        var a = 20;

    }

    var a = 30; // Error: Identifier 'a' has already been declared

 }

In this example, the same variable ‘a’ is declared three times in the same scope, which leads to an error. This is not a valid case for using the var keyword.

let

The let keyword is used to declare block-scoped variables. It was introduced in ES6 and is preferred over var in modern JavaScript code. The variable declared with let is accessible only within the block in which it is defined.

Example:

 function testLet() {

    let a = 10;

    if (true) {

        let a = 20;

        console.log(a); // Output: 20

    }

    console.log(a); // Output: 10

 }

In this example, the variable a is declared with let inside the testLet function. The variable is also declared inside the if block, but because let has block-level scope, the two variables are distinct and do not affect each other.

Valid cases:

1. Use let to declare variables that are only needed within a block or a function scope.

Example:

 function testLet() {

    let a = 10;

    if (true) {

        console.log(a); // Output: 10

    }

    console.log(a); // Error: a is not defined

}

In this example, let is used to declare a variable inside a block, but the variable is not accessible outside the block. 

2. Use let to avoid variable shadowing and unexpected changes in variable values.

Not valid cases:

1. Avoid using let to declare global variables, as it can lead to unexpected behaviour.

2. Avoid using let to declare variables that need to be accessed throughout the entire function or program, as it has block-level scope.

Example:

 let a = 10;

 let a = 20; // Error: Identifier 'a' has already been declared

In this example, the same variable ‘a’ is declared twice in the same scope, which leads to an error. This is not a valid case for using the let keyword.

const

The const keyword is used to declare constant variables that cannot be reassigned a new value. Like let, it has block-level scope.

Example:

 function testConst() {

    const a = 10;

    if (true) {

        const a = 20;

        console.log(a); // Output: 20

    }

    console.log(a); // Output: 10

 }

In this example, the variable a is declared with const inside the testConst function. The variable is also declared inside the if block, but because const variables cannot be reassigned, the second declaration creates a new variable that does not affect the first one.

Valid cases:

1. Use const to declare variables that should not be reassigned a new value, such as constants or values that should remain consistent throughout the program.

2. Use const to declare variables with block-level scope.

Not valid cases:

1. Avoid using const to declare variables that need to be reassigned a new value, as it will result in a TypeError.

Example: 

 const a = 10;

 a = 20; // Error: Assignment to constant variable

In this example, const is used to declare a variable that is then reassigned a new value, which is not allowed. This leads to an error and is not a valid case for using the const keyword.

2. Avoid using const to declare variables that need to be initialised with a value later, as it requires a value to be assigned during declaration.

Example:

 const a; // Error: Missing initializer in const declaration

 a = 10;

In this example, const is used to declare a variable without initialising it with a value. Const requires a value to be assigned during declaration, so this leads to an error.

Conclusion

In conclusion, var, let, and const are keywords used to declare variables in JavaScript. Var has function-level scope and can be redeclared and reassigned, while let and const have block-level scope and cannot be redeclared but can be reassigned. Const requires a value to be assigned during declaration and cannot be reassigned later. It's important to choose the right keyword based on the scope and mutability requirements of the variable to avoid errors and ensure proper functionality.