JavaScript check if array contains a value

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’];…


This content originally appeared on DEV Community and was authored by Chris Bongers

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:

cost 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 would 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)

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


This content originally appeared on DEV Community and was authored by Chris Bongers


Print Share Comment Cite Upload Translate Updates
APA

Chris Bongers | Sciencx (2022-01-27T09:16:32+00:00) JavaScript check if array contains a value. Retrieved from https://www.scien.cx/2022/01/27/javascript-check-if-array-contains-a-value/

MLA
" » JavaScript check if array contains a value." Chris Bongers | Sciencx - Thursday January 27, 2022, https://www.scien.cx/2022/01/27/javascript-check-if-array-contains-a-value/
HARVARD
Chris Bongers | Sciencx Thursday January 27, 2022 » JavaScript check if array contains a value., viewed ,<https://www.scien.cx/2022/01/27/javascript-check-if-array-contains-a-value/>
VANCOUVER
Chris Bongers | Sciencx - » JavaScript check if array contains a value. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/01/27/javascript-check-if-array-contains-a-value/
CHICAGO
" » JavaScript check if array contains a value." Chris Bongers | Sciencx - Accessed . https://www.scien.cx/2022/01/27/javascript-check-if-array-contains-a-value/
IEEE
" » JavaScript check if array contains a value." Chris Bongers | Sciencx [Online]. Available: https://www.scien.cx/2022/01/27/javascript-check-if-array-contains-a-value/. [Accessed: ]
rf:citation
» JavaScript check if array contains a value | Chris Bongers | Sciencx | https://www.scien.cx/2022/01/27/javascript-check-if-array-contains-a-value/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.