JavaScriptの論理演算子、三項演算子、nullish coalescing operatorの詳細
JavaScriptには、条件分岐や値の比較などに使用できる論理演算子、三項演算子、nullish coalescing operatorと呼ばれる3つの演算子があります。
1. 論理演算子
論理演算子は、2つのオペランド（式）を受け取り、論理的な値（trueまたはfalse）を返す演算子です。主な論理演算子は以下の3つです。
- && (論理積)：両方のオペランドがtrueの場合のみtrueを返します。
- || (論理和)：いずれかのオペランドがtrueであればtrueを返します。
- ! (論理否定)：オペランドの論理値を反転します。
例:
const isAdult = age >= 18;
const hasDriversLicense = true;
// 論理積：年齢が18歳以上で運転免許証を持っている場合のみtrue
const canDrive = isAdult && hasDriversLicense;
// 論理和：年齢が18歳以上または運転免許証を持っている場合true
const canRentCar = isAdult || hasDriversLicense;
// 論理否定：年齢が18歳未満の場合true
const isMinor = !isAdult;
コードは注意してご使用ください。
2. 三項演算子
三項演算子は、条件に基づいて3つのオペランド（式）を評価し、結果として1つの値を返す演算子です。
構文:
condition ? expression1 : expression2
コードは注意してご使用ください。
条件がtrueの場合、expression1が評価され、falseの場合はexpression2が評価されます。
例:
const age = 17;
const message = age >= 18 ? "成人です" : "未成年です";
console.log(message); // 出力: "未成年です"
コードは注意してご使用ください。
3. Nullish coalescing operator
Nullish coalescing operator (??) は、ES2020で導入された新しい演算子です。この演算子は、左側のオペランドがnullまたはundefinedの場合に右側のオペランドを返し、それ以外の場合は左側のオペランドをそのまま返します。
例:
const name = null;
const defaultName = "John Doe";
const fullName = name ?? defaultName;
console.log(fullName); // 出力: "John Doe"
コードは注意してご使用ください。
- 従来のnullチェックと比較:
const name = null;
const defaultName = "John Doe";
let fullName;
if (name === null || name === undefined) {
fullName = defaultName;
} else {
fullName = name;
}
console.log(fullName); // 出力: "John Doe"
コードは注意してご使用ください。
Nullish coalescing operatorは、従来のnullチェックよりも簡潔で分かりやすいコードを書けるため、nullとundefinedの両方をチェックしたい場合に便利です。
まとめ
論理演算子は、条件分岐や値の比較などに使用できます。
三項演算子は、条件に基づいて異なる値を返すことができます。
Nullish coalescing operatorは、nullまたはundefinedの値をデフォルト値に置き換えることができます。
これらの演算子を理解し、使いこなすことで、JavaScriptコードをより効率的で読みやすくすることができます。
参考資料
- JavaScriptの論理演算子:
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_Operators - JavaScriptの三項演算子:
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Conditional_operator - JavaScriptのnullish coalescing operator:
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coales
上記の説明は、基本的なものです。より複雑な設定が必要な場合は、それぞれの演算子の詳細を調べてください。
その他
JavaScriptの演算子についてもっと詳しく知りたい場合は、以下のリソースを参照してください。
MDN Web Docs: JavaScript の演算子:
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Expressions_and_operators
JavaScript Primer: 演算子:
https://jsprimer.net/basic/operator/