Beyond the improved readability, is there any advantage to includes
over indexOf
? They seem identical to me.
What is the difference between this
var x = [1,2,3].indexOf(1) > -1; //true
And this?
var y = [1,2,3].includes(1); //true
Beyond the improved readability, is there any advantage to includes
over indexOf
? They seem identical to me.
What is the difference between this
var x = [1,2,3].indexOf(1) > -1; //true
And this?
var y = [1,2,3].includes(1); //true
tl;dr: NaN
is treated differently:
[NaN].indexOf(NaN) > -1
is false
[NaN].includes(NaN)
is true
From the proposal:
Motivation
When using ECMAScript arrays, it is commonly desired to determine if the array includes an element. The prevailing pattern for this is
if (arr.indexOf(el) !== -1) { ... }
with various other possibilities, e.g.
arr.indexOf(el) >= 0
, or even~arr.indexOf(el)
.These patterns exhibit two problems:
- They fail to "say what you mean": instead of asking about whether the array includes an element, you ask what the index of the first occurrence of that element in the array is, and then compare it or bit-twiddle it, to determine the answer to your actual question.
- They fail for
NaN
, asindexOf
uses Strict Equality Comparison and thus[NaN].indexOf(NaN) === -1
.Proposed Solution
We propose the addition of an
Array.prototype.includes
method, such that the above patterns can be rewritten asif (arr.includes(el)) { ... }
This has almost the same semantics as the above, except that it uses the SameValueZero comparison algorithm instead of Strict Equality Comparison, thus making
[NaN].includes(NaN)
true.Thus, this proposal solves both problems seen in existing code.
We additionally add a
fromIndex
parameter, similar toArray.prototype.indexOf
andString.prototype.includes
, for consistency.
Further information:
If you wonder about performances, for the moment, indexOf is faster, but this JSperf test tend to show that more the time pass, more includes()
will be faster than indexOf
(i guess it will be optimized further).
IMHO, i also prefer to write if (arr.includes(el)) {}
since it is clearer and more maintainable than if (arr.indexOf(el) !== -1) {}
.indexOf()
and .includes()
methods can be used to search for an element in an array or to search for a character/substring in a given string.
(Link to ECMAScript Specification)
indexOf
uses Strict Equality Comparison whereas includes
uses the SameValueZero algorithm. Because of this reason, the following two points of differences arise.
As pointed out by Felix Kling, the behavior is different in case of NaN
.
let arr = [NaN];
arr.indexOf(NaN); // returns -1; meaning NaN is not present
arr.includes(NaN); // returns true
undefined
.let arr = [ , , ];
arr.indexOf(undefined); // returns -1; meaning undefined is not present
arr.includes(undefined); // returns true
(Link to ECMAScript Specification)
1.
If you pass a RegExp to indexOf
, it will treat the RegExp as a string and will return the index of the string, if found. However, if you pass a RegExp to includes
, it will throw an exception.
let str = "javascript";
str.indexOf(/\w/); // returns -1 even though the elements match the regex because /\w/ is treated as string
str.includes(/\w/); // throws TypeError: First argument to String.prototype.includes must not be a regular expression
As GLAND_PROPRE pointed out, includes
may be a little (very tiny) bit slower (for it needs to check for a regex as the first argument) than indexOf
but in reality, this doesn't make much difference and is negligible.
String.prototype.includes()
was introduced in ECMAScript 2015 whereas Array.prototype.includes()
was introduced in ECMAScript 2016. With regards to browser support, use them wisely.
String.prototype.indexOf()
and Array.prototype.indexOf()
are present in ES5 edition of ECMAScript and hence supported by all browsers.
Conceptually you should use indexOf when you want to use the position indexOf just give you to extract the value or operate over the array, i.e using slice, shift or split after you got the position of the element. On the other hand, Use Array.includes only to know if the value is inside the array and not the position because you don't care about it.
indexOf()
and includes()
can both be used to find elements in an array, however each function yields different return values.
indexOf
returns a number (-1
if element not present in the array, or array position if the element is present).
includes()
returns a boolean value (true
or false
).
indexOf is the older way to check if something is in the array , the new method is better because you don't have to write a condition for being (-1) , so that's why for use the include() method that returns you a boolean.
array.indexOf('something') // return index or -1
array.includes('something') // return true of false
so for finding index the first one is better but for checking being or not the second method is more useful.