9 ES6 Features Every JavaScript Developer Should Know
By: Amy J. Andrews
Tags: JavaScript, Coding, ES6, Web Development, Javascript Development

9 ES6 Features Every JavaScript Developer Should Know

ES6 brings more amazing features to the JavaScript language.

So without any further ado, let’s dive right in to see what are they and how they can help you write code more efficiently.

1. Rest Parameters

Take a look at a built-in function in JavaScript:

Math.max(arg1, arg2, …, argN)

You can call that function with any number of arguments. Like:

let max1 = Math.max(3, 5, 5, 1); // 5 let max2 = Math.max(23, 1, 56, 23, 13, 67); // 67

Using ES6 rest parameters feature, you can define functions just like Math.max.

Here’s how:

function averageOf(…numbers) {

let sum = 0;



for (let number of numbers) {

sum += number;

} return sum / numbers.length;

} let average = averageOf(5, 6, 2, 1); // 3.5

And that’s how the three dots (…) help you build special functions.

2. Promises

Promises allow you to defer further tasks until other previous tasks get completed. This one is useful when you need to deal with a sequence of deferred actions aka asynchronous tasks. The common use case is calling APIs.

Before promises were introduced, we use callbacks. Now, we have a much better option. It’s time to ditch callbacks to go for promises. Why?

No one like callback hell. The more actions we defer, that hell will grow bigger. It might become an ugly boy like this:

processStep1(id, function(data1) {

processStep2(data1, function(data2) {

processStep3(data2, function(data3) {

processStep4(data3, function(data4) {

finish(data4);

});

});

});

});

And promises will make the boy handsome by building a natural chain of actions like:

proccessStep1(id)

.then(function(data1) {

return processStep2(data1);

})

.then(function(data2) {

return processStep3(data2);

})

.then(function(data3) {

return processStep4(data3);

})

.then(function(data4) {

finish(data4);

})

.catch(errorHandler);

Now the code looks more beautiful. You can see what’s going on here. Everything is chained in a logical order. But that’s not all.

You can make it even better by combining with arrow functions:

proccessStep1(id)

.then(data1 => processStep2(data1))

.then(data2 => processStep3(data2))

.then(data3 => processStep4(data3))

.then(data4 => finish(data4))

.catch(errorHandler);

You see, no reason for callbacks anymore.

3. Arrow Functions

Nowadays, almost modern programming languages tend to simplify the way you write code, yet still complete the same kind of task. It’s one of the missions of arrow functions in JavaScript.

Life before arrow functions be like:

function sayHello(name) {

console.log(‘Hello ‘ + name);

} sayHello(‘Amy’); // Hello Amy

And this is how it evolves now:

const sayHello = name => console.log(‘Hello ‘ + name); sayHello(‘Amy’); // Hello Amy

Both examples produce the same result but I love the syntax of the second one more.

4. Template Literals

Template literals are strings literals that you can break into multiple lines and use with interpolated expressions (${…}).

You use a pair of single quotes (‘) or double quotes (“) to declare a traditional string. Template literals are created using backticks (`).

Example:

const bookTitle = ‘JavaScript’; console.log(`This ${bookTitle} book is great.

I learned so much from it.`);

// This JavaScript book is great

// I learned so much from it.

5. const & let

Before ES6, there’s a way to declare variables using the keyword var. However, we get problems with it, which relates to scope.

var doesn’t have block scope so it can lead to unpredictable behaviors.

Example:

var name = ‘Amy’; if (true) {

var name = ‘James’;

} console.log(name); // James

You may not see the problem in the simple example above. But in big projects, when you work with hundreds of lines of code, you probably don’t know the variable name is already defined before. Then you define the same variable in the if statement scope. Unfortunately, this action leads to changing the value of the one in the global scope without you know about it.

That’s why you should opt for let and const.

With let, the scope is blocked, which means everything happens in a block stays in the block. Let’s replace var by let in the example above to see how things work:

let name = ‘Amy’; if (true) {

let name = ‘James’;

} console.log(name); // Amy

You can see that it’s still fine if you accidentally define the same variable name with the global one. Despite the same name but they are treated differently since they have different scopes.

const is like let in terms of blocking scope. We use const for constant values. Once you define a variable with const, it can’t be updated.

const PI = 3.14;

PI = 3; // error: Uncaught TypeError: Assignment to constant variable.

To prevent scoping issues, go for let or const over var.

6. Default Parameters

Default parameters in JavaScript allow you to initialize parameters with default values if you pass nothing or undefined values to functions.

If you don’t pass arguments when calling a function, its parameters will be undefined by default:

const welcome = name => console.log(‘Welcome ‘ + name); welcome(); // Welcome undefined

Without default parameters feature, if you want a default value for parameter name, you often do this:

const welcome = name => {

name = name || ‘Amy’;

console.log(‘Welcome ‘ + name);

}; welcome(); // Welcome Amy

And then ES6 introduce default parameters feature, things get much better:

const welcome = (name = ‘Amy’) => console.log(‘Welcome ‘ + name); welcome(); // Welcome Amy

It’s so simple, yet effective, right?

7. Modules

When you design your codebase, you should separate it into different parts in which each part has its own purpose. In JavaScript, those parts are called modules.

You can see a module in JavaScript as a file that groups related stuff for reusability and organization purposes.

Take calculation.js for example:

export const moduleName = ‘Calculation’; export function sum(a, b) {

return a + b;

}

We use the export keyword to export a variable and a function. Then you can access the exported variables and functions in another file by using the import keyword.

Example:

import { moduleName, sum } from ‘./calculation.js’; console.log(moduleName); // Calculation

let a = sum(5, 8); // 13

8. Classes

Prior to ES6, there’s no such thing as class. We come up with a workaround which is using functions as classes.

function Person(name) {

this.name = name;

} Person.prototype.introduce = function () {

console.log(`My name is ${this.name}`);

} let person = new Person(‘Amy’);

person.introduce(); // My name is Amy

Now, you don’t have to work around like that anymore:

class Person {

constructor(name) {

this.name = name;

} introduce() {

console.log(`My name is ${this.name}`);

}

} let person = new Person(‘Amy’);

person.introduce(); // My name is Amy

If you’re familiar with programming languages such as C# or Java, you should be happy about this ES6 new feature because it provides a clearer and more convenient syntax.

9. Destructuring

This feature allows us to extract specific parts of objects or arrays and assign them to variables.

Example:

let book = {

title: ‘JavaScript’,

price: 13,

author: ‘Amy’

}; let { title, author } = book;

console.log(title, author); // JavaScript Amy

On top of the basic usage, destructuring unleash its power if being used in specific use cases, which you can find in the article below:

Conclusion

These are not all ES6 features, just the ones that I find interesting and most useful for me. Some are just sugar syntax, some are really game-changing.

What are your favorite ones? Please let me know in the comment below.

Enjoyed this article? If so, get more similar content by subscribing to Decoded, our YouTube channel!