ES6: An Idiots Guide to let and const

Mentally Friendly

By Wayne Dunkley (Front-end Web Developer)

One of the first things you will undoubtably come across when looking at new code introduced with ES6 are two new keywords let and const. These are variable declaration keywords just like var, but with some simple and very useful differences. As a developer you would have been using var for years and will be familiar with its simple declarative behaviour. Being able to define variables with global or function level scope and having great flexibility re-assigning or changing variable values. let and const have been introduced to give more meaning to variables and offer specific functionality for each use case in which a variable is declared.

First, We Must Understand Scope

To understand the use cases for let and const, you need to understand the three different levels of scope which var, let and const deal with. These are global level scope, function level scope and block level scope.

A variable with global level scope is accessible from anywhere within the script from which it was created. It is declared at the the top most level and is accessible from within child scopes such as functions or statements.

Function level scope is limited to within the function from which is was declared and any child scopes such as nested functions or statements. Variables with function level scope are not accessible outside the function they were declared.

Block level scope is limited further to the statement or expression of which the variable was declared. Or in simple terms, anywhere between an opening and closing curly brace {}.

var one = 1; //Declared at global levelfunction doSomething(){
var two = 2; //Declared at function level
if( true ){
var three = 3; //Declared at block level
}
}
if( true ){
var four = 4; //Also declared at block level
}

The let Keyword

The var keyword can declare variables at a global or function level scope but cannot give block level scope. This is where let comes in. All variables declared with let have block level scope, limiting its scope to the statement or expression from within which it is declared.

As you can see in the following example, because let is limited to block level scope (between the curly braces) it cannot re-assign the ‘two’ variable from within the if statement. This is because it has no visibility over the variable that was created outside of the current statement.

var one = 1;
let two = 2;
if( one === 1 ){
var one = 10;
let two = 20;
console.log(one);
console.log(two);
}
console.log(one);
console.log(two);
------ Console Output ------10
20
10
2

The same principle is applied when trying to use a let variable outside of the block level scope from within which it was declared.

if( true ){
var one = 1;
let two = 2;
}
console.log(one);
console.log(two);
------ Console Output ------1
Uncaught ReferenceError: two is not defined

The const Keyword

Functionally const is similar to let and var in that it declares variables. It is also just like let in that it has block level scope that can be global or local to the function in which it is declared.

The const keyword does however have two major characteristics that gives it its own purpose. const was designed to be used to declare ‘constant’ variables that have a certain level of protection from being modified. Once a variable has been declared using const it cannot be re-declared or re-assigned. However, do not neglect to pay close attention to the wording here “it cannot be re-declared or re-assigned”.

Although a const variable is protected from having its identifier re-assigned it does not mean the variable itself its immutable. Its contents, of which are not directly assigned to the variable name, can be modified. Consider the following example.

// Declare a person Variable
const person = "John";
//Attempt to re-declare person
person = "Dave";
------ Console Output ------Uncaught TypeError: Assignment to constant variable.

Using the const keyword we assign the string “John” to variable to the identifier ‘person’. Attempting to re-assign the variable with a new value, “Dave” will cause a TypeError in Google Chrome, this is because the variables value is protected and cannot be re-assigned.

But if we were to put the the name “John” into an Object and then assign the Object to the ‘person’ variable we could update or change the contents of that Object. This is because the Objects keys and values are not protected. The same principles are also true for Arrays.

// Declare a person Object 
const person = {
name: "John",
age: 25
};
// Attempt to add a new key by re-assigning the Object,
// will cause a TypeError and not update the variable
person = {
name: "Dave",
age: 25,
occupation: "Builder"
};
console.log(person);// Object keys are not protected
person.name = "Dave";
person.occupation = "Builder";
console.log(person);------ Console Output ------Uncaught TypeError: Assignment to constant variable.Object{name: "John", age: 25}Object{name: "Dave", age: 25, occupation: "Builder"}

This leads to the second difference of which is a direct off-shoot of the first. Because a const variable cannot be reassigned once initialised, it must be declared with an initial value.

Hopefully this guide to ES6's let and const variables has helped you to understand the differences and the different use cases for each. If you have any comments or feedback please provide these in the comments below to help this guide become more useful to others.

Mentally Friendly

Written by

Designing for wellbeing outcomes across products, teams and policy.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade