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 whether 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.
JavaScript includes
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
JavaScript indexOf
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.
JavaScript some
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 have to check for multiple things to match.
JavaScript find
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)
See the Pen JavaScript startsWith and multiple conditions by Chris Bongers (@rebelchris) on CodePen.
Thank you for reading, and let’s connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter
