8

Is there any advantage to Array.prototype.includes() over Array.prototype.indexOf() depending on browsers (Chrome, Firefox) and needle item position (at the begging, middle, ending of the array)?

Array.prototype.includes vs. Array.prototype.indexOf There is no browser specific information, there is no position in the array specific information, and I don't ask about NaN value.

Manohar Reddy Poreddy
  • 25,399
  • 9
  • 157
  • 140
Luther Lisle
  • 83
  • 1
  • 1
  • 5
  • 1
    There's a jsperf at [this](https://stackoverflow.com/a/45264728/7852370) answer. – Karl Reid Dec 05 '17 at 18:07
  • Both functions return different values and behave slightly differently. – Felix Kling Dec 05 '17 at 18:08
  • If you need to support old browsers (including any version of IE), don't use `includes`, Otherwise, use it when it makes the code clearer and you don't need a specific index. This isn't something where you'd expect any meaningful difference in behavior, `includes` just avoids the need to explicitly check the return value. There's nothing algorithmically superior about either option (browser optimizations to either could change at any time), so go for clarity. – ShadowRanger Dec 05 '17 at 18:09
  • 1
    Possible duplicate of [Array.prototype.includes vs. Array.prototype.indexOf](https://stackoverflow.com/questions/35370222/array-prototype-includes-vs-array-prototype-indexof) – ibrahim mahrir Dec 05 '17 at 18:11
  • StackOverflow will never be able to give you reliable information on performance comparisons, because it changes with time and implementation updates. The main performance difference is likely that `.indexOf()` operation needs to check for the existence of each index (detect holes), whereas `.includes()` does not. But even there, there's no guarantees. –  Dec 05 '17 at 18:12

4 Answers4

8

I made a test using array with 10 000 numeric values, here is results:

Chrome:

  • beginning
    • includes (22,043,904 ops/sec)
    • indexOf (136,512,737 ops/sec)
  • middle
    • includes (8,361 ops/sec)
    • indexOf (31,296 ops/sec)
  • ending
    • includes (4,018 ops/sec)
    • indexOf (95,221 ops/sec)

Firefox:

  • beginning
    • includes (34,087,623 ops/sec)
    • indexOf (33,196,839 ops/sec)
  • middle
    • includes (84,880 ops/sec)
    • indexOf (86,612 ops/sec)
  • ending
    • includes (25,253 ops/sec)
    • indexOf (14,994 ops/sec)

So, indexOf() in Chrome works much faster than includes() in all positions.

In Firefox both indexOf() and includes() works almost similar.

Carl Schultz
  • 96
  • 1
  • 3
    As this answer seems to still being read and taken as reference, I feel it's needed to say that Chrome's implementation of `includes` is now as fast as `indexOf`. – Seblor Mar 23 '20 at 16:01
3

If you wonder about performances, here is a JSperf test that tend to show that more the time pass, more includes() will be faster than indexOf.

JSperf

IMHO, i also prefer to write if (arr.includes(el)) {} since it is clearer and more maintainable than if (arr.indexOf(el) !== -1) {}

Johnny Gibby
  • 41
  • 1
1

Here is the JSperf to compare includes and indexOf, and they are very close, but includes() will be faster than indexOf in latest chrome.

My understanding is not all browsers support includes though this API is easier to understand and maintain.

Jim
  • 291
  • 2
  • 10
1

because jsperf is down, here result from jsben.ch with chrome

Random 10k string almost same

  • indexOf: 3.632.773 (100%)
  • includes: 3.625.316 (99.79%)

Random 10k array huge diff

  • indexOf: 3.441.975 (100%)
  • includes: 197.796 (5.75%)
uingtea
  • 6,002
  • 2
  • 26
  • 40