JavaScript ES6: 5 new abstractions to improve your code

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

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

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:

https://medium.com/media/b42479358bc9cfd9185a4f7530b8a845/href

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:

https://medium.com/media/60cf776e0518e75aff9758b4da10fa8d/href

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

https://medium.com/media/00fd84c220ecaf2492b71c1bb4fcd4ae/href

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:

https://medium.com/media/176e98023c16fefe45c2de5b5135b044/href

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:

https://medium.com/media/8c15655e2ac41cb89a5498e63d5429d8/href

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

https://medium.com/media/14983f0bcc194dcd42f94c5f5349ae97/href

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:

https://medium.com/media/c20167db2c78d1bb2b6fea6eb95c00af/href

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:

https://medium.com/media/b7b82ffd4a099d20c0931870eeb61491/href

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:

https://medium.com/media/94383c4d7e3ca46b9add87379cf86fc8/href

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:

https://medium.com/media/e57da2d27aa4c4fcee1be6ba1efdcef2/href

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:

https://medium.com/media/679f9ce267cf5c9736e15c970dc34e75/href

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:

https://medium.com/media/9805a907faaee62664bddedb26347f52/href

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:

https://medium.com/media/05191e1fdbdcec4e8e69b4fab1c6b54f/href

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:

https://medium.com/media/702b5420c65ec054beba646b7bdefe37/href

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:

https://medium.com/media/40326966067088a6ae32804da0f86c73/href

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:

https://medium.com/media/f6e1af526de4a54035657ff9131def6c/href

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.

https://medium.com/media/aea6ab25fc6c0f4c1066522b7185ed2b/href

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:

https://medium.com/media/b2e0e288843029ed0e732669b6962c6a/href

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:

https://medium.com/media/dd669a8529290c56995a83151c84b505/href

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

   https://medium.com/media/f1a6eeb5f3ad8de1ac2a2c9e6575a66e/href

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

https://medium.com/media/cc25be3b268a059bc14a8a28d89ca01c/href

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

https://medium.com/media/3c11712e82a1652e1d1ba1b1a3a4d7dd/href

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

https://medium.com/media/94e442094d8f74d6d323b1cbd009dac1/href

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.

https://medium.com/media/6f50d1eb433bc156f899ce7264f441d6/href

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.

https://medium.com/media/62f8d1bede2f33bdd428ad6dd0207691/href

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:

https://medium.com/media/e43f8fff70249d2e8c9f7e6c4f53ce58/href

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

https://medium.com/media/0469463950b6eff9c7d11fef12fa9b57/href

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:

https://medium.com/media/d809623a94963fc362f42cef00e918d4/href

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:

https://medium.com/media/1304d28f895187273bbfe26304d5856c/href

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.

https://medium.com/media/aa624fd3252955cf37cf95ef8ebbb0f6/href

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:

https://medium.com/media/0ac5f83b6f1b92fd7a66c6878548b6a7/href

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():

https://medium.com/media/c91ad40035c75ba81ed53b0f970b437a/href

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:

https://medium.com/media/900a9dae98f29103cfa5575a0201b95a/href

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:

https://medium.com/media/d7a827d4b5540267e4922b60120f5127/href

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:

https://medium.com/media/63e5f87c31f10a03c77a2fc6577faa35/href

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:

https://medium.com/media/8363f717acf66949cd017700870a503e/href

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:

https://medium.com/media/68c94bfe2af346035753122caf2daf96/href

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.

https://medium.com/media/2a7b92a324522690f2b86012eecbefb1/href

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.

https://medium.com/media/45c7a96ed7931bfc8749b0e40a52ee5a/href

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:

https://medium.com/media/b1f1c32667bdd1040dbc3a54e8255527/href

For a more detailed guide on destructuring, you can have a look at ES6 Destructuring: The Complete Guide.

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:

https://medium.com/media/ec2f26fb48df966c0408edfd808014a9/href

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:

https://medium.com/media/ca81ad90062a8f2fdd92c5e6970c7bb8/href

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.

https://medium.com/media/725d94f2b04e155d739baaaf91fe5f68/href

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:

https://medium.com/media/2ba486892928114b449357c57e2d9d32/href

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:

https://medium.com/media/9dbcf480d95169f5b6c3d5d28fa4da9c/href

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:

https://medium.com/media/916b6f3f45455d75db9c1983fa6deda4/href

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:

https://medium.com/media/98b950e57aa1071a196ff37ced3f0a9e/href

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:

https://medium.com/media/06b92f581eafcb88ddfd5423b2594136/href

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:

https://medium.com/media/3757873bf0962925f30aea9fff49be86/href

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:

https://medium.com/media/87330ae82b74198046bfa76c3ebb2d91/href

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) for more insightful articles you may find helpful. You can also follow me on Twitter (@gladchinda).

Enjoy coding…

Plug: LogRocket, a DVR for web apps

https://logrocket.com/signup/

LogRocket 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.

---

Comments

[Kushan Joshi]

Brian, this looks like a great article but the formatting issues are hampering the reading experience.
It would be really great if you could:

1. Post the code snippets directly instead of asking the user to click to see each individual GitHub gist.
2. There are a bunch of places where the triple back tick (`) is incorrectly parsed.