Six ES6 Features You Must Know

4 min readMay 5, 2020

JavaScript, LiveScript, Mocha, ECMAScript, ES6, ES2015,…

As I was doing some googling for this blog post, these words left me all at sea. I even started thinking that they were independent things. Some more googling helped me understand them better.

To give you a bit of context, JavaScript was developed by Brendan Eich for the company he was working for, Netscape. It was named Mocha at first, renamed to LiveScript later, and then to JavaScript.

Although Netscape, later, submitted it to ECMA(European Computer Manufacturers Association) for standardization, it didn’t allow the name ‘JavaScript’ to be used. Therefore, the standardized language was called ECMAScript.

ES6/ ES2015 is the sixth version of ECMAScript, which came out in 2015. With the new syntax and some awesome features, ES6 makes it easier for you to write your code.

In this post, I want to give brief explanations of six hand-selected features of ES6, which are listed below:

Template Literals
Multi-line Strings
Arrow Functions
Array & Object Destructuring
Default Parameters
Classes

Template Literals

In ES5, we had to use ‘+’ sign to concatenate strings:

But in the new syntax, we just need to wrap the string in backticks up and use ‘${}’ for the variables in strings.

Multi-line Strings

The older syntax for multi-line strings looked like this (we could also write them not with the plus signs, but with the ‘\n’ for each line to appear as a new line):

With the new syntax, all we need to do is utilizing backticks. No plus sign, no \n, no \t.

Arrow Functions

Here, we have the return statement and function explicitly added:

In ES6, arrow functions will work just fine without having to use neither of those:

Array & Object Destructuring

We use destructuring to extract data from arrays and objects.

Array Destructuring

In the older syntax of arrays, we would have to set variables for each element in an array individually :

Now that we have the 2015 version, we can define your variables in one line by using brackets:

Object Destructuring

The syntax is pretty much the same in objects:

All we need in ES6 for objects is the curly braces to wrap around the keys:

Default Parameters

In ES5, we had to write statements in a long way like the ones below to define our default parameters:

In ES6, we can define your default values in the parenthesis of our function.

Classes

The last ES6 feature I want to mention is the classes. If you are someone coming from object-oriented languages, you’ll love using classes in JavaScript as they will make your transition to JavaScript smoother. Using classes is a great way to keep your code secure and in a decent structure.

To create a class, we will need the keyword followed by the name of the class with two curly brackets. We will also need the constructor, which is so similar to the initialize method in Ruby:

After that, we can pass in arguments in the constructor, and define them in the body of the constructor. ‘this’ will come in so handy to define our attributes. We can think of ‘this’ as ‘self’ in Ruby.

Once we are done with creating the class itself, we can move on to create a variable to see if our class is working. We will need a ‘new’ Novel variable, which we pass your argument in.