DEV Community

loading...
Cover image for How to check if an array includes a value in JavaScript?

How to check if an array includes a value in JavaScript?

samanthaming profile image Samantha Ming Originally published at samanthaming.com ・3 min read

Alt Text

Here's a Code Recipe to check if a #JavaScript array contains a value. You can use the new array includes method πŸ˜‹ For older browsers and IE, you can use indexOf πŸ‘

const array = ['πŸ₯—', 'πŸ”', '🍰'];

// Modern Browser
array.includes('🍰'); // true

// Older Browser
array.indexOf('🍰') !== -1; // true

includes with other primitive types

Besides strings, includes also works great with other primitive types.

const symbol = Symbol('symbol');

const array = [
  'string',
  200,
  0,
  undefined,
  null,
  symbol
];

Using includes

array.includes('string'); // true
array.includes(200); // true
array.includes(0); // true
array.includes(undefined); // true
array.includes(null); // true
array.includes(symbol); // true

Using indexOf

array.indexOf('string') !== -1; // true
array.indexOf(200) !== -1; // true
array.indexOf(0) !== -1; // true
array.indexOf(undefined) !== -1; // true
array.indexOf(null) !== -1; // true
array.indexOf(symbol) !== -1; // true

Caveats of indexOf

So far, I have show you values where both includes and indexOf work interchangeably. However there is one value, where they differ 🀭

const array = [NaN];

// βœ…
array.includes(NaN); // true

// 😱
array.indexOf(NaN) !== -1; // false

Checking for Array of Objects using some()

For a more versatile solution that works on other data types, you may want to use some instead.

".some()": tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value.

const array = ['πŸ₯—', 'πŸ”', '🍰'];

array.some(food => food === '🍰'); // true

This method is ideal for array of objects.

const array = [{ name: 'js' }, { name: 'css' }];

array.some(code => code.name === 'js'); // true
array.some(code => code.name === 'πŸ€–'); // false

In a previous code note, I talked about a quick & dirty way to check objects using JSON.stringify().

How to Compare 2 Objects in JavaScript

Taking that concept, we can also use it to compare object element in an array like this:

const array = [{ name: 'js' }, { name: 'css' }];

array.some(code => JSON.stringify(code) === JSON.stringify({ name: 'css' }));
// true

Case Sensitive

Both includes and indexOf are case sensitive:

const array = ['SAMANTHA'];

array.includes('samantha'); // false
array.indexOf('samantha') !== -1; // false

To make it case insensitive, you could consider changing the case of the array like so:

const array = ['SAMANTHA'];

const sameCaseArray = array.map(value => value.toLowerCase());
// ['samantha']

sameCaseArray.includes('samantha'); // true
sameCaseArray.indexOf('samantha') !== -1; // true

But if you were using some, you can do it in one line:

const array = ['SAMANTHA'];

array.some(value => value.toLowerCase() === 'samantha'); // true

Browser Support

Support for includes is really good for all modern browsers. However, if you need IE or older browser, you will need to use indexOf.

Can I use? Array.prototype.includes

Community Input

  • @lolinoid: contains > @prvnbist That's a method DOM Nodes, most known example for it would be getting a list of classnames which will be a node list then you can use contain method to see if it has a classname. Or you can convert it to an array and then use includes method

  • You can use the in operator to loop over an object to check if a specific property key exists. (Knowledge shared by @fvbix)

const object = { kiwi: 'πŸ₯', pear: '🍐', cheese: 'πŸ§€' },;

'kiwi' in object; // true

// Use it as a conditional
if ('kiwi' in object) {
  // do something if property key exists
}

Resources


Thanks for reading ❀
Say Hello! Instagram | Twitter | Blog | SamanthaMing.com

Discussion (7)

pic
Editor guide
Collapse
samanthaming profile image
Samantha Ming Author

Oh cool! So if it finds something, it returns the opposite of it (akin to a β€œnot” operator), right? β€” Bitwise operators still confuses me, I should really look into it πŸ˜…

samanthaming profile image
Samantha Ming Author

Thanks for the explanation on this! I'll add this to my notes πŸ‘

Although your 2nd paragraph still confuses me. Don't worry. It's more me being very foreign to bitwise 😣. You seem to have a great grasp on this topic, do you have any resource recommendation you found help on this? (I'd love to dig more into this πŸ™‚)

samanthaming profile image
Samantha Ming Author

sweet! thanks for the recommendation, will also add this to my code notes for folks who are also interested in this topic πŸ’―

Thread Thread
martinageradams profile image
Martin Ager Adams

I have this books.Tomasz Sterna and Your sharing are great!