The 10 Best JavaScript ES6 Features

What is ES6, and how do you use it?

JavaScript ES6 made huge strides in making JavaScript more user-friendly. It implemented features that developers expect from a modern language and a few that just make programmers' lives easier. These are the best new features to come to JavaScript with ES6.

01
of 10

Default Parameters

ES6 Default Parameters
ES6 Default Parameters.

Screenshot

It's pretty standard practice to set default parameters to automatically fill in key values of a function, but up until ES6, the option wasn't available in JavaScript. Instead, you needed to define your own default values with a hack of sorts within the function itself. With ES6, though, you have the option of setting default parameters like you would in most other languages.

Before ES6:

function multiply(x, y){
var a = x || 1;
var b = y || 1;
return a*b;
}

After ES6:

function multiply(x=1,y=1){
return x*y;
}
02
of 10

Template Literals

ES6 Template Literals
ES6 Template Literals.

Screenshot

Template literals are yet another major convenience when working with strings. Template literals are another feature common in other languages that allows you to plug variables directly into strings. Prior to ES6, you needed to rely on somewhat messy string concatenation to achieve a similar effect, and the resulting code was anything but clean.

Before ES6:

var greeting = "Hello " + first + " " + last +"! Welcome back!";

After ES6:

var greeting = "Hello ${first} ${last}! Welcome back!";
03
of 10

Multi-Line Strings

ES6 Multi-line Strings
ES6 Multi-line Strings.

Screenshot

Multi-line strings may not be a major usability factor, but they're a very nice convenience, especially when working with a lot of text. With JavaScript being a web language, text processing is common, so any kind of usability improvement there can be a big deal. Like with template literals, the effect of multi-line strings was achieved with string concatenation prior to ES6. Now, you can get multi-line strings by encapsulating the whole thing between two backticks.

Before ES6:

var multiline = "This string sort of\n"
+ "like a multi-line string,\n"
+ "but it's not really one."

After ES6:

var multiline = `This on the other hand,
actually is a multi-line string,
thanks to JavaScript ES6`
04
of 10

Block Scope for Let and Const

ES6 Block Scope
ES6 Block Scope.

Screenshot

Before ES6, blocks didn't really do anything to variables. Everything was global with var, and it still is, but let and const provide ways to declare and assign variables within the scope of a block. Let behaves mostly like var, but with scope. Const is an immutable constant, but because it's scoped, you can reuse the same constant in different blocks, and they won't interfere.

Before ES6:

function scopetest{
var x = 10;
{
var x = 100;
}
{
var x = "This is a string even!";
}
return x;
}
console.log(scopetest());

It actually returns the string!

After ES6:

function scopetest{
let x = 10;
{
let x = 100;
}
{
let x = "This is a string even!";
}
return x;
}
console.log(scopetest());

The original value gets returned this time because it's the only one declared in the same scope. Sure, these are contrived examples, but it should be clear how using scoping with let can be useful.

05
of 10

True Classes

ES6 Classes
ES6 Classes.

Screenshot 

JavaScript ES6 finally brings a true object-oriented class design to JavaScript, complete with the 'class' and 'constructor' keywords. ES6 also brought with it an easy way to inherit from one class to another using the 'extends' keywords. Now, JavaScript behaves much more similarly to other object-oriented languages.

You can now create and extend classes in ES6 like this:

class Book {
constructor(title, author, pages) {
this.title = title;
this.author = author;
this.pages = pages;
}
function getPageCount() {
return this.pages;
}
function getAuthor() {
return this.author;
}
function getTitle() {
return this.title;
}
}
class Novel extends Book {
constructor(title, author, pages, genre) {
super(title, author, pages);
this.genre = genre;
}
function getGenre() {
return this.genre;
}
}
let book = new Novel('The Hobbit', 'J.R.R. Tolkien', 310, 'Fantasy');
console.log(book.getAuthor());
06
of 10

New Array Functions

ES6 Array Functions
ES6 Array Functions.

Screenshot

Generally speaking, array functions usually aren't necessary in a language, but they do make things simpler. These helper functions cut down on the overall bulk of your code and save you from writing and rewriting similar patterns. So, while array helper functions won't make or break your code, they actually might help stop you from breaking your code.

