OR VS Array Includes

#webdev #javascript #performance #codereview

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
   }
}

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
   }
}

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');

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');

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
   }
}

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
   }
}

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'

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.