タイトルの通り。
知らなかったので記事にまとめます。
三項演算子とは
その名の通り三項、つまり3つの値を持ってif文の省略形・代替手段として使用することができるものです。
以下のような関数があったとします。
/**
* 引数が10より小さい場合はtrue、10以上の場合はfalseを返す
* @param {number} num
* @returns {boolean}
*/
const isLowerThan10 = (num) => {
if (num < 10) {
return true;
} else {
return false;
}
};
console.log(isLowerThan10(5)); // true
console.log(isLowerThan10(100)); // false
if文の例としてはわかりやすいですが、冗長な書き方にはなってしまいます。
これをよりシンプルに書くために使用されるのが三項演算子です。
条件式、trueの場合の処理、falseの場合の処理の3つを?と:で連結させて記述します。
{条件式} ? {trueの場合の処理} : {falseの場合の処理}
先ほどのif文を三項演算子に置き換えると、以下のようになります。
num < 10 ? true : false
さらに関数に当てはめると、以下のようになります。
/**
* 引数が10より小さい場合はtrue、10以上の場合はfalseを返す
* @param {number} num
* @returns {boolean}
*/
const isLowerThan10 = (num) => {
const result = num < 10 ? true : false;
return result;
};
console.log(isLowerThan10(5)); // true
console.log(isLowerThan10(100)); // false
三項演算子の説明のために敢えてこのような書き方をしていますが、本来は以下の書き方で十分です。
const result = num < 10;
条件演算子の入れ子構造について
if文の連鎖的な書き方でよく見るのは、以下の2種類かと思います。
// 入れ子になっているパターン
if (条件A) {
if (条件B) {
...
}
}
// else ifで連結されるパターン
if (条件A) {
...
} else if (条件B) {
...
} else if (条件C) {
...
}
これらは三項演算子で書き換えることが可能です。
入れ子
const result = 条件A ? 条件B ? B : C : A;
括弧で区切るとわかりやすいかと思います。
const result = 条件A ? (条件B ? B : C) : A;
// 以下のif文と同義
if (条件A) {
if (条件B) {
return B;
} else {
return C;
}
} else {
return A
}
連結
const result = 条件A ? A : 条件B ? B : C;
こちらも括弧で区切るとわかりやすいです。
const result = (条件A ? A) : (条件B ? B) : C;
// 以下のif文と同義
if (条件A) {
return A;
} else if (条件B) {
return B;
} else {
return C;
}
どういう時に使うか
個人的には可読性が大きく下がるため、乱用することはあまりしたくありません。
一方で記述量を減らすことができるため、関数コンポーネントなど、
最初に大きく整備して、長く運用していくようなファイルでは活用できるのではないでしょうか。
また、TypeScrpの型定義ファイルでは多く活用されているようです。
// 2種類の型をマージし、新しい型を作成する
type Merge<T, K> = {
[U in keyof T | keyof K]: U extends keyof K
? K[U]
: U extends keyof T
? T[U]
: never;
};
type Hoge = {
name: string;
age: number;
};
type Fuga = {
age: number;
birth: number;
};
type Result = Merge<Hoge, Fuga> // {name: string, age: number, birth: number};
三項演算子で記述している部分を無理やりif文にすると以下のようになります。
if (U extends keyof K) {
return K[U];
} else if (U extends keyof T) {
return T[U];
} else {
return never;
}
参考文献
条件 (三項) 演算子 - JavaScript - MDN Web Docs
【JavaScript入門】条件(三項)演算子の使い方と活用例まとめ！