How to assign the result of a conditional decision to a variable in javascript

Question

The following code works fine:

    var styles = []
    if (state == 's1') {
        styles = ['inline-block', 'none', 'none']
    } else if (state == 's2') {
        styles = ['none', 'inline-block', 'none']
    } else if (state == 's3') {
        styles = ['none', 'none', 'inline-block']
    }

However in some languages we can make this more concise. I would like to do something along the following lines:

    var styles = 
      if (state == 's1') {
          ['inline-block', 'none', 'none']
      } else if (state == 's2') {
          ['none', 'inline-block', 'none']
      } else if (state == 's3') {
          ['none', 'none', 'inline-block']
      }

Is there such a conditional assignment - or even better some kind of match/case - in javascript?

Update Lots of good answers - thanks! Chose one seems closest to my original intent. But learnt a variety of aspects of javascript across many of them.

The closest i could think of would be ternary operator, but it's far from elegant. — Nicolas
– Nicolas, Commented Jan 27, 2020 at 17:30

Andus · Accepted Answer · 2020-01-27 17:38:01Z

2

You can define the conditions as a function

chooseStyle = (state) => {
    if (state == 's1') {
        return ['inline-block', 'none', 'none']
    } else if (state == 's2') {
        return ['none', 'inline-block', 'none']
    } else if (state == 's3') {
        return ['none', 'none', 'inline-block']
    }
}

var styles = chooseStyle(state)

Or even better if you use a switch instead:

chooseStyle = (state) => {
    switch(state) {
        case 's1':
            return ['inline-block', 'none', 'none']
        case 's2':
            return ['none', 'inline-block', 'none']
        case 's3':
            return ['none', 'none', 'inline-block']
        default:
            return ['inline-block', 'none', 'none'] // return the default styles you want, here I choose the styles of 's1'
    }
}

edited Jan 27, 2020 at 17:38

answered Jan 27, 2020 at 17:31

Andus

1,73917 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nicolas Over a year ago

You function does not returns anythings. The result will always be undefined.

WestCoastProjects Over a year ago

This looks so far actually closest to my original intent

Nina Scholz · Accepted Answer · 2020-01-27 17:31:20Z

2

You could take an array of states and map either 'inline-block' for a value at this index or 'none'.

const
    order = ['s1', 's2', 's3'],
    getStyles = state => order.map(v => v === state ? 'inline-block' : 'none');

console.log(...getStyles('s1'));
console.log(...getStyles('s2'));
console.log(...getStyles('s3'));

answered Jan 27, 2020 at 17:31

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

3 Comments

WestCoastProjects Over a year ago

Not sure how the v === state makes this work - can you elaborate?

Nina Scholz Over a year ago

v is an item of order and if the value at this position is the wanted one, then it takes 'inline-block' or 'none' by using a conditional (ternary) operator ?:.

WestCoastProjects Over a year ago

ah got it: i was not thinking along collections manipulation lines

Barmar · Accepted Answer · 2020-01-27 17:31:26Z

1

Like many languages whose syntax is patterned after C, JavaScript has conditional expressions (aka "tertiary") that can be used for simple if-then-else conditions.

condition ? true-value : false-value

You can nest these for multiple cases, but it tends to become unreadable.

var styles = state == 's1' ? ['inline-block', 'none', 'none'] :
    (state == 's2' ? ['none', 'inline-block', 'none'] : ['none', 'none', 'inline-block']);

There's no analogous expression form of case. But you could use an object:

const style_mappings = {
    "s1": ['inline-block', 'none', 'none'],
    "s2": ['none', 'inline-block', 'none'],
    "s3": ['none', 'none', 'inline-block']
};
var styles = style_mappings[state];

answered Jan 27, 2020 at 17:31

Barmar

789k57 gold badges555 silver badges669 bronze badges

Comments

Lux · Accepted Answer · 2020-01-27 17:37:40Z

1

Use a mapping object:

const styleMap = {
  s1: ['inline-block', 'none', 'none'],
  s2: ['none', 'inline-block', 'none'],
  s3: ['none', 'none', 'inline-block'],
};

const styles = styleMap[state];

answered Jan 27, 2020 at 17:37

Lux

18.3k5 gold badges48 silver badges77 bronze badges

Comments

James Whiteley · Accepted Answer · 2020-01-27 17:37:51Z

1

JavaScript doesn't have anything exactly like that, but one solution which gets pretty close is to store the results in an object/dictionary and call it with the state you want:

const styles = {
  's1': ['inline-block', 'none', 'none'],
  's2': ['none', 'inline-block', 'none'],
  's3': ['none', 'none', 'inline-block']
}
console.log(`s1: ${styles['s1']}`)
console.log(`s2: ${styles['s2']}`)
console.log(`s3: ${styles['s3']}`)

answered Jan 27, 2020 at 17:37

James Whiteley

3,4841 gold badge22 silver badges49 bronze badges

Comments

sudo97 · Accepted Answer · 2020-01-27 17:40:45Z

0

You could use the switch statement in JavaScript to accomplish this. Your code would be something like this

var styles = ['none', 'none', 'none'];
switch (state) {
    case 's1':
        styles[0]='inline-block';
        break;
    case 's2':
        styles[1]='inline-block';
        break;
    case 's3':
        styles[2]='inline-block';
        break;
}

answered Jan 27, 2020 at 17:40

sudo97

9142 gold badges11 silver badges24 bronze badges

1 Comment

WestCoastProjects Over a year ago

That still has multiple explicit assignments .

100PercentVirus · Accepted Answer · 2020-01-27 18:22:15Z

You could use a tenary javascript operator. So the code may look like so:

var styles = (state == 's1')? 
                        ['inline-block', 'none', 'none']:  (state == 's2')? 
                                                            ['none', 'inline-block', 'none']: (state == 's3')?
                                                                                              ['none', 'none', 'inline-block']:[];

Usage example:

Example 1:
var state = 's1'; 
console.log(styles);  //outputs [ "inline-block", "none", "none" ]
Example 2: 
var state = 's2'; 
console.log(styles);  //outputs [ "none", "inline-block", "none" ]
Example 3: 
var state = 's3'; 
console.log(styles);  //outputs [ "none", "none", "inline-block" ]
Example 4: 
var state = 's'//a state without a match
console.log(styles);  //outputs []

Collectives™ on Stack Overflow

How to assign the result of a conditional decision to a variable in javascript

7 Answers 7

2 Comments

3 Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

3 Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related