April 2020

JavaScript ES6: const and let

In JavaScript ES6, const and let are introduced as replacements for var. A lot of the other ES6 features help us write much less code but this time, that’s not the case. Replacing var with const/let is all about increasing clarity in your code and by the end of this article, I’m hoping I will have convinced you to never use var again!

What are const and let

  • Const is the keyword used to declare a variable where we expect that the value will never change.
  • Let is the keyword used to declare a variable where we expect that the value will change at some point in the future.

So let’s have a look at an example. In the ES5 code below we have a few variables describing a person where we would use var to declare all the variables.

// ES5
var name = 'Billy';
var dob = '01/01/1990';
var age = 30;
var occupation = 'Web Developer';

In JavaScript ES6, whenever you write a variable you are going to ask yourself “Will this variable ever need to be changed at some point in the future?”.

For our first variable, name, we’d expect that it is extremely unlikely that someone’s name will change. Since we expect the value for name will never change, we would use const instead of var.

For the dob variable, the person’s date of birth will never change so we’ll use const again.

For age, we can see that Billy is currently 30 years old and we know that next year Billy will be 31. Since we expect the age variable to change we’ll use let.

Billy’s current occupation is a Web Developer. If Billy stays at his current place of employment we’d hope Billy will eventually be promoted to a Senior Web Developer. So since we expect Billy’s occupation to be updated at some point in the future, we’ll use let

// ES6
const name = 'Billy'; // Billy will always be called Billy
const dob = '01/01/1990'; // Billy will always be born January 1st, 1990
let age = 30; // Billy will increase in age every year
let occupation = 'Web Developer'; // Billy will be promoted to Senior Web Developer

// A few years later…
// We don’t need to use ‘let’ again once the variable has been declared
age = 34;
occupation = 'Senior Web Developer';

From the code above, we can see that let acts very similar to var as it can be changed over time. However, once a variable has been declared with const we’ll be thrown an error is we try to update that variable.

Why bother using const/let

The use of const and let is a quality of life improvement to your codebase. 

It will let future you and other developers to be able to quickly glance at variables and instantly be able to know if those variables will be updated later in the code or will always be the same.

This is particularly important in large JavaScript applications where there are variables being declared all over the place. Instead of hunting down to see if a variable gets used again, you can quickly check if it’s declared using let or const.

Using const can help prevent bugs. In our large JavaScript application, if we have a variable that, if updated, would cause some really weird bugs to occur then we can declare that variable using const. In the future, if someone tried to update that variable they would get an error letting the developer know that they shouldn’t update it!

Continue Reading

  • March 2020

    Friday wins Gold for Best Small Agency at the 2020 DMA Awards

    We are delighted to announce that Friday has been awarded Best Small Agency (15 or fewer employees) at the 2020 DMA Awards in Dublin.

  • May 2020

    JavaScript ES6: The Basics of Classes

    In this article, you’ll see how messy and complex it is to set up prototypal inheritance in ES5 and how you can use JavaScript ES6 Classes to make understanding and implementing inheritance much easier!

  • October 2021

    CodePen Challenge: Terrible Text Fields

    Be wary, a tormented ghost has possessed the text field in this CodePen. Type into the text field, if you dare, and experience the spirit's wrath!

  • April 2020

    JavaScript ES6: The map() Helper

    The map() helper is used when we want to modify a list of data. When map() is finished running, it creates and populates a new array with the results. Let's see how it works!

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now