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 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 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:
In ES6, template literals were introduced for dealing with a few challenges associated with formatting and representing strings. With template literals, you can create 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, back-ticks can also be escaped in template literals if the string contains a back-tick 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:
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.
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:
If you want to output a newline in the string, you will need to use the newline escape sequence(n
) before the newline:
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:
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.
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:
Using ES6 template literals, the substitution can be done as follows:
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 into 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:
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.
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 this template literal will be the array of literal strings which is as follows:
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:
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 back-tick(
`
) delimiter of the template literal.
Here is an example using the pricing
template tag we just created:
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.
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:
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 or is undefined
. Here is how we can rewrite our previous convertToBase()
function with default parameters:
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:
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 or it is undefined
.
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.
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:
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:
There are a few things that are worth noting with regards to using rest parameters.
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.
A rest parameter cannot be used in an object literal setter.
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:
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.
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:
new
keyword with an arrow function will usually result in an error.
Arrow functions do not have arguments
object, hence named parameters and rest parameters must be used for function arguments. Duplicate named parameters are also not allowed.
The this
binding inside an arrow function cannot be modified, and it always points up to the closest non-arrow parent function.
Arrow functions may look slightly different 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(()
) must be used before the arrow(=>
) as shown in the following snippet.
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:
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:
However, there are situations where the enclosing parenthesis surrounding the parameters list cannot be omitted. Here are some of such situations:
2. When there is a default parameter, even if it is the only parameter
3. When there is a rest parameter, even if it is the only parameter
4. When there is a destructured parameter, even if it is the only parameter
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.
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 thearguments
object of a non-arrow parent function.
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 that expose a modular public interface like jQuery, etc.
Using regular JavaScript functions, IIFEs usually take one of these forms:
The arrow function syntax can also be used with IIFEs provided that the arrow function is wrapped in parentheses.
Callback functions are heavily used in asynchronous programs and also in array methods like map()
, filter()
, forEach()
, reduce()
, sort()
, find()
, findIndex()
, 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:
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:
This is how cool arrow functions can be when used as callback functions, especially when working with array methods that take callback 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 (in non-strict mode) which in the browser environment is the window
object.
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.
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:
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()
:
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 ofthis
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:
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.
To illustrate object destructuring, let’s say we have a country object that looks like the following:
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:
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:
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:
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.
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.
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:
For a more detailed guide on destructuring, you can have a look at ES6 Destructuring: The Complete Guide.
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 exactly 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 model.
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
points to the constructor instance.
Here is an example:
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.
let
declarations.
Class constructors must always be called with new
while the class methods cannot be called with new
.
Class definition code is always in strict mode.
All class methods are non-enumerable.
A class name cannot be modified from within the class.
Here is our previous Rectangle
type rewritten using the class syntax:
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.
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.
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:
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 tothis
.
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 be used as a constructor and also has a prototype — such as JavaScript functions. Hence the following is possible:
<
p id=”4e05″ class=”graf graf–p graf-after–h4″>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:
function Lion() { // constructor function } // Static property Lion.category = 'ANIMAL'; // Static method Lion.animalType = function() { return 'CAT'; } console.log(Lion.category); // "ANIMAL" console.log(Lion.animalType()); // "CAT"
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:
class Lion { // Static method static animalType() { return 'CAT'; } } // Static property Lion.category = 'ANIMAL'; console.log(Lion.category); // "ANIMAL" console.log(Lion.animalType()); // "CAT"
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:
class Lion { // Static method static animalType() { return 'CAT'; } } // Static property Lion.category = 'ANIMAL'; // Derived Lioness class class Lioness extends Lion { // Override static method static animalType() { return `${super.animalType()}::LION`; } } console.log(Lioness.category); // "ANIMAL" console.log(Lioness.animalType()); // "CAT::LION"
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:
class Person { constructor(firstname, lastname) { this.firstname = firstname || 'Glad'; this.lastname = lastname || 'Chinda'; } get fullname() { return `${this.firstname} ${this.lastname}`; } set fullname(value) { const [ firstname, lastname ] = value.split(' '); if (firstname) this.firstname = firstname; if (lastname) this.lastname = lastname; } } const me = new Person; console.log(me.fullname); // "Glad Chinda" me.fullname = "Jamie"; console.log(me.fullname); // "Jamie Chinda" me.fullname = "John Doe (Junior)"; console.log(me.fullname); // "John Doe"
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:
const prefix = 'compute'; class Square { constructor(length) { this.length = length || 10; } // A computed class method [`${prefix}${Square.prototype.constructor.name}Area`]() { return this.length * this.length; } } const square = new Square; console.log(square.computeSquareArea()); // 100
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 be considered for writing improved code such as ES6 modules, promises, async functions, generators, etc.
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…
Install LogRocket via npm or script tag. LogRocket.init()
must be called client-side, not
server-side
$ npm i --save logrocket // Code: import LogRocket from 'logrocket'; LogRocket.init('app/id');
// Add to your HTML: <script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script> <script>window.LogRocket && window.LogRocket.init('app/id');</script>
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up nowBackdrop and background have similar meanings, as they both refer to the area behind something. The main difference is that […]
AI tools like IBM API Connect and Postbot can streamline writing and executing API tests and guard against AI hallucinations or other complications.
Explore DOM manipulation patterns in JavaScript, such as choosing the right querySelector, caching elements, improving event handling, and more.
`window.ai` integrates AI capabilities directly into the browser for more sophisticated client-side functionality without relying heavily on server-side processing.