Defining JavaScript Variables in ES6

let vs. const vs. var

ES6 introduced let and const as alternatives to the original var for defining variables. Let’s dive into the differences between the three.


Scope

Variables defined using var are function scoped. Basically, this means that they can be used within the function that they are defined. If they are not defined in a function, they have global scope. A more detailed explanation can be found here.

Variables defined with let or const are block scoped. A block can simply be defined as anything surrounded by curly brackets {}. This includes functions, but it also includes if statements and for loops, for example. Again, more details here.

Re-declaration

If you declare a variable using let or const and then redeclare it, you’ll get an error. For example:

let animal = 'dog';
let animal = 'cat';

VM148:1 Uncaught SyntaxError: Identifier 'animal' has already been declared

This protection can be very helpful to prevent bugs. Variables declared using var don’t have this feature. You can re-declare as you please… at your own risk.

Declaring in Different Scopes

Here is where it gets a bit tricky. When you declare a variable with var , then re-declare it inside of an if or for block, it is as if you updated the same variable. If you do the same with let or const, you are actually creating a new variable in memory. Consider the following:

let num = 15;
let doubleDigits = false;
if (num >= 10) {
let doubleDigits = true;
};
console.log(doubleDigits);
// false

Let’s do the same with var.

var num = 15;
var doubleDigits = false;
if (num >= 10) {
var doubleDigits = true;
};
console.log(doubleDigits);
// true

Notice that because var is function scoped and the if block is not a function, the variable is in the same scope whether inside or outside of the if statement. Re-declaring the variable using var in this case is essentially updating the same variable.

On the other hand, re-declaring with let creates a new variable in memory that is only accessible within the block (in this case, the if statement). This applies to const as well.

Reassigning

Reassigning a let variable works the same way as var.

let animal = 'monkey';
animal = 'duck';
console.log(animal);
// duck

With const this is not the case.

const animal = 'monkey';
animal = 'duck';
console.log(animal);
// VM685:1 Uncaught TypeError: Assignment to constant variable.

This makes const useful when creating something like a specific key that isn’t meant to be changed.

And now, the most common misconception of const . People often think that const variables are immutable, meaning they can’t change at all. This is not the case. The truth is that const variables cannot be reassigned entirely. But if your const is an object or array, these properties can be changed.

const ids = [5, 7, 9, 11]
ids.push(13)
console.log(ids)
// [5, 7, 9, 11, 13]

Of course, if you tried to totally reassign ids like this: ids = { hello: "world" }, you would get the “assignment to constant variable” error.

When working in ES6, is there ever a time when var is the best choice?

Check out the first answer here for a detailed answer with an example. Spoiler: the answer is no. let and const were created to replace var.

Hope that helps!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.