More readable conditional with Array.includes()

Do you know the function Array.includes() of the JavaScript? This function was specified in ES7 and is capable of making a conditional much more readable.

This function determines is the parameter is contained in the array.

const numbers = [1, 2, 3, 4]
const strings = ['Gabriel', 'Rufino']

numbers.includes(3) // true
numbers.includes(6) // false
strings.includes('Rufino') // true
strings.includes('Fernando') // false

Knowing this function, you can now write more readable conditionals that compare a variable with many possibilities by replacing large chains of or operator (||) with Array.includes() using a variable as the parameter. See the example:

Using or operator

function get(request, response) {
  const access = request.access

  if (access === 'maintainer' || access === 'admin' || access === 'developer') {
    return response.json({ allowed: true })
  } else {
    return response.json({ allowed: false })
  }
}

Using Array.includes()

function get(request, response) {
  const access = request.access

  if (['maintainer', 'admin', 'developer'].includes(access)) {
    return response.json({ allowed: true })
  } else {
    return response.json({ allowed: false })
  }
}

Works with NaN

NaN === NaN // false
[1, 2, 3, NaN].includes(NaN) // true

Thanks!

Comments

[David]

Perhaps worth noting is that there is a performance penalty with Array.prototype.includes. Such a "membership check" can iterate across the length of the array, especially in instances where the argument passed does not exist.

In such a scenario, it may be advisable (depending on how often this is done), to convert to a set and perform these membership checks against that. The example you used seem to be constant versus a list of values that are not yet known until runtime.

[Gabriel Rufino]

Wow!!! Nice.

I didn't know. Thanks for contribute

[David]

Ah! If you didn't, Gabriel -- it may be worth your effort in covering some basic data structures and algorithms and algorithmic complexity (in both time and space). This isn't as big a deal when operating on just the front-end (browser) with small chunks of data, but if you ever use JS (Node) on the backend, this is important and also in instances where the UI is comprised of a LOT of data in a single-page app -- think Facebook. I've seen people do multiple nesting of for-loops (in Ruby) that took down an instance of a worker which typically equates to lost earnings due to downtime

[calvintwr]

Actually there’s ["maintainer", "admin", "developer"].indexOf(access) > -1 as well. Include is definitely better but I don’t think anyone uses multiple || for the same variable.

[Gabriel Rufino]

Thanks for collaborating and giving your opinion :D

[Zen]

Thanks for this amazing trick! I'll use it in my blog!

[Gabriel Rufino]

Thank you :D