JavaScript check if array contains a value

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Search for a command to run...

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Nice one Vishwak
Find is pretty amazing 🤯
.includes() method is definitely my favorite way of checking if array contains a value, it makes code that much more readable.
indexOf() is the "old way" of doing it because includes() is only supported in IE Edge 14+ (no IE11 support).
But when targeting modern browsers, or a transpiler or node.js - includes() is the way to go.
Fun fact - you can also use it on strings to check if string includes a value too:
"Does foobar".includes("foo")
// true
Yep very true indeed :)
Great post!
I think you may have made a typo by accident here:
cost role = 'user';
Yep, thanks for noting that, fixed it
I love these kind of posts 👊! A good follow up would be an Array with Objects 😉
Most of you know me for my consistency, a golden arrow in my blog series. I've written 1000 articles in 1008 days! Almost an article a day, and my honeymoon was the only holiday I ever took. I'm super proud of this achievement; it has been a fantasti...

It's not the first time I'll be talking about community. I think it's an essential aspect of any successful tool. This shows in my previous explorations of Astro, Medusa, and now Vendure as well. All these products thrive in a super open, welcoming, ...

The cool part about Vendure is how easy it is to set up and how abstract each layer is. Basically, we get the following elements: External database Server Worker Admin UI Frontend While this is amazing, it also brings a bit of complexity when it co...

The previous article looked at customizing Vendure on a data and process level. In this article, we'll look at customizing emails, as they are often a big part of a webshop system. We'll be looking at two different layers of customization for customi...

Even though Vendure is a pretty significant project out of the box, in some cases, we might want to go in and modify some elements to work to our specific use case. In this article, I'll take a high-level look at some elements we can customize within...

Let's sketch the use case. We have some roles that can access a particular page. So only people with that specific role should be able to continue.
These valid roles are defined in an array.
const roles = ['moderator', 'administrator', 'superman'];
How can we check to see if a user's role is part of this list?
For the sake of this article, we'll assume the user's role is a simple string like so:
const role = 'user';
There are a couple of options for us here. Let's take a look at each of them.
This might be my personal most used option. It's quick and straightforward and has no weird overhead.
This includes method will return true or false if it can find the string you are looking for.
roles.includes('user');
// false
roles.includes('moderator');
// true
We can also use indexOf, which will return -1 if it can't find the item or the actual index if it does.
roles.indexOf('user');
// -1
roles.indexOf('superman');
// 2
This could be super helpful if you need the item's index anyway, but I think includes should work better for you if you don't.
Another way of doing this is using the some method, this will return a boolean like the includes method.
It will return if some of the items in the array match the search query.
roles.some((role) => role === 'user');
// false
roles.some((role) => role === 'moderator');
// true
Again, depending on the use-case, this could be the better solution, mainly good if you would have to check for multiple things to match.
The find method is a new way of searching an array, and it will return undefined or the item.
roles.find((role) => role === 'user');
// undefined
roles.find((role) => role === 'moderator');
// 'moderator'
This method is perfect if you need the entire object to do something with. Imagine the roles being an object, and we want to use another property of this object.
And there you go, multiple ways of checking if an array contains a value.
You can try all of these out in the following CodePen (Note: Open your terminal)
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter