DEV Community

Cover image for OR VS Array Includes
Alwar G
Alwar G

Posted on

2

OR VS Array Includes

Hi,

Recently, I came across a case involving the comparison of multiple names, where I needed to check each name against my list of available names before proceeding with further actions. Consider the following example code:
Example code

function handleContactOperation(name) {
   if (name === 'person1' || name === 'person2') {
      // My stuff
   } else {
      // Other stuff
   }
}
Enter fullscreen mode Exit fullscreen mode

Alternatively, the same logic can be implemented using the Array.includes method:

function handleContactOperation(name) {
   if (['person1', 'person2'].includes(name)) {
      //My stuff
   } else {
      // other stuff
   }
}
Enter fullscreen mode Exit fullscreen mode

You may wonder, Which approach should I choose? The answer is that both approaches are correct.

Let's analyze the OR approach. Consider the following code:

function handleOR(name) {
  console.time('OR');
  console.log(name === 'person1' || name === 'person2');
  console.timeEnd('OR');
}
handleOR('person1');
Enter fullscreen mode Exit fullscreen mode

Here, the output for the OR approach is approximately 0.084 ms (individual results may vary).
Now, let's implement the same logic using the Array.includes approach:

function handleIncludes(name) {
  console.time('Includes');
  console.log(['person1', 'person2'].includes(name));
  console.timeEnd('Includes');
}
handleIncludes('person1');
Enter fullscreen mode Exit fullscreen mode

In this case, the output for the Array.includes approach is approximately 0.221 ms. The OR approach performs better in this scenario.

However, let's consider a more complex case where you need to compare a name against 10 available names:

function handleContactOperation(name) {
   if (name === 'person1' || name === 'person2'|| name === 'person3'|| name === 'person4'|| name === 'person5'|| name === 'person6'|| name === 'person7'|| name === 'person8'|| name === 'person9'|| name === 'person10') {
      // My stuff
   } else {
      // Other stuff
   }
}
Enter fullscreen mode Exit fullscreen mode

In my opinion, the readability of this code is not optimal. Now, let's implement the same logic using the Array.includes method:

 function handleContactOperation(name) {
  let namesArr = [
    "person1",
    "person2",
    "person3",
    "person4",
    "person5",
    "person6",
    "person7",
    "person8",
    "person9",
    "person10"
  ];
  if (namesArr.includes(name)) {
      // My stuff
   } else {
      // Other stuff
   }
}
Enter fullscreen mode Exit fullscreen mode

In this case, the Array.includes approach is more readable.

Conclusion:

If performance is a priority, the OR approach may be preferable. However, for improved readability, the Array.includes approach is recommended.

Example use cases:

  • For less than 5 strings, the OR approach may be readable.
  • If used in complex logic, especially inside a loop, the OR condition might be more suitable.

My thoughts

  • Consider using a one-by-one condition format for better readability: Example code
   let isValid = name === 'person1' || 
                 name === 'person2' || 
                 name === 'person3' || 
                 name === 'person4' || 
                 name === 'person5' || 
                 name === 'person6' || 
                 name === 'person7' || 
                 name === 'person8' ||
                 name === 'person9' ||
                 name === 'person10'
Enter fullscreen mode Exit fullscreen mode
  • Explore other data structures such as Map or Set, which may have better performance than the Array includes method. However, keep in mind that they may consume more memory and execution time compared to the OR condition.

The choice is yours. Depending on your application's design, choose the approach that best suits your needs.

I hope you find this post helpful. Thank you.

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (1)

Collapse
 
tyler36 profile image
tyler36

Thank you for the article.

You include a time for the single case examples but not the 10-case. I wonder how your other examples compared?

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay