ES6 Variables, And Why You Might Want To Use Them.

Josh Pitzalis
Image credit to Clément Branger. Thank you Clément.

In javascript land, we use variables to store chunks of information. The chunk of information is not the variable, but rather the container the information goes into. You can think of the variable as a jar. If you pour different kinds of information in or out, the contents of a jar will change over the course of a program, but the jar always remains the same.

There are three basic types of information you can pour into a jar. You can have a string of letters, a number or a true or false value, called a boolean. If you don’t put anything into a jar, its contents will either be null or undefined. There are subtle differences between the two but they both mean the jar is empty.

If you ever need to know what kind of information is inside a jar, then you can use the typeof operator. typeof will return one of the bolded descriptions in the paragraph above. Jars can also point to a function and an array or an object. Arrays and objects are both called ‘object’ when you use typeof.

Every now and then Javascript gets an upgrade. In 2015, a bunch of improvements were introduced and along with them came two new kinds of variables. Javascript's is actually ECMAScript (for the European Computer Manufacturer's Association) so the latest version of the language is called ES2015 (but everyone just calls it ES6, because it is the 6th update).

The first new variable is called a ‘Constant’. You can define a constant with the word const (instead of var). A constant's superpower is that once it has been defined it can never be reassigned.

One of the the problems with using 'var' is that you often define a variable, completely forget about it, and then define a new variable with the same name and you reassign the original one. In larger programs with lots of people working together it gets hard to keep track of this. Using 'const' solves this problem by not letting you reassign an existing variable.

Sometimes you will need a variable that can be updated. This is where the 'let' variable comes in. Using the word let will define a variable and then let you reassign it as much as you want.

If vars are jars then 'let' is shaped much like a water jug. It’s specifically designed to be easy to pour things in and out of. The 'const’ jar is shaped more like a jam jar. Jam jars are easy to pour things into once, but then you close the lid and they are more for storing than pouring.

A good way to start using the new variables is to just use 'const' for everything. If you try and re-assign a constant it will warn you in the console. If the reassignment is deliberate then switch the variable to 'let'.

So ‘let’ is basically the same as ‘var’ then?

Almost.

There is one more benefit to using the new ES6 variables and it has to do with how they are scoped.

The scope of a variable just means where the variable becomes available.

‘Var’ variables are function scoped. This means they are only available inside the function they were created in. If they are not created inside a function then they are available everywhere.

That sounds more complicated than it needs to. It‘s easier to explain with an example.

function hello() {
var greeting = 'sup?';
console.log(greeting);
}
hello();

I created a function, declared a variable inside it, logged the variable to the console, and then called the function.

If you copy the code above into your console, it should say ‘sup?’ because the variable was created inside the function and then called logged inside the function where it exists.

If we try and log the variable outside of the function…

function hello() {
var greeting = 'sup?';
}
hello();console.log(greeting);

…it will say the variable is not defined.

This is because the variable does not exist outside of the function it was created in. This is what people mean when they say that ‘var’ variables are function scoped.

Function scoping can sometimes be a problem.

var count = 10;if (count > 5) {
var double = count * 2;
}
console.log(double);

Copy the above code into your console and it should log 20.

The ‘double’ variable was created inside of the ‘if statement’ as a temporary variable so that we could log the result. It has no business being outside of the ‘if statement’.

If we try and console.log(double) it will still return 20. It shouldn’t be available but it is because technically an ‘if statement’ is not a function.

This is a problem because now we have a variable that has leaked into our program and is available everywhere. It might cause problems in the future, especially if we create other variables with the same name and then it starts overwriting them.

ES6 variable are block scoped. This means they are only available inside a block of curly braces. In the example above, the ‘if statement’ has an opening curly brace on line 3 and a closing one on the last line.

var count = 10;if (count > 5) {
let double = count * 2;
}
console.log(double);

If you refresh your browser and copy the code above into your console it will still return 20, but if you try and log ‘double’ it will say that ‘double is not defined’. This is ideal because we don’t want temporary variables lying around the place.

This what people mean when they say ES6 variables are block scoped. Both ‘const’ and ‘let’ are block scoped.

So ‘let’ is basically the same as ‘var’ then except that the ‘let’ jar doesn’t leak unwanted variables into your code.

References


If you’d like to be notified when I write a new article please enter your email here.


If you liked the article, click the 💚 below so other people will see it on Medium.

Josh Pitzalis

Written by

A web designer who likes to work with microbusinesses: www.joshpitzalis.com

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