【JavaScript】 論理演算子を用いたif文の省略

はじめに

この記事では、JavaScriptの論理演算子を用いてif文を省略したコードについてまとめます。

論理演算子について

論理演算子の&&と||の2つを用いていきます。
わかりやすく言うと、&&はかつ、||はまたはとなります。

&&

A && B 
// Aを評価してtrue(trusy)の場合、Bを返す
// Aを評価してfalse(falsly)の場合、Aを返す

console.log(2 && 3); // 3
console.log(0 && 3); // 0

||

A || B 
// Aを評価してtrueの場合、その時点でtrueを返す。
// Aを評価してfalseの場合、Bを評価しtrueの場合は、全体としてtrueを返す。

console.log(2 < 0 || 3 > 0); //true
console.log(2 < 0 || 3 < 0); //false

これらを利用して、if文を省略したコードを書いていきます。

ifを用いたコード

ifを用いたコード

const Num = 1;
if (Num == 1) {
 console.log("Numは1でした"); 
}

論理演算子(&&)を用いて if文 を省略

論理演算子(&&)を用いたコード

const Num = 1;
Num == 1 && console.log("Numは1でした"); 

左辺のNum == 1がtrueの場合、右辺が実行されます。

論理演算子(||)を用いて if文 を省略

論理演算子(||)を用いたコード

const Num = 1;
Num == 2 || console.log("Numは2ではないです"); 

左辺のNum == 1がfalseの場合、右辺が実行されます。
※この使われ方は、ややこしいので使うことは無いと思います。

例文

例えば、キーボードでEnterキーを押した場合のイベントを実装してみます。

ifを用いたコード

document.addEventListener("keydown", (evt) => 
 if (evt.code === "Enter") {
 console.log("ENTERが押されました"));
 }
// keydown：キーボードのキーを押したときに発動
// evt.code：キーボードのキー

論理演算子(&&)を用いたコード

document.addEventListener("keydown", (evt) => 
evt.code === "Enter" && console.log("ENTERが押されました"));

ifを用いたコードと比較すると、スタイリッシュな感じで良いですね！