If else if function with many or expressions wont cycle through all the or possibilities

Question

I am displaying an image conditionally depending on what the value is. The value is a string. However it only returns the first image. It does not go through the entire function.

I tried placing brackets around the values and it does work but only ever checks the first string.
Tried using one equals sign, doesn't change anything.

  methods: {
    resultImage(value) {
      if (
        value === 'Less likely' ||
        'More likely light' ||
        'More likely blue' ||
        'More likely curly'
      ) {
        return this.low
      } else if (value === 'Average chance') {
        return this.medium
      } else if (
        value === 'Somewhat more likely' ||
        'Somewhat more likely brown' ||
        'Somewhat more likely curly'
      ) {
        return this.mediumHigh
      } else if (
        value === 'More likely' ||
        'More likely dark' ||
        'More likely brown' ||
        'More likely straight'
      ) {
        return this.high
      }
    }
  }

Expect the function to cycle to the end and return an image based on the value. Actual results is that it returns the first image.

What is the value of "value" ? – Weedoze Aug 09 '19 at 13:25 — Weedoze, Aug 09 '19 at 13:25

Smarticles101 · Accepted Answer · 2019-08-09T13:30:54.463

currently, each string evaluates to true unless it is null or undefined. you're not comparing any of them to value except for the first one. you need to compare all of them, otherwise, the first if block will pass every time.

you're missing value === on each expression:

 methods: {
    resultImage(value) {
      if (
        value === 'Less likely' ||
        value === 'More likely light' ||
        value === 'More likely blue' ||
        value === 'More likely curly'
      ) {
        return this.low
      } else if (value === 'Average chance') {
        return this.medium
      } else if (
        value === 'Somewhat more likely' ||
        value === 'Somewhat more likely brown' ||
        value === 'Somewhat more likely curly'
      ) {
        return this.mediumHigh
      } else if (
        value === 'More likely' ||
        value === 'More likely dark' ||
        value === 'More likely brown' ||
        value === 'More likely straight'
      ) {
        return this.high
      }
    }
  }

Explaining why `if (value === 'something' || 'something else')` won't give the expected result (and will always be evaluated as true) would make this a perfect answer — Cid, Aug 09 '19 at 13:29

score 1 · Answer 2 · answered Aug 09 '19 at 13:32

I think your problem is that you're not checking the value but rather the expressions.

if (
value === 'Less likely' ||
'More likely light' ||
'More likely blue' ||
'More likely curly'
)

will always result in true, because the expression 'More likely light' and the other strings are truthy values. I think this will do what you want to achieve:

  if (
    value === 'Less likely' ||
    value === 'More likely light' ||
    value === 'More likely blue' ||
    value === 'More likely curly'
  )

I recommend this post: Understanding JavaScript Truthy and Falsy

fbcyborg · Answer 3 · 2019-08-09T13:43:31.617

try something like this instead:

function resultImage(value) {
    switch(value) {
        case 'Less likely':
        case 'Less likely':
        case 'More likely curly':
            return this.low
        case 'Average chance':
            return this.medium
        case 'Somewhat more likely':
        case 'Somewhat more likely brown':
        case 'Somewhat more likely curly':
            return this.mediumHigh
        case 'More likely':
        case 'More likely dark':
        case 'More likely brown':
        case 'More likely straight':
            return this.high
        default:
            return null
    }
}

You can also add a default case to return always a value.

1

Much nicer syntax. Thanks! – Prozak Aug 09 '19 at 13:55

score 1 · Answer 4 · answered Aug 09 '19 at 13:47

Personally I prefer to use an other pattern (tell don't ask) Here is an exemple :

const cases = {
  'Less likely': 'low',
  'More likely light': 'low',
  ...
  'Average chance': 'medium',
  ...
  'Somewhat more likely brown': 'mediumHight',
  ...
};

methods: {
    resultImage(value) {
      return this[cases[value]];
    }
  }

I like to use this pattern to avoid multiple if - else if - else statements.

You can define a default value to enforce this pattern, like :

const cases = {
  ...
  default: 'low' // for exemple
}

methods: {
  resultImage(value) {
    const caseValue = cases[value] || cases['default'];
    return this[caseValue];
  }
}

If else if function with many or expressions wont cycle through all the or possibilities

4 Answers4