Name of this switch operator syntax-CodePudding

I am constantly finding this sort of switch statement in a codebase and not being able to find documentation about it anywhere. Does anyone know the name of this syntax?

import React from 'react'

enum Options {
    FirstOption = 'first',
    SecondOption = 'second'
}

export default function DisplayIcon({selectedOption: string}) {

  const clickFirst = () => {
      // do something
  }

  const clickSecond = () => {
      // do something
  }

  return (
    <Wrapper>
    {
      {
        [Options.FirstOption]: (
          <ClickableIcon onClick={ clickFirst }>
            <Icon type={ IconType.Frist } />
          </ClickableIcon>
        ),
        [Options.SecondOption]: (
          <ClickableIcon onClick={ clickSecond }>
            <Icon type={ IconType.Second } />
          </ClickableIcon>
        ),
      }[selectedOption]
    }
  </Wrapper>
  )
}

CodePudding user response：

It's not a switch statement at all, though you're right it's being used to select a value. It's an object literal with computed property names. So it's building an object, then picking out the property matching selectedOption from that object, all in the same expression.

Here's a simpler example of the object literal part with computed property names:

const name1 = "a";
const name2 = "b";
const obj = {
    [name1]: "value for a",
    [name2]: "value for b",
};
console.log(obj);

And here's an example of what that code is doing with building the object and then immediately grabbing one of its properties:

const name1 = "a";
const name2 = "b";
const pickOne = Math.random() < 0.5 ? name1 : name2;
const pickedValue = {
    [name1]: "value for a",
    [name2]: "value for b",
}[pickOne];
console.log(`Picked "${pickOne}": "${pickedValue}"`);

FWIW, I wouldn't do it that way. I'd either define the object once and reuse it, or use a switch or if/else if or similar in the code prior to the return.

CodePudding user response：

This isn't specific to JSX, and isn't really a particular piece of syntax, but a combination of multiple. Let's simplify it a bit:

let result = {
    [Options.FirstOption]: 'hello',
    [Options.SecondOption]: 'goodbye',
}[selectedOption];

This will select either 'hello' or 'goodbye'. It does so by first creating an object, and then looking up a property on it. We could add an intermediate variable like this:

let options = {
    [Options.FirstOption]: 'hello',
    [Options.SecondOption]: 'goodbye',
};
let result=options[selectedOption];

The [...]: syntax is just to allow the keys themselves to be defined based on some other variable, rather than a literal string. We could instead add properties one at a time like this:

let options = {};
options[Options.FirstOption] = 'hello';
options[Options.SecondOption] = 'goodbye';
let result=options[selectedOption];

The result, as you already worked out, is equivalent to this:

let result;
if ( selectedOption === Options.FirstOption ) {
    result = 'hello';
}
elseif ( selectedOption === Options.SecondOption ) {
    result = 'goodbye';
}