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.
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
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.
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)