Variable declaration in JavaScript: let and const explained

In this tutorial, we will deal with the various methods of variable declaration in JavaScript, particularly the keywords let and const of the ES6 standard compared to var, which was the only way to create variables up to ES5. Many developers have encountered unexpected behaviors while using var that led to bugs. This lesson will help you understand the modern methods and ensure that you declare and use variables effectively.

Key findings

The new variable declarations let and const offer advantages regarding scope, visibility, and safety of variable usage. let allows the use of a variable within a block scope, while const creates an immutable assignment.

Step-by-Step Guide

Declaring Variables

To work effectively with variables in JavaScript, we will first examine the declaration of variables using var, let, and const. Let’s start with the file main.js, which is included in your HTML document.

Here we will use the keyword var to declare a variable. Let’s create a variable named W and assign an initial value.

Behavior of var

A typical behavior of var is that the variable is visible even when you initialize it later in the code. Let’s test this:

I will add a console output of C before the initialization. Expect the result when I set the variable C to 0. In the output, undefined should appear, as the value is only set after the line of the assignment.

Introducing let

Now let's look at let. To show the difference, replace var with let and initialize the variable C like this: let C = 0.

If I try to use C before the assignment, I will get an error message that I am accessing an uninitialized variable. This behavior ensures that you always get an error if you try to access an undefined variable.

Block Scope with let

Another advantage of let is the ability to declare a variable within a block scope. Let’s use an if statement for this:

If I create let C = -1 within the if block, this variable is only visible within that block scope. If I try to use C outside the block, I will get an error.

Using const

The next step is using const. If I used const instead of let, I would create a constant variable that cannot be changed.

If I try to reassign C after the assignment const C = 0, I will be told that I cannot assign a new value to a constant variable.

Immutable Objects with const

When we use const to declare an object, the object itself can still be changed, but not the reference. I can add items to the object without further issues.

Best Practices for Using let and const

Based on my experience, I recommend using const by default unless you are sure that the value of the variable needs to change later. This practice leads to more readable and maintainable code.

Use let when it is necessary to change the value within a block scope. An example could be a counter variable in a loop.

Summary – Variable Declaration in JavaScript: let and const versus var

In summary, we have examined the differences between var, let, and const. let and const offer significant improvements in terms of scope as well as variable safety. While var is either globally or functionally scoped, let and const ensure visibility within a block scope. Additionally, const ensures the immutability of the assignment, reducing bugs and unexpected behavior in the code.