アジェンダ

この記事では、JavaScriptとTypeScriptで使用される論理演算子、比較演算子、その他の演算子についてまとめました。

論理演算子

1. AND (`&&`)

ANDは短絡評価で、

左辺がfalsyであれば、その左辺の値が直ちに返され、右辺は評価されません。
左辺がtruthyであれば、右辺の値が返されます。

ANDが両辺がtruthyであるか否かを見たいとするならfalsyで直ちに返されるというのは納得できると思います。

どちらかがtrueであればtrueを返し、どちらも false である場合、false を返します。

if (true && true) {
    console.log("Both are true"); // このコードは実行されます。
}

// 短絡評価の例
console.log(undefined && 123); // undefined
console.log('HIT' && 'RUN'); // 'RUN'

2. OR (`||`)

ORもAND同様に短絡評価で、

左辺がtruthyであれば、その左辺の値が直ちに返され、右辺は評価されません。
左辺がfalsyであれば、右辺の値が返されます。

ORが、両辺のどこかのtruthyがあるか否かを見たいとするならtruthyで直ちに返されるというのは納得できると思います。

両方の値がtrueである場合にtrueを返し、それ以外の場合にはfalseを返します。

if (true || false) {
    console.log("At least one is true"); // このコードは実行されます。
}

// 短絡評価の例
console.log(undefined || 123); // 123
console.log('DEAD' || 'ALIVE'); // 'DEAD'

3. NOT (`!`)

オペランドが false であれば true を返し、true であれば false を返します。

if (!false) {
    console.log("Not false is true");
}

また、!!を二つ続けることで二重否定をすることができます。二重否定を使用すると値を真偽値に強制的に変換します。

const truthyValue = !!1; // true
console.log(truthyValue);

このコードを実行すると、truthyValueはtrueが代入され、コンソールにtrueと表示されます。

4. Nullish Coalescing (`??`)

null または undefined でない場合に左辺のオペランドを返し、そうでなければ右側のオペランドを返します。

const name = null ?? "default name";
console.log(name);  // "default name"

比較演算子

1. 等価 (Equality) (`==`)

二つの値が等しいかどうかをチェックしますが、型変換を行います。

if ("2" == 2) {
    console.log("Equal with type coercion");
}

2. 厳密等価 (Strict Equality) (`===`)

二つの値が等しいかどうかをチェックしますが、型変換を行いません。

if ("2" === 2) {
    console.log("Strictly not equal");
} else {
   console.log("Strictly not equal");
}

3. 小なり (`<`)

さhのオペランドが右辺のオペランドより小さい場合に true を返します。

if (5 < 10) {
    console.log("5 is less than 10");
}

4. 大なり (`>`)

左辺のオペランドが右辺のオペランドより大きい場合に true を返します。

if (10 > 5) {
 console.log("10 is greater than 5");
}

その他の便利な演算子

1. 条件演算子（三項演算子）`? :`

条件に基づいて二つの値のうちの一つを返します。

const result = 5 > 3 ? "Greater" : "Lesser";
console.log(result);  // "Greater"

2. オプショナルチェイニング演算子 `?.`

?. 演算子の機能は . チェーン演算子と似ていますが、参照が nullish (null または undefined) の場合にエラーとなるのではなく、式が短絡され undefined が返されるところが異なります。関数呼び出しで使用すると、与えられた関数が存在しない場合、 undefined を返します。

const obj = { a: { b: "value" } };
const value = obj.a?.b;  // "value"
const undefinedValue = obj.c?.b;  // undefined
console.log(value);
console.log(undefinedValue);

問題の紹介

演算子の理解を定着させるために以下に問題を作ったので興味がある人はチェックしてみて下さい。

TypeScript 演算子道場

リファレンス