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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

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?

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series