forEach

This one doesn't follow the pattern you probably think, "for x in array," but it can be used in a similar way. It iterates over an array and passes the values from that array into a designated function.

var numbers = [1, 2, 3, 4, 5];
function timesTwo(number){
console.log(number*2);
}
numbers.forEach(timesTwo);

map

Map functions are reasonably common. They allow you to perform an action to each element in an array, and create a new array containing the results.

var numbers = [1, 2, 3, 4, 5];
function timesTwo(number){
return number*2;
}
var doubleNumbers = numbers.map(timesTwo);
console.log(doubleNumbers);

filter

The 'filter' function checks each element in an array to see if it meets a certain condition and adds it to a new array if it does. In doing so, it creates a new subset of the original array.

var numbers = [1, 2, 3, 4, 5];
function isOdd(number){
if(number % 2){
return number;
}
}
var oddNumbers = numbers.filter(isOdd);
console.log(oddNumbers);

There are several more array functions added with ES6, like every, some, and find, but these are probably the ones you'll use most.

07
of 10

Arrow Functions

ES6 Arrow Functions
ES6 Arrow Functions.

Screenshot

If you've worked with Coffeescript, you should be familiar with arrow functions. They've now made their way to mainstream JavaScript with ES6.

Arrow functions have two major benefits that most people will use them for. First, they simplify your syntax and cut down on the overall amount of code you need to write for a function. Next, they keep 'this' from changing. It will remain in the same scope as the function using it, making it much more effective for DOM interactions, like button presses.

A basic function:

var timesTwo = number => number*2;
timesTwo(8)

The arrow function uses the parameters in line and relies on an implicit return statement. This works with different numbers of parameters, too.

var multiply = (x, y) => x*y;

Because of the lightweight syntax, arrow functions are also a great option for anonymous functions.

For 'this,' you also have an easier time because there isn't any worry about mutation or losing scope.

$('.btnSend').click((event) => {
this.sendMail();
});

The overall syntax is simplified.

08
of 10

Improved Object Literals

ES6 Object Literals
ES6 Object Literals.

Screenshot

Object literals also received a readability boost. It might not be as extreme as some of the other improvements, but it definitely helps. Previously, you had to restate your variables to associate them with the properties of an object. Now, JavaScript associates the value with the variable name automatically.

Before ES6:

function showBookInfo(title, author, genre){
return {
title: title,
author: author,
genre: genre
}
}

console.log(showBookInfo("The Hobbit", "J.R.R. Tolkien", "Fantasy"));

After ES6:

function showBookInfo(title, author, genre) {
return {
title,
author,
genre
}
}
console.log(showBookInfo("The Hobbit", "J.R.R. Tolkien", "Fantasy"));

It's not a huge difference, but it definitely helps.

09
of 10

Destructuring

ES6 Destructuring
ES6 Destructuring.

Screenshot

Destructuring is much less complicated than it sounds. It's a shorthand way to pull variables and their associated values out of objects and arrays. In JavaScript ES5, you'd have to write out the name of the object you're pulling the values from each time you wanted to create a new variable.

Before ES6:

var randomData = {a: 12, b: false, c: 'blue'};
var a = randomData.a;
var c = randomData.c;

With destructuring, you don't need to write it all out.

After ES6:

var randomData = {a: 12, b: false, c: 'blue'};
var {a, c} = randomData;

The variables 'a' and 'c' will both be created from the data stored in the object.

10
of 10

Promises

ES6 Promises
ES6 Promises.

Screenshot

Promises are in sort of an odd place. Of everything on this list, they're the only thing that actually increases the line count of your code. It's not necessarily a bad thing, though. Promises aim to build an infrastructure for asynchronous code. They're meant to simplify things in the long run. That said, if you're not writing a bunch of asynchronous code or nesting timeouts, there's no real reason the old 'setTimeout' function won't work.

Before ES6:

setTimeout(functon(){
console.log('Timeout's up!');
}, 1000);

After ES6:

var asyncPromise = new Promise((resolve, reject) => {
console.log('Doing the first thing async...');
resolve();
}).then(() => {
console.log('Doing something else...');
})

This is a case of something that may be very useful or not useful at all, depending on what you're working on.