JavaScript ES6: 5 new abstractions to improve your code
Tags: javascript, programming, es6, webdev
Published: 2018-08-06 18:35:05

---
title: JavaScript ES6: 5 new abstractions to improve your code
published: true
tags: javascript,programming,es6,web-development
canonical_url: https://blog.logrocket.com/javascript-es6-5-new-abstractions-to-improve-your-code-54a369e82407
---

#### Leverage powerful ES6 features to write better, elegant, and more predictable JavaScript.

![](https://cdn-images-1.medium.com/max/1024/1*ndfkO89TKQrzVXJMopCTOQ.jpeg)

JavaScript is a very powerful programming language that runs on a wide range of platforms, especially with the advent of JavaScript runtimes like _Node.js_. The adoption of the language is increasing among programmers of different categories and levels.

As with most things, there have been a quite a few changes across various versions of the language since its creation. However, the ES6 specification of the language (_commonly referred to as ES2015_)added a lot of syntax improvements and new features. This makes makes writing JavaScript programs more efficient, less error-prone, and so much interesting.

Some of these new features and syntax improvements include: _classes_, _modules_, _promises_, _template literals_, _destructuring_, _arrow functions_, _generators_, _sets and maps_, _symbols_, and _typed arrays_, _proxies_,

In this article, we will explore five of these ES6 features and consider how we can utilize them in improving our JavaScript code. Here are the features of interest:

1. _Template Literals_
2. _Default and Rest Parameters_
3. _Arrow Functions_
4. _Destructuring_
5. _Classes_

[![](https://cdn-images-1.medium.com/max/1024/1*GPjaPKNNUYHU8EsA3Z0JGA.png)](https://logrocket.com/signup/)

### 1. Template literals

In ES6, template literals were introduced for dealing with a few challenges associated with formatting and representing strings. With template literals, you can address multiline strings with ease. It also makes it possible to perform enhanced string substitutions and proper formatting of seemingly dangerous strings such as strings to be embedded into HTML.

Prior to ES6, strings are delimited by either a pair of _single quotes_(‘string’) or a pair of _double quotes_(“string”). In ES6, strings can also be delimited by a pair of _back-ticks_(`string`). Such strings are called **template literals**.

Just as with single and double quotes delimiters, backticks can also be escaped in template literals if the string contains a backtick character. To escape a back-tick character in a template literal, a backward slash(\) must be placed before the back-tick character. Note however that single and double quotes don’t need to be escaped in template literals.

Here is a simple example:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/b42479358bc9cfd9185a4f7530b8a845/href">https://medium.com/media/b42479358bc9cfd9185a4f7530b8a845/href</a></iframe>

Using template literals this way isn’t any much different from using regular JavaScript strings delimited by quotes. We begin to get the real advantages when dealing with _multiline strings_, _string substitutions,_ and _tagged templates_.

#### Multiline strings

Prior to ES6, strings in JavaScript were limited to a single line. However, ending a line with a backward slash(\) before beginning a newline made it possible to create seeming multiline strings even though the newlines are not output in the string:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/60cf776e0518e75aff9758b4da10fa8d/href">https://medium.com/media/60cf776e0518e75aff9758b4da10fa8d/href</a></iframe>

If you want to output a newline in the string, you will need to use the newline escape sequence(\n) before the newline:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/00fd84c220ecaf2492b71c1bb4fcd4ae/href">https://medium.com/media/00fd84c220ecaf2492b71c1bb4fcd4ae/href</a></iframe>

> With ES6 template literals, the string is output with the formatting intact.

All newlines and whitespaces in the string are preserved, making multiline strings easy to create without any additional syntax. However since whitespaces are preserved, care should be taken when indenting the string.

Consider this example:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/176e98023c16fefe45c2de5b5135b044/href">https://medium.com/media/176e98023c16fefe45c2de5b5135b044/href</a></iframe>

Notice that the newlines and indentations are preserved in the string. The trim() method is also used to remove any newlines and whitespaces at the start and end of the html string.

#### String substitution

Template literals also make string substitutions fun. Prior to ES6, _string concatenation_ was heavily relied on for creating dynamic strings.

Here is a simple example:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/8c15655e2ac41cb89a5498e63d5429d8/href">https://medium.com/media/8c15655e2ac41cb89a5498e63d5429d8/href</a></iframe>

Using ES6 template literals, the substitution can be done as follows:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/14983f0bcc194dcd42f94c5f5349ae97/href">https://medium.com/media/14983f0bcc194dcd42f94c5f5349ae97/href</a></iframe>

A string substitution is delimited by an opening ${ and a closing } and can contain any valid JavaScript expression in between.

In the previous example, we substituted the value of a simple variable in the template literal. Let’s say we want to add a 10% discount to the price of all items in the store.

Here is what it looks like:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/c20167db2c78d1bb2b6fea6eb95c00af/href">https://medium.com/media/c20167db2c78d1bb2b6fea6eb95c00af/href</a></iframe>

Here we substitute the value of a JavaScript expression that computes the discounted price.

> Template literals are JavaScript expressions themselves and as such can be nested inside of other template literals.

#### Template tags

With tagged templates, you even have more control over the substitutions and transformation of the template literal. **A _template tag_ is simply a function that defines how a template literal should be transformed**.

A template tag function can accept multiple arguments. The first argument is an array containing all the literal strings in the template literal. The remaining arguments correspond with the substitutions in the template literal. Hence the second argument corresponds with the first substitution, the third argument corresponds with the second substitution and so on.

Here is a simple illustration. Given the following template literal:

```
`The price of ${quantity} units of the item on the online store is $${quantity * price}.`
```

The first argument passed to a template tag for the above template literal will be the array of literal strings which is as follows:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/b7b82ffd4a099d20c0931870eeb61491/href">https://medium.com/media/b7b82ffd4a099d20c0931870eeb61491/href</a></iframe>

The second argument will be the value of quantity and the third argument will be the value of (quantity \* price).

Let’s go ahead and create a template tag named pricing which we can use to transform pricing summary. It will ensure that price values are rounded to 2 decimal places. It will also ensure that the $ currency symbol before any price is converted to USD.

Here is the function:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/94383c4d7e3ca46b9add87379cf86fc8/href">https://medium.com/media/94383c4d7e3ca46b9add87379cf86fc8/href</a></iframe>

You would notice in this code snippet that we used a rest parameter named replacements to capture all the substitutions in the template literal. _We will learn more about rest parameters in the next section_.

Now that we have created a template tag, using it is the easy part.

> To use a template tag, simply attach the name of the template tag just before the first backtick(`) delimiter of the template literal.

Here is an example using the pricing template tag we just created:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/e57da2d27aa4c4fcee1be6ba1efdcef2/href">https://medium.com/media/e57da2d27aa4c4fcee1be6ba1efdcef2/href</a></iframe>
### 2. Default and rest parameters

Functions in JavaScript are very important objects. It is very possible that you have come across the statement:

> _“Functions are first-class citizens”_.

This is true about JavaScript functions because you can pass them around in your program like you would with any other regular value.

However, JavaScript functions have not had any considerable syntax improvements until ES6. With ES6, we now have some syntax improvements like _default parameters_, _rest parameters_, _arrow functions_, etc.

#### Default parameters

Prior to ES6, there was basically no syntax for setting default values for function parameters. However, there were some hacks for setting fallback values for function parameters when they are not passed values on invocation time. Here is a simple example:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/679f9ce267cf5c9736e15c970dc34e75/href">https://medium.com/media/679f9ce267cf5c9736e15c970dc34e75/href</a></iframe>

In this snippet, we’ve been able to set default values for the function parameters. Hence these parameters behave as though they are optional, since fallback values are used when the parameters are not passed.

In ES6, you can initialize the function parameter with a default value that will be used when the parameter is not passed. Here is how we can rewrite our previous convertToBase() function with default parameters:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/9805a907faaee62664bddedb26347f52/href">https://medium.com/media/9805a907faaee62664bddedb26347f52/href</a></iframe>

Named function parameters in ES6 have the same behavior as let declarations. Default values in ES6 are not limited to only literal or primitive values.

> Any JavaScript expression can also be used as default values for function parameters.

Here is an example:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/05191e1fdbdcec4e8e69b4fab1c6b54f/href">https://medium.com/media/05191e1fdbdcec4e8e69b4fab1c6b54f/href</a></iframe>

Here, we are using the return value from getDefaultNumberBase() as the default value for the base parameter. You can even use the value of a previous parameter when setting the default value for another parameter. Here is an example:

```
function cropImage(width, height = width) {
_// ...implementation_  
}
```

In this snippet, the height parameter will be set to the value of the width parameter whenever it is not passed.

Although you can use previous parameter values when setting default values, you cannot use variables declared within the function body. This is because default parameters have their own scope that is separated from the scope of the function body.

#### Rest parameters

The arguments object is the ultimate means of capturing all the arguments passed to a function on invocation. This makes it possible to create overloaded functions that can accept varying number of arguments.

> However, the arguments object, though being _array-like_, needs to be converted to an actual array before certain array operations can be carried out on it.

Here is a simple example:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/702b5420c65ec054beba646b7bdefe37/href">https://medium.com/media/702b5420c65ec054beba646b7bdefe37/href</a></iframe>

This function computes the sum of any number of arguments passed to it. If the argument is not a number, it tries to convert it to a number using the Number() global function. It returns 0 if no argument is passed. Notice that the arguments object was first converted to an array and assigned to the args variable in order to use the reduce() method.

In ES6, _rest parameters_ were introduced. A **rest parameter**  **is simply a**  **named function parameter preceded by three dots** (...). The rest parameter is assigned an array that contains the remaining arguments passed to a function. Here is how we can rewrite our previous sum() function using a rest parameter:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/40326966067088a6ae32804da0f86c73/href">https://medium.com/media/40326966067088a6ae32804da0f86c73/href</a></iframe>

**There are a few things that are worth noting with regard to rest parameters.**

1. You can only have one rest parameter for a function.

2. The rest parameter, when present, must be the last parameter.

3. A rest parameter is not the same as the arguments object. It only captures the remaining arguments after the other named parameters while the arguments object captures all the arguments passed to the function regardless.

4. A rest parameter cannot be used in an object literal setter.

#### Spread operator

Let’s say we have an array containing the scores of students in a class and we want to compute the average score of the students. Basically, we will first compute the sum of the scores and then divide the sum by the number of scores.

We can use the sum() function we created in the previous section to compute the sum of the scores. However, the issue is that we have an array of scores and sum expects numbers as arguments.

Prior to ES6, the Function.prototype.apply() method can be used to handle cases like this. This method takes an array as its second argument which represents the arguments the function should be invoked with.

Here is an example:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/f6e1af526de4a54035657ff9131def6c/href">https://medium.com/media/f6e1af526de4a54035657ff9131def6c/href</a></iframe>

In ES6, a new operator known as the _spread operator_(...) was introduced. It is closely related to rest parameters and is very useful for dealing with arrays and other _iterables_. With the spread operator we can compute the totalScore as follows:

```
const totalScore = sum(...scores);
```

> Hence for most of the use cases, the spread operator is a good replacement for the Function.prototype.apply() method.

### 3. Arrow functions

Another very important syntax improvement in ES6 is the introduction of _arrow functions_. Arrow functions make use of a completely new syntax and offer a couple of great advantages when used in ways they are best suited for.

The syntax for arrow functions omits the function keyword. Also the function parameters are separated from the function body using an _arrow_ (=>), hence the name _arrow functions_.

Although arrow functions are more compact and shorter than regular functions, they are significantly different from regular functions in some ways that define how they can be used:

1. Arrow functions cannot be used as constructors and they have no prototype. Hence, using the new keyword with an arrow function will usually result in an error.

2. Array function does not have arguments object, hence named parameters and rest parameters must be used for function arguments. Duplicate named parameters are also not allowed.

3. The this binding inside an arrow function cannot be modified, and it always points up to the closest non-arrow parent function.

#### Arrow function syntax

Arrow functions may look slightly differently depending on what you want to achieve.

Let’s take a look at some forms:

**Without parameters**

If there are no parameters for the arrow function, then an empty pair of parentheses(()) is used before the arrow(=>) as shown in the following snippet.

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/aea6ab25fc6c0f4c1066522b7185ed2b/href">https://medium.com/media/aea6ab25fc6c0f4c1066522b7185ed2b/href</a></iframe>

For very simple arrow functions like this that just return the value of a JavaScript expression, the return keyword and the pair of curly braces({}) surrounding the function body can be omitted.

Hence, the arrow function can be rewritten like this:

```
const getTimestamp = () => +new Date;
```

However, if an object literal is returned from the arrow function, it needs to be wrapped with a pair of parentheses(()), otherwise the JavaScript engine sees the curly braces({}) of the object literal as containing the function body which will result in syntax error. Here is an example:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/b2e0e288843029ed0e732669b6962c6a/href">https://medium.com/media/b2e0e288843029ed0e732669b6962c6a/href</a></iframe>

**With parameters**

For arrow functions that take just one named parameter, the enclosing pair of parentheses surrounding the parameters list can be omitted as shown in the following snippet:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/dd669a8529290c56995a83151c84b505/href">https://medium.com/media/dd669a8529290c56995a83151c84b505/href</a></iframe>

However, there are situations where the enclosing parenthesis surrounding the parameters list cannot be omitted. Here are some of such situations:

1. When there are more than one named parameters
<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/f1a6eeb5f3ad8de1ac2a2c9e6575a66e/href">https://medium.com/media/f1a6eeb5f3ad8de1ac2a2c9e6575a66e/href</a></iframe>

2. When there is a default parameter, even if it is the only parameter

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/cc25be3b268a059bc14a8a28d89ca01c/href">https://medium.com/media/cc25be3b268a059bc14a8a28d89ca01c/href</a></iframe>

3. When there is a rest parameter, even if it is the only parameter

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/3c11712e82a1652e1d1ba1b1a3a4d7dd/href">https://medium.com/media/3c11712e82a1652e1d1ba1b1a3a4d7dd/href</a></iframe>

4. When there is a destructured parameter, even if it is the only parameter

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/94e442094d8f74d6d323b1cbd009dac1/href">https://medium.com/media/94e442094d8f74d6d323b1cbd009dac1/href</a></iframe>

**Traditional function body**

As shown earlier for very simple arrow functions that just return the value of a JavaScript expression, the return keyword and the pair of curly braces({}) surrounding the function body can be omitted. However, you can still use the traditional function body if you want and especially when the function has multiple statements.

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/6f50d1eb433bc156f899ce7264f441d6/href">https://medium.com/media/6f50d1eb433bc156f899ce7264f441d6/href</a></iframe>

The above function tries to mimic the snakeCase() method of the _Lodash_ JavaScript library. Here, we have to use the traditional function body wrapped in curly braces({}) since we have so many JavaScript statements within the function body.

> Unlike with regular functions, the arguments object does not exist for arrow functions. However, they can have access to the arguments object of a non-arrow parent function.

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/62f8d1bede2f33bdd428ad6dd0207691/href">https://medium.com/media/62f8d1bede2f33bdd428ad6dd0207691/href</a></iframe>
#### **Immediately invoked function expressions (IIFEs)**

One useful application of functions in JavaScript is observed in _Immediately Invoked Function Expressions (IIFEs)_, which are **_functions that are defined and called immediately without saving a reference to the function_**. This kind of function application is usually seen in one-off initialization scripts, JavaScript libraries like _jQuery_, etc.

Using regular JavaScript functions, IIFEs usually take one of these forms:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/e43f8fff70249d2e8c9f7e6c4f53ce58/href">https://medium.com/media/e43f8fff70249d2e8c9f7e6c4f53ce58/href</a></iframe>

The arrow function syntax can also be used with IIFEs provided that the arrow function is wrapped in parentheses.

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/0469463950b6eff9c7d11fef12fa9b57/href">https://medium.com/media/0469463950b6eff9c7d11fef12fa9b57/href</a></iframe>
#### Callback functions

Callback functions are heavily used in asynchronous programs and also in array methods like map(), filter(), forEach(), reduce(), sort(), etc.

> Arrow functions are perfect for use as callback functions.

In a previous code snippet, we saw how an arrow function was used with reduce() to compute the sum of an array of numbers. Using the arrow function is more compact and neater. Again, here is the comparison:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/d809623a94963fc362f42cef00e918d4/href">https://medium.com/media/d809623a94963fc362f42cef00e918d4/href</a></iframe>

Let’s do something a little more involved to demonstrate how using arrow functions as array callbacks can help us achieve more with less code. We will mimic the flattenDeep() method of the _Lodash_ JavaScript library. This method recursively flattens an array. However, in our implementation, we will recursively flatten the array of arguments passed to the function.

Here is the code snippet for the flattenDeep() function:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/1304d28f895187273bbfe26304d5856c/href">https://medium.com/media/1304d28f895187273bbfe26304d5856c/href</a></iframe>

This is how cool array functions can be when used as callback functions, especially when working with array iteration methods that take callback functions.

#### this and Arrow Functions

One major source of confusion and errors in a lot of JavaScript programs is the value resolution of this.

> this resolves to different values depending on the scope and context of a function invocation.

For example, when a function is invoked with the new keyword, this points to the instance created by the constructor, however, when the same function is called without the new keyword, this points to the global object which in the browser environment is the window object in _non-strict mode_.

Here is a simple illustration. In the following code snippet, calling Person() without the new keyword will accidentally create a global variable called name because the function is in _non-strict mode_.

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/aa624fd3252955cf37cf95ef8ebbb0f6/href">https://medium.com/media/aa624fd3252955cf37cf95ef8ebbb0f6/href</a></iframe>

Another common source of confusion with this is in DOM event listeners.

> In event listeners, this points to the DOM element the event is targeted at.

Consider the following code snippet:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/0ac5f83b6f1b92fd7a66c6878548b6a7/href">https://medium.com/media/0ac5f83b6f1b92fd7a66c6878548b6a7/href</a></iframe>

Everything looks good with this code snippet. However, when you begin scrolling the browser window vertically, you will see that an error is logged on the console. The reason for the error is that this.offsets is undefined and we are trying to access the offsetY property of undefined.

The question is: **How is it possible that**  **this.offsets is**  **undefined?**

It’s because the value of this inside the event listener is different from the value of this inside the enclosing prototype function. this inside the event listener points to window which is the event target and offsets does not exist as a property on window. Hence, this.offsets inside the event listener is undefined.

Function.prototype.bind() can be used to explicitly set the this binding for a function. Here is how the error can be fixed by explicitly setting the this binding using Function.prototype.bind():

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/c91ad40035c75ba81ed53b0f970b437a/href">https://medium.com/media/c91ad40035c75ba81ed53b0f970b437a/href</a></iframe>

Here, we wrapped the event listener with parentheses and called the bind() method passing the value of this from the enclosing prototype function. Calling bind() actually returns a new function with the specified this binding. Everything works perfectly now without any errors.

> With ES6 arrow functions, there is no this binding. Hence, arrow functions use the value of this from their closest non-arrow function ancestor.

In a case like ours, instead of using bind() which actually returns a new function, we can use an arrow function instead — since the this binding from the enclosing prototype function is retained.

Here it is:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/900a9dae98f29103cfa5575a0201b95a/href">https://medium.com/media/900a9dae98f29103cfa5575a0201b95a/href</a></iframe>
### 4. Destructuring

Destructuring is another very important improvement to the JavaScript syntax. Destructuring makes it possible to access and assign values to local variables from within complex structures like arrays and objects, no matter how deeply nested those values are in the parent array or object. There are two forms of destructuring: **Object destructuring** and **Array destructuring**.

#### Object destructuring

To illustrate object destructuring, let’s say we have a country object that looks like the following:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/d7a827d4b5540267e4922b60120f5127/href">https://medium.com/media/d7a827d4b5540267e4922b60120f5127/href</a></iframe>

We want to display some information about this country to our visitors. The following code snippet shows a very basic countryInfo() function that does just that:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/63e5f87c31f10a03c77a2fc6577faa35/href">https://medium.com/media/63e5f87c31f10a03c77a2fc6577faa35/href</a></iframe>

In this snippet, we have been able to extract some values from the country object and assign them to local variables in the countryInfo() function — which worked out very well.

With ES6 destructuring, we can extract these values and assign them to variables with a more elegant, cleaner and shorter syntax. Here is a comparison between the old snippet and ES6 destructuring:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/8363f717acf66949cd017700870a503e/href">https://medium.com/media/8363f717acf66949cd017700870a503e/href</a></iframe>

This form of destructuring in the above code snippet is known as _object destructuring_ — because we are extracting values from an object and assigning them to local variables.

> For object destructuring, an object literal is used on the left-hand-side of an assignment expression.

You can even use object destructuring with function parameters as shown in the following snippet:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/68c94bfe2af346035753122caf2daf96/href">https://medium.com/media/68c94bfe2af346035753122caf2daf96/href</a></iframe>
#### Array Destructuring

Array destructuring is used for extracting values from arrays and assigning them to local variables. Let’s say we have the RGB(Red-Green-Blue) values of a color represented as an array as follows:

```
const color = [240, 80, 124];
```

We want to display the RGB values for the given color. Here is how it can be done with array destructuring.

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/2a7b92a324522690f2b86012eecbefb1/href">https://medium.com/media/2a7b92a324522690f2b86012eecbefb1/href</a></iframe>

> For array destructuring, an array literal is used on the left-hand-side of an assignment expression.

With array destructuring, it is possible to skip assigning values that you don’t need. Let’s say we want only the blue value of the color. Here is how we can skip the red and green values without assigning them to local variables.

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/45c7a96ed7931bfc8749b0e40a52ee5a/href">https://medium.com/media/45c7a96ed7931bfc8749b0e40a52ee5a/href</a></iframe>

Array destructuring can also be used with function parameters in a much similar fashion as object destructuring. However, there are some other ways in which array destructuring can be used for solving common problems.

A very important use case is in **swapping variables**. Let’s say we want to search a database for records stored between two dates. We could write a simple function that accepts two Date objects: fromDate and toDate as follows:

```
function fetchDatabaseRecords(fromDate, toDate) {
_// ...execute database query_  
}
```

We want to ensure that fromDate is always before toDate — hence we want to simply swap the dates in cases where fromDate is after toDate. Here is how we can swap the dates using array destructuring:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/b1f1c32667bdd1040dbc3a54e8255527/href">https://medium.com/media/b1f1c32667bdd1040dbc3a54e8255527/href</a></iframe>

> _For a more detailed guide on destructuring, you can have a look at_ [_ES6 Destructuring: The Complete Guide_](https://codeburst.io/es6-destructuring-the-complete-guide-7f842d08b98f)_._

### 5. Classes

Classes are one feature that some JavaScript developers have always wanted for a long while, especially those that had prior experience with other object-oriented programming languages. JavaScript ES6 syntax enhancements finally included classes.

Although classes are now a part of JavaScript, they don’t behave the same way as in other classical programming languages. They are more like syntactic sugar to the previous methods of simulating class-based behavior. Hence, they still work based on JavaScript’s prototypal inheritance.

Prior to ES6, classes were simulated using _constructor functions_ and instance methods were basically created by enhancing the constructor function’s prototype. Hence, when the constructor function is called with the new keyword, it returns an instance of the constructor type that has access to all of the methods in its prototype. The value of this also points to the constructor instance.

Here is an example:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/ec2f26fb48df966c0408edfd808014a9/href">https://medium.com/media/ec2f26fb48df966c0408edfd808014a9/href</a></iframe>
#### Class Syntax

Classes are similar to functions in so many ways. Just as with functions, classes can be defined using _class declarations_ and _class expressions_ using the class keyword.

> As with functions, _classes are first-hand citizens_ and can be passed around as values around your program.

**However, there are a couple of significant differences between classes and functions.**

1. Class declarations are not hoisted and behave like let declarations.

2. Class constructors must always be called with new while the class methods cannot be called with new.

3. Class definition code is always in _strict mode_.

4. All class methods are non-enumerable.

5. A class name cannot be modified from within the class.

Here is our previous Rectangle type rewritten using the class syntax:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/ca81ad90062a8f2fdd92c5e6970c7bb8/href">https://medium.com/media/ca81ad90062a8f2fdd92c5e6970c7bb8/href</a></iframe>

Here, we use a special constructor() method to define the class constructor logic and also set all the instance properties. In fact, whenever the typeof operator is used on a class, it returns “function” — whether a constructor is explicitly defined for the class or not.

Also notice that the computeArea() instance method is actually added to the prototype object of the underlying class constructor function. That is the reason why using the typeof operator on Rectangle.prototype.computeArea returns “function” as well.

Based on these similarities, you can conclude that the class syntax is mostly syntactic sugar on top of the previous methods for creating custom types.

Let’s see another example that is slightly more involved to demonstrate using class expressions and passing classes as arguments to functions.

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/725d94f2b04e155d739baaaf91fe5f68/href">https://medium.com/media/725d94f2b04e155d739baaaf91fe5f68/href</a></iframe>

Here, we first created an anonymous class expression and assigned it to the Rectangle variable. Next, we created a function that accepts a Shape class as first argument and the dimensions for instantiating the Shape as the remaining arguments. The code snippet assumes that any Shape class it receives implements the computeArea() method.

#### Extending Classes

Just like with other object-oriented programming languages, JavaScript classes have functionalities for class extensions. Hence it is possible to create _derived_ or _child_ classes with modified functionality from a _parent_ class.

Let’s say we have a Rectangle class for creating rectangles and we want to create a Square class for creating rectangles with equal length and breadth (squares). Here is how we can do it:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/2ba486892928114b449357c57e2d9d32/href">https://medium.com/media/2ba486892928114b449357c57e2d9d32/href</a></iframe>

First, notice the use of the extends keyword, which indicates that we want to create a derived class from a parent class.

> The derived class inherits all the properties and methods in the prototype of the parent class including the constructor.

Also notice that we use a super reference to invoke the constructor of the parent class from within the constructor of the derived class. This is very useful when you want to enhance the functionality of an inherited method in the derived class.

For example, a call to super.computeArea() from within the Square class will call the computeArea() method implemented in the Rectangle class.

> A call to super() must be made in the constructor of every derived class and it must come before any reference is made to this.

This is because calling super() sets the value of this. However, super() should never be used in a class that is not a derived class as it is considered a syntax error.

Creating derived classes is not limited to extending classes alone. Derived classes are generally created by extending any JavaScript expression that can used as a constructor and also has a prototype — such as JavaScript functions. Hence the following is possible:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/9dbcf480d95169f5b6c3d5d28fa4da9c/href">https://medium.com/media/9dbcf480d95169f5b6c3d5d28fa4da9c/href</a></iframe>
#### Static Class Members

So far we have been looking at _instance methods_ and _properties_. There are times when you require _static methods_ or _properties_ that apply directly to the class and don’t change from one instance to another. Prior to ES6, static members can be added as follows:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/916b6f3f45455d75db9c1983fa6deda4/href">https://medium.com/media/916b6f3f45455d75db9c1983fa6deda4/href</a></iframe>

With ES6 classes, the static keyword is placed before a method name to indicate that the method is a _static method_. However, _static properties_ cannot be created from within the class. Here is how we can create static members:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/98b950e57aa1071a196ff37ced3f0a9e/href">https://medium.com/media/98b950e57aa1071a196ff37ced3f0a9e/href</a></iframe>

> Static class members are also inherited by derived classes. They can be overridden by the derived class in much the same way as instance methods and properties.

Here is a simple example:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/06b92f581eafcb88ddfd5423b2594136/href">https://medium.com/media/06b92f581eafcb88ddfd5423b2594136/href</a></iframe>
#### More Features

There are a couple more class features worth considering, one of which is **_accessor properties_**. They can be very useful in cases where you need to have properties on the class prototype.

Here is a simple example:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/3757873bf0962925f30aea9fff49be86/href">https://medium.com/media/3757873bf0962925f30aea9fff49be86/href</a></iframe>

Another nice feature of classes which is very similar to object literals is the ability to use **_computed names_** for class members. These computed names can also be used for accessor properties.

> Computed names are usually JavaScript expressions wrapped between a pair of _square brackets_([]).

Here is a simple example:

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/87330ae82b74198046bfa76c3ebb2d91/href">https://medium.com/media/87330ae82b74198046bfa76c3ebb2d91/href</a></iframe>
### Conclusion

Although this has been a pretty long article to follow through, I strongly believe that most of us must have learnt a few ways we can improve our code using some new JavaScript ES6 features.

There are other ES6-and-beyond features that should also considered for writing improved code such as _ES6 modules_, _promises_, _async functions_, _generators_, etc.

#### Clap & Follow

If you found this article insightful, feel free to give some rounds of applause if you don’t mind.

You can also follow me on Medium ([Glad Chinda](https://medium.com/u/ddcd0e9719e5)) for more insightful articles you may find helpful. You can also follow me on Twitter ([@gladchinda](https://twitter.com/@gladchinda)).

**_Enjoy coding…_**

### Plug: [LogRocket](https://logrocket.com/signup/), a DVR for web apps

[![](https://cdn-images-1.medium.com/max/1024/1*s_rMyo6NbrAsP-XtvBaXFg.png)](https://logrocket.com/signup/)<figcaption><a href="https://logrocket.com/signup/">https://logrocket.com/signup/</a></figcaption>

[LogRocket](https://logrocket.com/signup/) is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single page apps.

[Try it for free.](https://logrocket.com/signup/)

* * *