Declaring variables in ECMAScript 2015

ES2015 (ES6) is an alias for the latest version of the JavaScript programming language. Just like any other programming language JavaScript also has versions. Most of the JavaScript that we see out there today has been written using ES5 or ES5.1. (Or even ES3)

ES stands for ECMAScript and it refers to a specification that is being standardized by Ecma International, which is a standards organisation. They are actually responsible for creating and maintaining other standards as well – for example the JSON standard.

The latest, official, fully released version of JavaScript at the time of writing is ES2015 which has some great addition to the language.

Using var

The way you have defined variables in JavaScript for the past decade has always been the same – by using the var keyword. It's important to remember that variable declarations happen before any code is executed – this process is called variable hoisting. (In fact, not only variable declarations but declarations in general are processed before code execution, which, also includes function declarations).

The following code sample will work in JavaScript (without using the ‘strict' mode):

name = 'Luke Skywalker';
var name;

Because due to hoisting it is effectively the same as:

var name;
name = 'Luke Skywalker';

Based on the above code hoisting produces a lot of (sometimes negative) implications but thankfully as of ES2015 we have a solution: by introduction the let and const keywords JavaScript gets block-scoped variables.

use strict

Strict mode in JavaScript allows developers to write better code by restricting the "forgivefullness" of the language itself. In order to invoke strict mode all you need to do is to include the use strict; statement in your code which can be either applied to the entire code or just to individual functions. By doing so you'll get rid of silent errors and make JavaScript actually throw error messages (like using a variable before declaring it) and also disallow you from creating variables on the global scope.

In all fairness since we are going to be writing ES2015 JavaScript code, my preference is that we are not going to be using the var keyword at all but use let and const instead. But at this point you may be wondering: are there any differences between let and const? The answer is, yes there are. Let's now take a look at them.

let vs const

Let's start by discussing how let and const are similar.

Both of these ways of declaring variables are block-scoped. That means that if they are declared in a block – such as an if statement or a function, the variable, and its value, will only be accessible inside that block of code.

This is not the case with the var keyword. Let's take a look at an example:

if (1 === 1) {
  let name = 'Luke Skywalker';
}
console.log(name); // ReferenceError

In the above code the name variable can only be accessed inside the block. Change that variable declaration to use the var keyword and you'll see a completely different behaviour.

The const keyword works slightly differently than let. As its name suggest, the const keyword should be used for declaring constant variables – variables which references won't change – bearing in mind that const won't make variables immutable.

Mutable vs Immutable

Mutable and immutable are important concepts in computer science – most of the time it's mentioned in conjunction with objects. Mutable simply means, changeable, immutable means unchangeable. So, if an object can be modified after its creation it is referred to as a mutable object. In JavaScript, custom objects (that is, objects created by you, the developer) are mutable, but there are some built-in types (like Number) that are immutable.

If you want to make your object immutable you can use the Object.freeze() method in JavaScript.

Arrays and Objects

Arrays are type of data structure that holds information. They are similar to a list, and they can store strings, numbers, Booleans and objects – don't forget a function is also an object in JavaScript.

Objects on the other hand are similar to real life ‘objects' – for example a car. A car has properties with some values, for example, it can be a red car. These properties define the characteristics of object.

Another important and significant difference between let and const is that you cannot reassign the variable declared by const. Let's take a look at an example:

const name = 'Luke Skywalker';
name = 'Darth Vader'; // TypeError: Assignment to constant variable.

But when working with objects, as discussed earlier, you can add properties to them even though you've specified the object using the const keyword. That is because we are not reassigning the variable declared by const - we are working at it's reference and we can modify its reference. (Remember to freeze an object created via the const keyword we could call Object.freeze() on the object):

const characters = { rebels: ['Luke', 'Han'] };
characters.rebels.push('Lando');
console.log(characters); // { rebels: [ 'Luke', 'Han', 'Lando' ] }