タイトルの通り。
知らなかったので記事にまとめます。
三項演算子とは
その名の通り三項、つまり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
条件演算子の入れ子構造について
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;
}
どういう時に使うか
個人的には可読性が大きく下がるため、乱用することはあまりしたくない。
一方で記述量を減らすことができるため、関数コンポーネントなど、
最初に大きく整備して長く運用していくようなファイルでは活用できるのではないか。
また、型定義では活用できる。
// 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, sex: string};
三項演算子で記述している部分を無理やり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入門】条件(三項)演算子の使い方と活用例まとめ！
Comments
Bool値を返すだけなら三項演算子は不要ですね。
これで十分かと。
Let's comment your feelings that are more than good