Check if an element is present in an array

Peek under the hood

Array.includes() basics

Introduced in ECMAScript 2016, Array.includes() is your go-to method for element presence checks. It's efficient and, most importantly, super readable.

Specifying index

Cleverly, Array.includes() takes an optional second parameter for the start index. Say goodbye to unnecessary full-array searches!

const fruits = ['apple', 'banana', 'mango'];
const startsAtTwo = fruits.includes('apple', 2); // false - we're not fruit loops after all!


Unique objects

Remember, in JavaScript, all objects are unique snowflakes—even if they look identical. Consequently, Array.includes() treats similar objects as different.

const objects = [{ id: 1 }, { id: 2 }];
const isPresent = objects.includes({ id: 1 }); // false - to JS, they're as different as apples and oranges!


Browser compatibility

While Array.includes() is widely supported, some older browsers might not recognize it. Use a polyfill for those Internet Explorer die-hards.

indexOf as a substitute

In the land before Array.includes(), there was Array.indexOf(). Now, it gathers dust in many cases but it's a good fallback.

const array = [1, 2, 3];
const isPresent = array.indexOf(2) !== -1; // true


Translating indexOf results to boolean

Seeing true or false is a clear signal. Use double negation (!!) or add 1 to transform indexOf's result to a boolean:

const isPresent = !!array.indexOf(2); // true
const isPresent = array.indexOf(2) + 1; // 1 (truthy) - sometimes, math can be helpful!


Original order is maintained

The best part about Array.includes() and indexOf()? No need to sort your array. Stay original, folks!

Performance measures

It's always good to benchmark. Test methods like includes and indexOf to pick the fittest one for your case.

Practical cases

Speed up search with start index

What if you're certain that your desired element won't appear in the first part of the array? Don't waste time—cut to where matter starts:

const bigArray = new Array(1000).fill('gold').concat(['diamond']);
bigArray.includes('diamond', 1000); // true - we're rich!


Implement a polyfill

To make ancient browsers understand Array.includes(), you can implement a homemade polyfill:

if (!Array.prototype.includes) {
  Array.prototype.includes = function(element, fromIndex) {
    return this.indexOf(element, fromIndex) !== -1;
  };
}


Performance and Array.includes()

Though readability is usually crucial, it's important to remember that Array.includes() performs differently in various JS engines due to optimization strategies. indexOf performs a linear search, on average making n/2 comparisons. Always think of your specific use case.