multiple OR conditions in IF statement in javascript

Question

I have a drop-down and depending on what is selected from the drop-down some of the UI fields will become un-visible to the user to fill. I have an IF statement with many different ORs and have the hard-coded value on the condition. I am very new to coding so I don't know what is the best way to do this. I want to have a clean and reusable code. Also the drop-down values are coming from the database and I did not know how to add to my IF without hard-coding them.
Any help will be appreciated.

if (value === 'Banana Factory' || value === 'Apple Factory ') {
      this.store1Visable = false;
    } else {
      this.store1Visable = true;
    }
    if (value === 'Pineapple Factory' || value === 'Peanut Factory' || value === 'Kiwi Factory' || value === 'Watermelon Factory') {
      this.store2Visable = false;
    } else {
      this.store2Visable = true;
  }
    if (value === 'Pineapple Factory' || value === 'Peanut Factory' || value === 'Kiwi Factory' || value === 'Watermelon Factory'
        || value === 'Banana Factory' || value === 'Grape Factory' || value === 'Peach Factory' || value === 'Kiwi Factory') {
      this.store3Visable = false;
    } else {
      this.store3Visable = true;
    }
    if (value === 'Pineapple Factory' || value === 'Peanut Factory' || value === 'Kiwi Factory' || value === 'Watermelon Factory'
        || value === 'Banana Factory' || value === 'Grape Factory' || value === 'Peach Factory') {
      this.store4Visable = false;
    } else {
      this.store4Visable = true;
    }

I want my code to be clean and reusable to the point if something needs to be added it be an easy change.

Possible duplicate of [Check variable equality against a list of values](https://stackoverflow.com/questions/4728144/check-variable-equality-against-a-list-of-values) — Sebastian Simon, Jul 26 '19 at 00:05

CertainPerformance · Answer 1 · 2019-07-26T00:15:40.470

I'd use an array of arrays, one sub-array for each "visable" property, and check to see if the first word of the value is included in the array:

const allVisiblesValues = [
  ['Banana', 'Apple'],
  ['Pineapple', 'Peanut', 'Kiwi', 'Watermelon'],
  ['Pineapple','Peanut','Kiwi','Watermelon', 'Banana','Grape','Peach','Kiwi'],
  ['Pineapple','Peanut','Kiwi','Watermelon', 'Banana','Grape','Peach']
];

// ...

// Extract first word of value:
const valuePrefix = value.split(' ')[0];
allVisiblesValues.forEach((visibleValuesArr, i) => {
  this['store' + (i + 1) + 'Visable'] = visibleValuesArr.includes(valuePrefix);
});

You might also consider changing the code such that:

store1Visable's spelling (and the others) are corrected to store1Visible, etc

Or, even better - use an array of stores instead of 4 standalone properties, eg, in the forEach:

this.stores[i] = visibleValuesArr.includes(valuePrefix);

Or, use .map instead:

this.stores = allVisiblesValues.map(
  visibleValuesArr => visibleValuesArr.includes(valuePrefix)
);

Your existing code has a trailing space: value === 'Apple Factory '. If that code is working, it would probably be best to change the HTML (or whatever the value comes from) so that the trailing space is removed.

Andrew Dashkov · Answer 2 · 2019-07-26T00:49:48.320

A straightforward solution is here:

// store all needed values in appropriate arrays
const visibiles1 = ['Banana Factory', 'Apple Factory'];
const visibiles2 = ['Pineapple Factory', 'Peanut Factory', 'Kiwi Factory', 'Watermelon Factory'];
const visibiles3_4 = ['Pineapple Factory', 'Peanut Factory', 'Kiwi Factory', 'Watermelon Factory', 'Banana Factory', 'Grape Factory', 'Peach Factory'];

// then check if 'value' exists in an appropriate array
// if it is - expression on the right will return 'true'
this.store1Visible = visibiles1.includes(value);
this.store2Visible = visibiles2.includes(value);
this.store3Visible = visibiles3_4.includes(value);
this.store4Visible = visibiles3_4.includes(value);

You can look at sort of implementation of it here: JsBin

multiple OR conditions in IF statement in javascript

2 Answers2