JavaScriptでパイプ2つを使いこなす5つの方法

2023.04.302024.10.01

この記事は約4分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

はじめに

この記事を読めば、JavaScriptでパイプ2つ(||)を使いこなすことができるようになります。

JavaScriptでは、パイプ2つ(||)は「OR演算子」として使われます。

これは、複数の条件を比較する際に便利な演算子です。

パイプ2つ(||)を使って複数の条件を判断するコードを紹介します。

この例では、ageが18歳以上かつ国籍が’Japan’の場合に成年と判断しています。

let age = 20;
let nationality = 'Japan';

if (age >= 18 || nationality === 'Japan') {
  console.log('成年です。');
} else {
  console.log('未成年です。');
}

パイプ2つ(||)を使ってデフォルト値を設定するコードを紹介します。

この例では、userNameが未定義の場合にデフォルトの名前を設定しています。

let userName;
let displayName = userName || '名無しさん';

console.log(displayName);

短絡評価を利用するコードを紹介します。

このコードでは、パイプ2つ(||)を使って、左辺が偽である場合にのみ右辺の式が評価されます。

この例では、messageが未定義の場合にのみ、デフォルトのメッセージを設定しています。

let message;
let defaultMessage = 'こんにちは、世界！';

let outputMessage = message || (message = defaultMessage);

console.log(outputMessage);

真偽値を返す関数を使って、条件に応じた処理を行うコードを紹介します。

この例では、isEven関数を使って、数値が偶数かどうかを判定しています。

function isEven(num) {
  return num % 2 === 0;
}

let number = 10;

if (isEven(number)) {
  console.log('偶数です。');
} else {
  console.log('奇数です。');
}

パイプ2つ(||)を使って、オブジェクトのプロパティへアクセスする際に、存在しないプロパティにアクセスした場合のデフォルト値を設定するコードを紹介します。

この例では、userオブジェクトのnicknameプロパティが存在しない場合、デフォルトのニックネームを表示しています。

let user = {
  name: '山田太郎',
};

let nickname = user.nickname || 'ニックネーム未設定';

console.log(nickname);

パイプ2つ(||)は、左辺の値がfalsy（偽と評価される値）の場合に右辺の値が評価されます。
しかし、0や空文字列のようなfalsyな値が意図的に使われている場合、誤った結果を返すことがあります。
そのような場合は、厳密な比較演算子(===や!==)を使って条件をチェックしましょう。
短絡評価を利用する際には、副作用を伴う関数や式を右辺に置かないように注意してください。
左辺が真である場合、右辺の式は評価されず、意図しない挙動が起こることがあります。