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()
.
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 methodYou 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
}
[@pixelfixer](https://twitter.com/pixelfixer/status/1234011311006191617?s=21):_ And if you want the value returned, you can use
Array.find()
Performance test > array indexOf vs includes. Thanks @equiman:
Resources
- MDN Web Docs: includes
- MDN Web Docs: indexOf
- Stack Overflow: How do I check if an array includes a value in JavaScript?
- MDN Web Docs: some
- w3schools: contains
- MDN Web Docs: in operator
- Originally published atย www.samanthaming.com
Thanks for reading โค
Say Hello! Instagram | Twitter | Blog | SamanthaMing.com
Top comments (4)
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 ๐
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 ๐)
sweet! thanks for the recommendation, will also add this to my code notes for folks who are also interested in this topic ๐ฏ
I have this books.Tomasz Sterna and Your sharing are great!