JavaScript Variables: Comparing const vs. let

In this article, we are going to compare two key JavaScript variable types — const and let. While they share many similarities, they also have important differences that can help make your code more predictive. If you want to enhance your front-end skills, understanding these differences is essential.

Const Variables

The key feature of variables declared with the const keyword is that their values can't be changed. If you need a value to stay the same throughout the execution of your code, it is recommended to use a const variable.

Adding Primitive Values to Const Variables

In the following example, we will assign a string value to the constant ime. But the next line of code shows what happens if we try to change that value:

const ime = "Milos";
ime = "Milan"; // Error: Assignment to constant variable.

The console warns us that this action is not possible because we are trying to assign a new value to a constant variable.

The same behavior occurs when we try to assign a different primitive data type. For example, we can assign a number to the const variable broj and then attempt to change it in the next line of code:

const broj = 10; 
broj = 12;  // Error: Assignment to constant variable.

Same behaviour again. JavaScript doesn’t allow this action above either.

Adding Complex Values to Const Variables

Many people get confused when complex data types, such as JS objects or arrays, are assigned to const variables. In this case, we CAN modify their attributes, values, or elements, but CAN’T change their references. What does this mean? Check out the code examples below:

const niz = [1, 2, 3];
niz.push(4);  // [1, 2, 3, 4]

We have an array with three elements assigned to the niz const variable. As you can see, we have successfully pushed the number 4 to the end of the array since the const variable accepts this behaviour.

The same applies to objects. Even though we assign an object to the constant, we can still change its attributes and values:

const person = {
    firstName: "Milos",
    years: 10
}

person.firstName = "Marko";

/*****
Output:
{
  firstName: "Marko", 
  years: 10
}
*****/

Or we can add a new value to the same object:

person.lastName = "Markovic";

/*****
Output:
{
  firstName: "Marko", 
  years: 10, 
  lastName: "Markovic"
}
******/

What Can't We do With Constants?

Once we assign an object or array to a constant, we can’t assign it again. After their initialization, they occupy a memory address, and every attempt to assign a new object or array to that variable will result in an error.

Let’s see that on the example below:

const niz = [1, 2, 3];
niz = [2, 3, 4]; // Error: Assignment to constant variable.

We assigned the array to the constant niz. Assigning the new array to the constant is not possible since it occupies a new memory location.

We can even try to assign an object with the same attributes and values, but JavaScript still won’t allow it because, technically, it’s not the same object. It might look identical to us, but in memory, two separate locations are reserved for those objects.

const person = {
    firstName: "Milos",
    years: 10
}

// Trying to add a new object with the same attributes and values:
person = {
    firstName: "Milos",
    years: 10
} // Error: Assignment to constant variable.

Let Variables

Let variables are more flexible compared to const variables. They allow you to change their values throughout the code, giving you much more freedom. However, you should be careful because you can unintentionally change some part of your code that should stay the same.

let student = {
    firstName: "Marko", 
    lastName: "Markovic"
}

student = [1,2,3]; // [1,2,3]

In the code above, we can see its flexibility in action. We have assigned an object to the student variable. Since student variable is declared using the let keyword, nothing is stopping us from changing its value to an array!

Here are more data manipulations to help you realize how flexible the let variables are:

let broj = 7; 
broj = 6; // 6

broj + 3; // 9

let name = "Marko";
name = "Milos"; // Milos

let isStudent = false;
isStudent = true; // True

Conclusion

When comparing const and let variables, the differences are not enormous, but they are important. It is up to you to decide whether a variable’s value should stay the same or be allowed to change during code execution. Some developers prefer to always use const to “freeze” values and reduce the risk of unexpected bugs.