Array.prototype.includes vs. Array.prototype.indexOf

by

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, as indexOf 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 as

if (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 to Array.prototype.indexOf and String.prototype.includes, for consistency.

Further information:

More Related Contents:

  1. Can I fire and forget a promise in nodejs (ES7)?
  2. How do I destructure all properties into the current scope/closure in ES2015?
  3. How can I clone a JavaScript object except for one key?
  4. How can I `await` on an Rx Observable?
  5. Best way to polyfill ES6 features in React app that uses create-react-app
  6. Clean way to keep original variable and destructure at the same time
  7. VSCode Linter ES6 ES7 Babel linter
  8. Can I catch an error from async without using await?
  9. jQuery/JavaScript collision detection
  10. What browsers support HTML5 WebSocket API?
  11. Prevent jQuery UI dialog from setting focus to first textbox
  12. JavaScript: Is there a way to get Chrome to break on all errors?
  13. Detecting Unsaved Changes
  14. How to search JSON tree with jQuery
  15. Convert canvas to PDF
  16. Bulk upsert in MongoDB using mongoose
  17. Leaflet map not displayed properly inside tabbed panel
  18. window.focus(), self.focus() not working in firefox
  19. Can javascript access iframe elements from the parent page?
  20. Get a polyline from Google maps directions V3
  21. Handling Asynchronous Calls (Firebase) in functions
  22. How to set _id to db document in Mongoose?
  23. How to use Array.prototype.filter with async?
  24. What is client side javascript and what is server side javascript?
  25. Prevent iOS bounce without disabling scroll ability
  26. How to set up Python server side with javascript client side
  27. Regex: only alphanumeric but not if this is pure numeric
  28. Error: Permission denied to access property ‘handler’
  29. In Node.js / Express, how do I “download” a page and gets its HTML?
  30. Create a DOM document from string, without JQuery

Leave a Comment