How to Prevent Unexpected Variable Mutation in JavaScript
By: Rene Pot
Tags: Coding, Best Practices, Programming, JavaScript, Software Development

How to Prevent Unexpected Variable Mutation in JavaScript

Ever had the problem where suddenly a variable contained something you did not expect? There are easy ways to prevent that from ever happening again! Rene Pot Follow Mar 9 · 3 min read

So when you’re working with JavaScript you’ve got the flexibility to overwrite any variable with anything. This can be useful, but can also be a pain. This is also why a lot of JavaScript developers have switched to TypeScript. (There are many more benefits, but that’s for another day)

So take a look at the following code sample, what would you expect to happen. And what would you wish would happen?

var a = 'test';

[50 lines of code]

var a = 1;

console.log(a);

So, with the sample above, you might expect console.log to output “test” because that is what you assigned it. You probably forgot about the second declaration of the variable, and now you’re confused why the variable contained a number, and not the string test . This can be a problem.

Luckily IDE’s can help you find where you declare this variable, but the situation can be much more complex than this, and would require you to spend time debugging this problem.

So how can you prevent this from happening in the first place? Well, it is time to look into let and const as variable declarations.

The benefit of let over var

So first we’re going to be looking in the let statement. There are a few benefits of let over var which should lead to the point you will never be using var again. Let’s take a look at the same code sample as above, but change var with let .

let a = 'test';

[50 lines of code]

let a = 1;

console.log(a);

You might think, console.log will output 1 again, but guess again. This is what you now get when you run this code:

SyntaxError: Identifier 'a' has already been declared

What happens here, is let prevents you from re-declaring the same variable twice. This will already prevent you from accidentally overwriting anything you’ve already declared.

But, this does not prevent overwriting of the variable yet. Because, this is still possible:

let a = 'test';

[50 lines of code]

a = 1;

console.log(a);

Here we will still have an output of 1 and there will not be an error. This might be something you would expect of your code, in which case it is perfectly fine, but if the variable is supposed to remain the same you would want to prevent this.

So how do you prevent this? Well, it is time to look at const

The benefit of const over let

When looking at const you might already notice in the name it is supposed to be constant . And this is exactly what it is for. Anything you set in a const will remain the same. Take the same code again:

const a = 'test';

[50 lines of code]

a = 1;

console.log(a);

Then you’ll get this error:

TypeError: Assignment to constant variable.

This also happens if the second assignment is a string, and not a number has shown in our example.

This will fully protect you from ever overwriting the variable with something else. And let’s be honest here, how often do you actually need to overwrite a variable with a different value? Much less than you might think.

Conclusion

So whenever you’ve declared a variable that doesn’t need changing, ever, use const . If you design your code to have a changing variable, use let . A good example might be a for loop

for (let i = 0; i < 10; i++)

Or when you’re dealing with text manipulation like this

let text = "a.d.c";

text = text.replace('d','b');

console.log(text);

But in the example above you might already consider just keeping the original, and setting the new text in a new variable instead.

const originalText = "a.d.c";

const newText = originalText.replace('d','b');

console.log(newText);

Not only is there not really a downside of declaring a new variable (besides the few bytes of memory temporarily), it also makes the text much more readable.

But to sum it up, and to quote Evert Pot on his blog

Stop using var .

. Use const by default, everywhere.

by default, everywhere. Use let if you must

Further Reading