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:
const greeting = `Good morning!`;
const shortcut = ``cmd` + `shift` + `G``;
console.log(greeting); // "Good morning!"
console.log(shortcut); // "`cmd` + `shift` + `G`"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:
const message = "Hello Glad,
Your meeting is scheduled for noon today.";
console.log(message);
// Hello Glad, Your meeting is scheduled for noon today.If you want to output a newline in the string, you will need to use the newline escape sequence(n) before the newline:
const message = "Hello Glad,n
Your meeting is scheduled for noon today.";
console.log(message);
// Hello Glad,
// Your meeting is scheduled for noon today.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:
const html = (`
<html>
<body>
Template literals are super cool.
</body>
</html>
`).trim();
console.log(html);
// <html>
// <body>
// Template literals are super cool.
// </body>
// </html>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:
const price = 24.99;
console.log("The item costs $" + price + " on the online store.");
// The item costs $24.99 on the online store.Using ES6 template literals, the substitution can be done as follows:
const price = 24.99;
console.log(`The item costs $${price} on the online store.`);
// The item costs $24.99 on the online store.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:
Learn more →const price = 24.99;
const discount = 10;
console.log(`The item costs $${(price * (100 - discount) / 100).toFixed(2)} on the online store.`);
// The item costs $22.49 on the online store.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 price of ',
' units of the item on the online store is $',
'.'
]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:
function pricing(literals, ...replacements) {
// Initialize the final string
let finalString = '';
for (let i = 0; i < replacements.length; i++) {
// Get the current literal and replacement
const literal = literals[i];
const replacement = replacements[i];
// Trim trailing whitespaces from the current literal
const trimmed = literal.trimRight();
const length = trimmed.length;
// Check if current replacement is a number
const isNumber = typeof replacement === 'number';
// Check if current literal string ends with $
const isPrice = /$$/.test(trimmed);
// Check if number is followed by literal that ends with $
// and use the desired formatting
finalString += (isNumber && isPrice)
? `${trimmed.substr(0, length - 1).trimRight()} USD ${replacement.toFixed(2)}`
: `${literal}${replacement}`;
}
// Attach the last literal to the final string
return finalString + literals[literals.length - 1];
}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:
const price = 24.99;
const discount = 10;
const quantity = 4;
const totalPrice = quantity * price * (100 - discount) / 100;
// WITHOUT TEMPLATE TAG
console.log(`The price of ${quantity} units of the item on the online store is $${totalPrice}.`);
// The price of 4 units of the item on the online store is $89.964.
// WITH TEMPLATE TAG (pricing)
console.log(pricing`The price of ${quantity} units of the item on the online store is $${totalPrice}.`);
// The price of 4 units of the item on the online store is USD 89.96.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:
// METHOD 1: Short-circuiting
// Using the logical OR (||) operator
function convertToBase(number, base) {
number = parseInt(number) || 0;
base = parseInt(base) || 10;
return number.toString(base);
}
// METHOD 2: Ternary (?:) operator
// With additional type check (safer option)
function convertToBase(number, base) {
number = (typeof number !== "undefined") ? parseInt(number) : 0;
base = (typeof base !== "undefined") ? parseInt(base) : 10;
return number.toString(base);
}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:
function convertToBase(number = 0, base = 10) {
return parseInt(number).toString(parseInt(base));
}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:
function getDefaultNumberBase() {
return 10;
}
function convertToBase(number = 0, base = getDefaultNumberBase()) {
return parseInt(number).toString(parseInt(base));
}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
argumentsobject, 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:
function sum() {
// Convert arguments to array
var args = Array.prototype.slice.call(arguments);
// Compute sum using array reduce()
return args.reduce(function(a, b) { return a + Number(b) }, 0);
}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:
function sum(...args) {
// Compute sum using array reduce()
return args.reduce((a, b) => a + Number(b), 0);
}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:
const scores = [42, 68, 49, 83, 72, 65, 77, 74, 86, 51, 69, 47, 53, 58, 51];
const totalScore = sum.apply(null, scores);
const averageScore = totalScore / scores.length;
console.log(totalScore); // 945
console.log(averageScore); // 63In 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.
// USING REGULAR FUNCTION
const getTimestamp = function() {
return +new Date;
}
// USING ARROW FUNCTION
const getTimestamp = () => {
return +new Date;
}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:
// Returned object literal wrapped in parentheses
const getProfile = () => ({
name: 'Glad Chinda',
gender: 'Male',
birthday: 'August 15'
});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:
// Pair of parentheses is omitted
const computeSquare = num => num * num;However, there are situations where the enclosing parenthesis surrounding the parameters list cannot be omitted. Here are some of such situations:
// Pair of parentheses cannot be omitted
const addNumbers = (numA, numB) => numA + numB;2. When there is a default parameter, even if it is the only parameter
// The traditional function body wrapped in curly braces
// is used here to aid readability.
// Pair of parentheses cannot be omitted
const factorial = (n = 1) => {
return (n <= 1) ? 1 : n * factorial(n - 1);
}3. When there is a rest parameter, even if it is the only parameter
// Pair of parentheses cannot be omitted
const range = (...numbers) => Math.max(...numbers) - Math.min(...numbers);4. When there is a destructured parameter, even if it is the only parameter
// Pair of parentheses cannot be omitted
const extractName = ({ name = null }) => name;
console.log(extractName({
name: 'Glad Chinda',
role: 'author'
})); // "Glad Chinda"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.
const snakeCase = value => {
const regex = /[A-Z][^A-Z]+/g;
const withoutSpaces = value.trim().replace(/s+/g, '_');
const caps = withoutSpaces.match(regex);
const splits = withoutSpaces.split(regex);
let finalString = splits.shift();
for (let i = 0; i < splits.length; i++) {
finalString += `${caps[i]}_${splits[i]}_`;
}
return finalString
.toLowerCase()
.replace(/_+/g, '_')
.replace(/^_?(.+?)_?$/, '$1');
}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
argumentsobject does not exist for arrow functions. However, they can have access to theargumentsobject of a non-arrow parent function.
function fetchLastScore() {
return () => {
console.log(arguments[arguments.length - 1]);
}
}
fetchLastScore(42, 68, 49, 83, 72)(); // 72One 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:
// FIRST FORM:
// Wrap the function expression in parentheses
// The invocation expression comes afterwards
(function(a, b) {
// ...function body here
})(arg1, arg2);
// SECOND FORM:
// Wrap the function expression together with
// the invocation expression in parentheses
(function(a, b) {
// ...function body here
}(arg1, arg2));The arrow function syntax can also be used with IIFEs provided that the arrow function is wrapped in parentheses.
// IIFE: With Arrow Function
// The arrow function is called immediately with a list of arguments
// and the return value is assigned to the `compute` variable
const compute = ((...numbers) => {
// Private members
const length = numbers.length;
const min = Math.min(...numbers);
const max = Math.max(...numbers);
const sum = numbers.reduce((a, b) => a + Number(b), 0);
// Expose an inteface of public methods
return {
sum: () => sum,
avg: () => sum / length,
range: () => max - min
};
})(42, 68, 49, 83, 72, 65, 77, 74, 86, 51, 69, 47, 53, 58, 51);
// Access the exposed public methods
console.log(compute.sum()); // 945
console.log(compute.avg()); // 63
console.log(compute.range()); // 44Callback 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:
// WITHOUT ARROW FUNCTION
const sum = numbers.reduce(function(a, b) {
return a + Number(b);
}, 0);
// WITH ARROW FUNCTION
const sum = numbers.reduce((a, b) => a + Number(b), 0);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:
const flattenDeep = (...args) => args.reduce(
(a, b) => [].concat(a, Array.isArray(b) ? flattenDeep(...b) : b)
);
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.
thisresolves 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.
function Person(name) {
this.name = name;
}
var person = Person('Glad Chinda');
console.log(person); // undefined
console.log(name); // "Glad Chinda"
console.log(window.name); // "Glad Chinda"Another common source of confusion with this is in DOM event listeners.
In event listeners,
thispoints to the DOM element the event is targeted at.
Consider the following code snippet:
function ScrollController(offset) {
this.offsets = { offsetY: offset };
}
ScrollController.prototype.registerScrollHandler = function() {
window.addEventListener('scroll', function(event) {
if (window.scrollY === this.offsets.offsetY) {
console.log(`${this.offsets.offsetY}px`);
}
}, false);
}
var controller = new ScrollController(100);
controller.registerScrollHandler();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():
// Using .bind() on event listener to resolve the value of `this`
ScrollController.prototype.registerScrollHandler = function() {
this.element.addEventListener('scroll', (function(event) {
if (window.scrollY === this.offsets.offsetY) {
console.log(`${this.offsets.offsetY}px`);
}
}).bind(this), false);
}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
thisbinding. Hence, arrow functions use the value ofthisfrom 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:
// Using arrow function for event listener
ScrollController.prototype.registerScrollHandler = function() {
this.element.addEventListener('scroll', event => {
if (window.scrollY === this.offsets.offsetY) {
console.log(`${this.offsets.offsetY}px`);
}
}, false);
}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:
const country = {
name: 'Nigeria',
region: 'Africa',
codes: {
cca2: 'NG',
dialcode: '+234'
},
cities: [
'Lagos',
'Abuja',
'Port Harcourt',
'Benin',
'Ibadan',
'Calabar',
'Warri'
]
}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:
function countryInfo(country) {
const name = country.name;
const region = country.region || 'the world';
const code2 = country.codes.cca2;
const dialcode = country.codes.dialcode;
const cities = country.cities;
return (
`
COUNTRY TIPS:
${name}(${code2}) is one of the largest countries in ${region}.
There are so many important cities you can visit in ${name}
and here are some of them:
${cities.slice(0, 3).join(', ')} and ${cities.slice(3).length} others.
Phone numbers in ${name} usually begin with ${dialcode}.
`
).trim();
}
console.log(countryInfo(country));
// COUNTRY TIPS:
//
// Nigeria(NG) is one of the largest countries in Africa.
// There are so many important cities you can visit in Nigeria
// and here are some of them:
//
// Lagos, Abuja, Port Harcourt and 4 others.
//
// Phone numbers in Nigeria usually begin with +234.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:
// OLD METHOD
const name = country.name;
const region = country.region || 'the world';
const code2 = country.codes.cca2;
const dialcode = country.codes.dialcode;
const cities = country.cities;
// ES6 DESTRUCTURING
const {
name,
region = 'the world',
codes: { cca2: code2, dialcode },
cities
} = country;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:
const person = {
name: 'Glad Chinda',
birthday: 'August 15'
}
// FUNCTION WITHOUT DESTRUCTURED PARAMETERS
function aboutPerson(person = {}) {
const { name, birthday, age = 'just a few' } = person;
console.log(`My name is ${name} and I'm ${age} years old. I celebrate my birthday on ${birthday} every year.`);
}
// FUNCTION WITH DESTRUCTURED PARAMETERS
function aboutPerson({ name, birthday, age = 'just a few' } = {}) {
console.log(`My name is ${name} and I'm ${age} years old. I celebrate my birthday on ${birthday} every year.`);
}
aboutPerson(person);
// My name is Glad Chinda and I'm just a few years old. I celebrate my birthday on August 15 every year.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.
// Array Destructuring
const [red, green, blue] = color;
console.log(`R: ${red}, G: ${green}, B: ${blue}`);
// R: 240, G: 80, B: 124For 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.
const [,, blue] = color;
console.log(`B: ${blue}`);
// B: 124Array 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:
function fetchDatabaseRecords(fromDate, toDate) {
if (fromDate > toDate) {
// swap the dates using array destructuring
[fromDate, toDate] = [toDate, fromDate];
}
// ...execute database query
}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:
// The Rectangle constructor
function Rectangle(length, breadth) {
this.length = length || 10;
this.breadth = breadth || 10;
}
// An instance method
Rectangle.prototype.computeArea = function() {
return this.length * this.breadth;
}
// Create an instance using the new keyword
var rectangle = new Rectangle(50, 20);
console.log(rectangle.computeArea()); // 1000
// rectangle is also an instance of Object
// Due to JavaScript's prototypal inheritance
console.log(rectangle instanceof Rectangle); // true
console.log(rectangle instanceof Object); // trueClasses 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:
class Rectangle {
// The class constructor
constructor(length, breadth) {
this.length = length || 10;
this.breadth = breadth || 10;
}
// An instance method
computeArea() {
return this.length * this.breadth;
}
}
// Create an instance using the new keyword
const rectangle = new Rectangle(50, 20);
console.log(rectangle.computeArea()); // 1000
// rectangle is also an instance of Object
// Due to JavaScript's prototypal inheritance
console.log(rectangle instanceof Rectangle); // true
console.log(rectangle instanceof Object); // true
console.log(typeof Rectangle); // function
console.log(typeof Rectangle.prototype.computeArea); // functionHere, 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.
// An anonymous class expression
// assigned to a variable
const Rectangle = class {
// The class constructor
constructor(length, breadth) {
this.length = length || 10;
this.breadth = breadth || 10;
}
// An instance method
computeArea() {
return this.length * this.breadth;
}
}
// A class passed as argument to a function
// Notice how the class is instantiated with new
const computeArea = (Shape, ...dimensions) => {
return (new Shape(...dimensions)).computeArea();
}
console.log(computeArea(Rectangle, 50, 20)); // 1000Here, 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:
class Rectangle {
constructor(length, breadth) {
this.length = length || 10;
this.breadth = breadth || 10;
}
computeArea() {
return this.length * this.breadth;
}
}
// The Square class extends the Rectangle class
class Square extends Rectangle {
constructor(length) {
// super() calls the constructor of the parent class
super(length, length);
}
}
const square = new Square;
// Square inherits the methods and properties of Rectangle
console.log(square.length); // 10
console.log(square.breadth); // 10
console.log(square.computeArea()); // 100
// square is also an instance of Rectangle
console.log(square instanceof Square); // true
console.log(square instanceof Rectangle); // trueFirst, 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:
function Person(name) {
this.name = name || 'Glad Chinda';
}
Person.prototype.getGender = function() {
return this.gender;
}
class Male extends Person {
constructor(name) {
super(name);
this.gender = 'MALE';
}
}
const me = new Male;
// Male inherits the methods and properties of Person
console.log(me.getGender()); // "MALE"
// me is also an instance of Person
console.log(me instanceof Male); // true
console.log(me instanceof Person); // true<
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 nowThe proper handling of JavaScript closures is essential to any JavaScript project. In React projects specifically, closures can manifest themselves […]
filter() method in JavaScriptLearn about the array filter() method, from its basic syntax and use cases to more advanced techniques like chaining with map() and reduce().
CSS has come a long way, making vertical alignment easier than ever. Learn about this concept and explore some of the best CSS vertical alignment techniques.
Use Flutter to build browser-based app demos that help clients visualize the product, speed up buy-in, and close deals faster.
