Best of Modern JavaScript — Errors, Strings, and Arrays

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at the core features of JavaScript.

No More Custom Error Constructors

We don’t have to write our own error constructors anymore with ES6 or later.

Instead, we just create a subclass of Error so that we can create errors with consistent information like a stack trace.

For instance, instead of writing:

function FancyError() {
  var parent = Error.apply(null, arguments);
  copyProperties(this, parent);
}
FancyError.prototype = Object.create(Error.prototype);
FancyError.prototype.constructor = FancyError;

function copyProperties(target, source) {
  Object.getOwnPropertyNames(source)
    .forEach(function(propKey) {
      var desc = Object.getOwnPropertyDescriptor(source, propKey);
      Object.defineProperty(target, propKey, desc);
    });
};

to create a child constructor of Error , we write:

class FancyError extends Error {
}

Instead of creating the FancyError constructor by calling the Error constructor with some arguments, we just use extends to create the subclass.

The constructor has no properties of Error , so we’ve to copy them with the copyProperties function as we did in the first example.

We get the property descriptors with the Error object and we call Object.defineProperty to create the properties.

With the second example, we don’t have to do anything.

The properties will be inherited automatically.

Objects to Maps

We can use maps to store key-value pairs with ES6 or later.

Before ES6, all we have are plain objects,.

In ES6 or later, we can use the Map constructor to create our map by writing:

const map = new Map();
map.set('foo', 'bar');
map.set('count', 1);

We call the set method with the key and value as the first and second arguments to add or update their key-value pair.

String Methods

ES6 comes with new string methods that we can use.

The startsWith method lets us check if a string starts with a given substring.

For example, we can write:

str.startsWith('x')

Likewise, strings have the endsWith method to let us check if a string ends with a given substring.

For example, we can write:

str.endsWith('x')

They both return true if the start or end with the given substring.

The includes method lets us check if a string includes a given substring.

For instance, we can write:

str.includes('x')

We call includes on str to check if 'x' is included.

It returns true if it’s included and false otherwise.

We can use the repeat method to repeat a string.

For instance, we can write:

'foo'.repeat(3)

to repeat 'foo' 3 times.

Array Methods

ES6 comes with new array methods to make manipulating arrays easier.

We can use the findIndex method to return the index of an array entry.

It takes a callback with the condition we’re looking for.

For instance, we can write:

const arr = ['foo', NaN, 'bar'];
arr.findIndex(x => Number.isNaN(x));

We passed in a callback to check if NaN is in the arr array.

This is more useful than indexOf since it doesn’t take a callback to check for.

The Array.from or the spread operator lets us convert iterable objects to arrays.

Before ES6, all we have is the slice method.

Instead of writing:

var arr1 = Array.prototype.slice.call(arguments);

in ES5 or earlier, we can write:

const args = Array.from(arguments);

or

const args = [...arguments];

with ES6 or later.

Conclusion

ES6 comes with many useful enhancements for strings, arrays, and errors.

It’s hard to live without them.