Loading Now
×

Variable Declaration with `let` and `const` in JavaScript

Variable Declaration with `let` and `const` in JavaScript

In JavaScript, traditionally, all types of data were declared using the `var` keyword. Due to its high-level nature, you don’t need to specify whether the data type is an integer, character, or string; JavaScript determines it automatically. By using `var`, you can declare variables without hassle.

However, ES6 introduced two new keywords: `let` and `const`. These keywords do not have any relationship with data types, just like `var`. You can use them to declare any type of data. The main difference lies in their behaviour.

Firstly, `let` is somewhat similar to `var`. However, `const` is a bit different. For instance, you can declare a variable with `var` and change its value later, which is also fully possible with `let`.

#### ES5 Variable Declaration with `var` and Changing Value

“`javascript

var a = ‘Zonayed Ahmed’;

console.log(‘My name is: ‘ + a);

a = ‘Zawad Ahmed’;

console.log(‘Now the name is: ‘ + a);

“`

**Output:**

“`

My name is: Zonayed Ahmed

Now the name is: Zawad Ahmed

“`

#### The Same Operation with `let`

“`javascript

let a6 = ‘Zonayed Ahmed’;

console.log(‘My name is: ‘ + a6);

a6 = ‘Zawad Ahmed’;

console.log(‘Now the name is: ‘ + a6);

“`

**Output:**

“`

My name is: Zonayed Ahmed

Now the name is: Zawad Ahmed

“`

#### `const` is Different

Once you declare something with `const`, you cannot change its value. Trying to do so will result in an error. Here’s the same example using `const`:

“`javascript

const b6 = ‘Zonayed Ahmed’;

console.log(‘My name is: ‘ + b6);

b6 = ‘Zawad Ahmed’; // This line will cause an error

console.log(‘Now the name is: ‘ + b6);

“`

**Output:**

“`

My name is: Zonayed Ahmed

Uncaught TypeError: Assignment to constant variable.

“`

This means you cannot use assignment with variables declared with `const`.

### Redeclaration of Variables

With `var`, you can redeclare a variable as many times as you want. But with `let` and `const`, you cannot redeclare a variable.

“`javascript

const b6 = ‘Want to declare again’; // Error

let b6 = ‘Want to declare again using let’; // Error

var b6 = ‘Want to declare again using var’; // Error

“`

**Errors:**

“`

Uncaught SyntaxError: Identifier ‘b6’ has already been declared

“`

### Scope Difference

`var` maintains function scope, while `let` and `const` maintain block scope.

#### Example with `var`:

“`javascript

function es5var() {

    if (true) {

        var a = 5;

    }

    console.log(‘Value: ‘ + a);

}

es5var();

“`

**Output:**

“`

Value: 5

“`

#### Example with `let`:

“`javascript

function es6var() {

    if (true) {

        let a = 6;

    }

    console.log(‘Value: ‘ + a); // Error

}

es6var();

“`

**Output:**

“`

Uncaught ReferenceError: a is not defined

“`

The same applies to `const`. Variables declared inside an `if` block are only accessible within that block.

### Hoisting

Variables declared with `var` can be used before they are declared due to hoisting:

“`javascript

console.log(aVar); // undefined

var aVar = ‘I am defined here’;

“`

**Output:**

“`

undefined

“`

But with `let` or `const`, accessing the variable before declaration will result in an error due to the Temporal Dead Zone:

“`javascript

console.log(varWith6); // Error

const varWith6 = ‘I am defined here’;

“`

**Output:**

“`

Uncaught ReferenceError: varWith6 is not defined

“`

### Example Program with `var` and `let`:

#### Using `var`:

“`javascript

var i = 13;

for (var i = 0; i < 5; i++) {

    console.log(i);

}

console.log(‘Value: ‘ + i);

“`

**Output:**

“`

0

1

2

3

4

Value: 5

“`

#### Using `let`:

“`javascript

let i = 13;

for (let i = 0; i < 5; i++) {

    console.log(i);

}

console.log(‘Value: ‘ + i);

“`

**Output:**

“`

0

1

2

3

4

Value: 13

“`

In this case, the `let` keyword ensures that the loop variable `i` is scoped within the loop block, whereas `var` does not.

### Precaution While Practising with `let` and `const`

While practising with `let` and `const` in the console, if you declare a variable with the same name more than once, you’ll encounter an error. To avoid this, use different variable names, reload the browser, or restart your Node.js REPL session.

By understanding these differences, you can make better use of `let` and `const` in your JavaScript programming.

Post Comment