Though ES6 specification is not super-fresh, I think that many developers are still not so familiar with it. The main reason is probably poor support in web browsers just after specification release. Currently, the specification is over 2 years old, and a lot of modern web browsers work well with ES6. Even if you (or your clients) don’t use the most recent version of web browser, you can use transpilers (like Babel), which transforms ES6 sources to ES5 sources during the build process of the application. It means that it’s about time to make one step forward and learn ES6.

In this article, I will try to introduce the most useful features in a succinct way. After the tutorial, you will possess basic skills and be able to apply them in a real project. Don’t treat it as a guide or documentation. My goal is to encourage you to dig deeper and get familiar with ES6.

Let’s start

1. const and let keywords

const enables you to define constants (finally!). let enables you to define variables. That’s great, but don’t we have variables in JavaScript already? Yes, that’s true, but variables declared by var have function scope and are hoisted to the top. It means that a variable can be used before it has been declared. let variables and constants have block scope (surrounded by {}) and cannot be used before declaration.

2. Array helper functions

New cool helper functions appeared, which facilitate work with JS arrays in most useful cases. How many times did you implement logic like: filtering, checking if any or all elements meet the condition, or elements conversion? Probably very often. Now you have great language features to do the work for you. Here, in my opinion, are the most valuable functions:

forEach

Executes the provided function for each element of the array, passing the array element as an argument.

map

Creates a new array containing the same number of elements, but output elements are created by the provided function. It just converts each array element to something else.

filter

Creates a new array containing a subset of the original array. The result has these elements that pass the test implemented by the provided function, which should return true or false.

find

Finds the first element that passes the test implemented by the provided function, which should return true or false.

every

Checks if every element of the array passes the test implemented by the provided function, which should return true or false.

some

Checks if any element of the array passes the test implemented by the provided function, which should return true or false.

reduce

Applies a function passed as the first parameter against an accumulator and each element in the array (from left to right), thus reducing it to a single value. The initial value of the accumulator should be provided as the second parameter of the reduce function.

3. Arrow functions

Implementation of very simple functions (like the aforementioned sum or product) requires writing a lot of boilerplate. Is there any remedy for that? Yes, just try arrow functions!

Arrow functions can also be inline. It really simplifies the code:

Arrow functions can also be more complex and have many lines of code:

4. Classes

Which Java developer doesn’t miss classes when switching to a JS project? Who doesn’t like explicit inheritance, like in Java language, instead of writing magic code for prototypal inheritance? Although some JS developers complained, classes have been introduced in ES6. They don’t change the concept of inheritance. They are just syntactic sugar for prototypal inheritance.

5. Enhanced object literals

Object literals have been enhanced. Now we can much more easily:

define fields with variable assignment of the same name

define functions

define dynamic (calculated) properties

6. Template strings

Who loves writing large string and variables concatenation? I believe a minority of us. Who hates reading it? I’m sure everyone. Fortunately, ES6 introduces very easy-to-use string templates with placeholders for variables.

Please note, that we can write multi-line text.

Important: Use backticks instead of apostrophes to wrap the text.

7. Default function arguments

Don’t you like providing all possible function parameters? Use defaults.

8. Rest and spread operators

Spread

It enables extraction of array or object content as single elements.

Example — make shallow copy of array:

Example — merge arrays:

Rest

Would you like to bind the first few function parameters to variables, and others to single variables as an array? Now you can do it quite easily.

9. Destructuring

Of array

Enables extraction of requested elements from the array and assigning them to variables.

Of object

Enables extraction of requested properties from the object and assigning them to variables of the same name as properties.

10. Promises

Promise promises (yes, I know it sounds weird) that you would get in future results of deferred or long-running tasks. Promise has two channels: the first for results, the second for potential errors. To get the result, you provide the callback function as the ‘then’ function parameter. To handle errors, you provide the callback function as the ‘catch’ function parameter.

Please notice that output of the example might differ for each execution, because of random function call.

Summary

I hope you enjoyed the article. If you want some practice, you can use the sandbox for the learning process: https://es6console.com/. If you need more information, you can find it here: