A guide on ECMAScript 2015 (ES2015) onwards

Before you stop reading this post because the title says 2015 I wanted to let you know that this guide starts on new features implemented in ECMAScript 2015 because this version was a big step from the previous one (ECMAScript 2009) Also new features implemented in ES2015 are the standard used in current technology and new versions of the standard are develop based on ECMAScript 2015. In any case I’m always trying to keep the guide updated with new features implemented in most recent versions.

What is ECMAScript?

ECMAScript is a standard specification for scripting languages that was originally created just for JavaScript. Even though ECMAScript is more commonly seen implemented in web browsers it’s also used for writing server (backend) applications through technologies like Node.js and also for Mobile Applications with Ionic, React Native, etc. In a few words ECMAScript is the standard that controls what you can do with JavaScript.

In this post I’ll include the features that are used more commonly and that will get you going and make you feel more comfortable without having to view the documentation for all the options that ES2015 provides. If you want to take a deeper look on the features I’ll leave some good resources at the end of this post. With that being said let’s move to the real content 😁.

ECMAScript features

let

One of the new features implemented in ES2015 is the ability to define variables with a limited scope, instead of always defining global variables with the var keyword, we now can use the let keyword to define block scope variables.


// Previous ECMAScript version
var codingBlog = 'JojosCode';

// ECMAScript 2015
let codingBlog = 'JojosCode';
console.log(codingBlog); // 'JojosCode'

{
    let codingBlog = 'JojosCodeInSpanish';
    console.log(codingBlog); // 'JojosCodeInSpanish';
}

console.log(codingBlog); // 'JojosCode';

const

The const keyword allows the definition of constants also known as immutable variables. This means that if you try to assign a different value to a previously defined const the interpreter will throw an error.


// ECMAScript 2015
const Pi = 3.1415;

Pi = 3; // JavaScript Error

Arrow Functions

Arrow functions are a new and short way to define functions with some cool advantages from the legacy functions.


// Previous ECMAScript version
var numbers = [1, 2, 3];
var newNumbers = numbers.map(function(number) { return number + 1 });

// ECMAScript 2015
let numbers = [1, 2, 3];
let newNumbers = numbers.map(number => number + 1);

If you want to specify more than one parameter you can use this syntax:


let numbers = [1, 2, 3];
const multiplier = 2;
let newNumbers = numbers.map((number, multiplier) => number * multiplier);

And another important note is that if you put curly brackets { } surrounding the body of the function you’ll need to add a return statement like in the following example:


let numbers = [1, 2, 3];

// Without curly brackets
let newNumbers = numbers.map((number) => number + 1);

// With curly brackets
let newNumbers = numbers.map((number) => { return number + 1; });

Default Parameters in Functions

With ES2015 is now possible to define default parameters for functions:


// Previous ECMAScript version
function sum(n1, n2) {
    n1 = (n1 !== undefined) ? n1 : 0;
    n2 = (n2 !== undefined) ? n2 : 0;

    return n1 + n2;
}

// ECMAScript 2015
function sum(n1 = 0, n2 = 0) {
    return n1 + n2;
}

JavaScript Modules (Export & Import)

Another cool new feature is that you can export and import values from module to module allowing to have cleaner code and easier to share and reuse libraries and functionalities:


// FILE: mathOperations.js

// Defining and exporting the function named sum
export function sum(n1, n2) { 
  return n1 + n2;
}

// Defining and exporting the function named multiply
export function multiply(n1, n2) {
  return n1 * n2; 
}


// FILE: javascript-modules.js

// Importing module from mathOperations.js file
import * as Operations from './mathOperations.js';

// Using the sum method defined in mathOperations.js file
var theSum = Operations.sum(2 + 3);
console.log(theSum); // 5

// Using the multiply method defined in mathOperations.js file
var theMultiplication = Operations.multiply(3, 3);
console.log(theMultiplication); // 9

Classes

With ECMAScript 2015 it is possible to define JavaScript classes through the use of the class keyword. As it is known in JavaScript, that almost everything is a function, classes are also functions but instead of using the function keyword we use the class keyword like in the following example:


// Previous ECMAScript version
var Person = function(personName) {
    this.name = personName;
    this.altitude = 0;
};

Person.prototype.jump = function(altitude) {
    this.altitude += altitude;
};

// ECMAScript 2015
class Person {
    constructor(personName) {
        this.name = personName;
        this.altitude = 0;
    }

    jump(altitude) {
        this.altitude += altitude;
    }
}

Conclusion

From ECMAScript 2015 onwards several features have been introduced and you can review them in more detail in the resources section above, in this post I just included the features that you’re most likely to see when you are starting to use ECMAScript 2015.

I hope this post helps you understand a little bit better ECMAScript and if you feel like something is missing or you have any feedback or suggestion please leave it in the comments section.