Java Scriptの基礎その15　論理演算子の解説

イントロダクション

JavaScriptには、条件に応じて異なる値を返すための便利な論理演算子がいくつかあります。本記事では、「OR演算子 (||)」「AND演算子 (&&)」「Nullish Coalescing演算子 (??)」の使い方を詳しく解説し、それぞれの動作や出力結果を見ていきます。これらの演算子を理解することで、コードの読みやすさと効率を向上させることができます。

OR演算子 (||)

OR演算子は、左側のオペランドが真（truthy）であればそれを返し、そうでなければ右側のオペランドを返します。

OR演算子の基本

console.log("" || "Miki"); // "Miki"
console.log(true || 0); // true
console.log(undefined || null); // null
console.log(undefined || 0 || "" || "Hello" || 23 || null); // "Hello"

これらの例では、最初に真（truthy）の値が返されることが確認できます。

OR演算子と変数

変数にOR演算子を使うことで、デフォルト値を設定することができます。

let sampleNumber = 20;
const chooseNumber_A = sampleNumber || 10;
console.log(chooseNumber_A); // 20

sampleNumber = 0;
const chooseNumber_C = sampleNumber || 10;
console.log(chooseNumber_C); // 10

sampleNumberが0の場合、chooseNumber_Cには10が設定されます。

AND演算子 (&&)

AND演算子は、左側のオペランドが偽（falsy）であればそれを返し、そうでなければ右側のオペランドを返します。

AND演算子の基本

console.log(0 && "Mika"); // 0
console.log(7 && "Mika"); // "Mika"
console.log("Hello" && 23 && null && "Mika"); // null

最初に偽（falsy）の値が返されることが確認できます。

AND演算子とオブジェクト

オブジェクトのプロパティが存在する場合に処理を実行する方法を示します。

const hamburgerShop = {
  mainBurgers: [
    "Big Burger",
    "Cheese Burger",
    "Teriyaki Burger",
    "Fish Burger",
  ],
  orderHamburger: function (burger_1, burger_2) {
    console.log(burger_1, burger_2);
  },
};

if (hamburgerShop.mainBurgers) {
  hamburgerShop.orderHamburger("Big Burger", "Double Patty Burger");
}

hamburgerShop.mainBurgers &&
  hamburgerShop.orderHamburger("Big Burger", "Double Patty Burger");

どちらの方法も同じ結果をもたらします。

// "Big Burger Double Patty Burger" と表示されます

Nullish Coalescing演算子 (??)

Nullish Coalescing演算子は、nullまたはundefinedである場合に右側のオペランドを返します。

Nullish Coalescing演算子の基本

let sampleNumber = 0;
const chooseNumber_D = sampleNumber ?? 10;
console.log(chooseNumber_D); // 0

sampleNumberが0の場合でも、そのまま0が返されます。

Nullish Coalescing演算子とオブジェクト

オブジェクトのプロパティがnullまたはundefinedの場合にデフォルト値を設定する方法を示します。

const restAPI_Omega = { title: "Pipeline Omega", location: "東京都港区田町", minimemAccident: 10 };
const restAPI_Alpha = { title: "Pipeline Alpha", location: null, minimemAccident: 0 };
const restAPI_Beta = { title: "Pipeline Beta" };

restAPI_Omega.minimemAccident ||= 10;
restAPI_Alpha.minimemAccident ||= 10;
restAPI_Beta.minimemAccident ||= 10;

console.log(restAPI_Omega); // { title: 'Pipeline Omega', location: '東京都港区田町', minimemAccident: 10 }
console.log(restAPI_Alpha); // { title: 'Pipeline Alpha', location: null, minimemAccident: 10 }
console.log(restAPI_Beta);  // { title: 'Pipeline Beta', minimemAccident: 10 }

restAPI_Omega.minimemAccident ??= 10;
restAPI_Alpha.minimemAccident ??= 10;
restAPI_Beta.minimemAccident ??= 10;

console.log(restAPI_Omega); // { title: 'Pipeline Omega', location: '東京都港区田町', minimemAccident: 10 }
console.log(restAPI_Alpha); // { title: 'Pipeline Alpha', location: null, minimemAccident: 10 }
console.log(restAPI_Beta);  // { title: 'Pipeline Beta', minimemAccident: 10 }

restAPI_Omega.location ??= "<Location Unknown>";
restAPI_Alpha.location ??= "<Location Unknown>";
restAPI_Beta.location ??= "<Location Unknown>";

console.log(restAPI_Omega); // { title: 'Pipeline Omega', location: '東京都港区田町', minimemAccident: 10 }
console.log(restAPI_Alpha); // { title: 'Pipeline Alpha', location: '<Location Unknown>', minimemAccident: 10 }
console.log(restAPI_Beta);  // { title: 'Pipeline Beta', location: '<Location Unknown>', minimemAccident: 10 }

これらの例では、プロパティがnullまたはundefinedの場合にデフォルト値が設定されることが確認できます。

まとめ

本記事では、JavaScriptのOR演算子、AND演算子、Nullish Coalescing演算子について解説しました。これらの演算子を活用することで、コードの可読性と効率を向上させることができます。それぞれの演算子の特性を理解し、適切に使用することが重要です。これからも練習を重ねて、スムーズに使いこなせるようになりましょう。

Githubでも公開してるよ！

先ほどのコードはGithubで公開しているよ。
ここ見てね！