JavaScript: includes vs indexOf

Starting with ECMAScript 2016, a new includes method for working with arrays has appeared in JavaScript. At its core, it is very much like indexOf. In this article I want to consider in more detail why the etod method was introduced and how it differs from indexOf.

Arrays

So, the Array.prototype.includes method determines whether the required value is in the array and returns true or false . Thus, unlike indexOf, which returns an integer, includes returns a boolean value. This innovation will help developers write cleaner and cleaner code.



For example, here is a standard example of checking whether an element is contained in an array using indexOf:

')

var numbers = [3, 5, 8, 11, 23, 7]; if (numbers.indexOf(1) !== -1) { // ... } 

Using includes, you can write the same thing like this:

 var numbers = [3, 5, 8, 11, 23, 7]; if (numbers.includes(1)) { // ... } 

Also, when introducing this method, some non-obvious features that were noticed when working with indexOf were taken into account. With regard to NaN values, the behavior of this method is different.



Consider an example:

 var numbers = [3, 5, 8, 11, 23, 7, NaN]; if (numbers.indexOf(NaN) !== -1) { //     } if (numbers.includes(NaN)) { //    } 

Thus, indexOf ( NaN ) always returns -1, regardless of whether this value is contained in an array, and includes ( NaN ) returns true or false , depending on whether this element is in the array or not.

Performance

The performance evaluation of javascript methods is not so obvious because, in fact, in different browsers the same function can be implemented differently depending on the language of the browser itself. In addition, a lot depends on the computer on which this assessment is made. But, nevertheless, I tried to do a little analysis.



I created an array of 10,000 positive integers and used the site jsbench.imtqy.com for analysis. In both cases, for the purity of the experiment, the same array was used. The assessment was made in browsers Chrome 53 and Firefox 48.

Chrome
	includes	indexOf
there is an element in the middle of the array	8.361 ops / sec ± 0.38%	31.296 ops / sec ± 0.65%
there is an element at the beginning of the array	22.043.904 ops / sec ± 1.89%	136,512,737 ops / sec ± 2.06%
required element no in array	4,018 ops / sec ± 0.71%	95,221 ops / sec ± 0.53%

Firefox
	includes	indexOf
there is an element in the middle of the array	84.880 ops / sec ± 0.59%	86,612 ops / sec ± 1.35%
there is an element at the beginning of the array	34,087,623 ops / sec ± 0.99%	33,196,839 ops / sec ± 0.84%
required element no in array	25,253 ops / sec ± 2.75%	14.994 ops / sec ± 1.16%

It turns out that in Chrome indexOf always works faster, and in Firefox there is practically no tangible difference (except for the case when there is no required element in the array). And the behavior of the new method in Firefox seems more logical, since, in general, indexOf and includes should have the same computational complexity in logic.

Strings

A similar method was added to work with strings since ECMAScript 2015. Earlier in Firefox in versions 18 to 39, this method existed under the name of contains, however, due to compatibility issues, it was renamed includes ().



In conclusion, it should be noted that this method is not yet supported by all browsers.

Browser	Array	Strings
Chrome	47	41
Firefox	43	40
IE	not	not
Opera	34	not
Safari	9	9