More than 3 years have passed since last update.

三項演算子の省略記法まとめ

Last updated at 2021-07-03Posted at 2021-03-20

業務で見かけた便利な三項演算子の省略記法、初見は何だこれ？？って思いますが、とても便利なのでここにまとめていきます。

これはReact/Vueなどでpropsで子コンポーネントに値を渡す時、例えばその値がAPIから受け取るもので、何かしらの理由でundefinedになって渡せないケースもある場合にエラーを回避する為の三項演算子です。

<SomeComponent
 data={fetchData ? fetchData.name : undefined}
/>

//これを↓こう省略できます

<SomeComponent
 data={fetchData?.name}
/>

次はfetchDataがあればfetchData、なければdefaultDataを使うというケースの三項演算子。

const data = fetchData ? fetchData : defaultData;

//これを↓こう省略できます

const data = fetchData ?? defaultData;

見慣れない記法が出てくると焦りましたが、からくりが分かればなんてことないですね。