JavaScript is one of the most popular programming languages in the world.
This is because, since 2015, JavaScript has added lots of great features that are meant to replace old features from earlier versions.
In this article, we’ll look at ES6 string and array methods that replace earlier methods.
From indexOf to startsWith
ES6 introduced the string’s startsWith instance method that can be used as a replacement for the indexOf method.
For instance, given the following string:
const str = 'foobar';
Then we can replace:
str.indexOf('foo') === 0
With:
str.startsWith('foo')
If we want to check that the string str starts with 'foo'.
startsWith is much shorter than indexOf and we don’t have to check by index.
From indexOf to endsWith
The endsWith method is even more useful than the startsWith method since there was no easy way to check if a string ended with the given suffix.
Without endsWith, we had to write a function like the following:
const endsWith = (str, suffix) => {
const index = str.indexOf(suffix);
return index >= 0 &&
index === str.length - suffix.length;
}
We had to check that the suffix was located in the string with str.indexOf(suffix) by checking that the index was 0 or larger. Then we had to check that the index was located at the end of the string by checking that it was in str.length — suffix.length.
Then given the following string:
const str = 'foobar';
We would write:
endsWith(str, 'bar')
With endsWith, we just write:
str.endsWith('bar')
It’s convenient that we don’t have to define our own function to check if a string ends with a given suffix string.
From indexOf to includes
The includes method introduced with ES6 checks that a string is located in a given string.
Therefore, given the following string:
const str = 'foobarbaz';
We can check if the substring exists in a string by writing:
str.indexOf('bar') >= 0
With ES6, we can instead write:
str.includes('bar')
This is shorter than indexOf.
From Array.prototype.indexOf to Array.prototype.findIndex
ES6 introduced the findIndex array instance method. It’s useful for finding the index of anything. It takes a callback that returns the condition of what we want to search for.
indexOf doesn’t work well with objects because it only finds the object if it’s the same reference as the given one.
For instance, indexOf works great with primitive values like numbers:
arr.indexOf(1)
It’s shorter than using findIndex as follows:
arr.findIndex(a => a === 1)
They both return the index of 1, which is 0.
However, when we’re searching for the index of an object, indexOf isn’t going to work. Given the following array:
If we write:
arr.indexOf({
name: 'Alex'
})
Then we’ll get -1 because { name: ‘Alex’ } isn’t the same reference as the one in the array.
Therefore, findIndex will be useful here:
arr.findIndex(a => a.name === 'Alex')
This will return 1, which is the correct index because we return a condition that compares the value of the name property.
From Array.prototype.slice() to Array.from() or the Spread Operator
The slice and from instances can both be replaced with the spread operator in most cases.
For instance, we no longer need slice to convert array-like objects to arrays.
If we want to convert the arguments object into an array, instead of writing:
const arr = Array.prototype.slice.call(arguments);
We write:
const arr = [...arguments];
It’s much shorter and we don’t have to call call and pass in arguments as the this value.
In both examples, we get [1, 2, 3] assigned to arr when we have the given function:
function foo() {
const arr = [...arguments];
}
And call it by writing:
foo(1, 2, 3);
We can also replace most use cases of the Array.from method with the spread operator.
As long as the object we pass into Array.from is an array or another kind of iterable object, we can use the spread operator with it.
Therefore, instead of writing:
function foo() {
const arr = Array.from(arguments);
}
We can write:
function foo() {
const arr = [...arguments];
}
The only case where Array.from is useful is when converting objects that have integers as their property identifiers and the length property to an array.
For instance, we can write:
To convert:
To [“foo”, “bar”, “baz”].
We can’t use the spread operator to convert that to an array since it’s not an iterable object.
Conclusion
Aside from a few edge cases, the new ES6 string and array functions are great additions that can be used to shorten code in many places.
The endsWith string instance method saves the most code. Shorter, self-explanatory code is easier on everyone’s brain.
