JavaScript で、デフォルト値設定に || (or 演算子) が使える理由

  • 2019/7/22
  • JavaScript で、デフォルト値設定に || (or 演算子) が使える理由 はコメントを受け付けていません。

JavaScript のデフォルト値設定の文法はちょっと珍しい

JavaScript 書いてますか?

コードを書いているとよくやりたくなる処理として、
「変数が未定義だったり、 null だったらデフォルト値を入れたい」
みたいなやつがあります。

素直に書くとこんな感じのやつ

var a = b;  // b にはユーザーの入力が入っている想定

// 入力が空なら
if (a === null) {
    // デフォルトの文字列を入れる
    a = ’default’;
}

もちろん、これで良いのですが、 Web 上にあるサンプルなんかを見ると、
こんな書き方がされているものをよく見かけるかと思います。

var a = b || ’default’;

先ほど4行ほどあったコードが、一行に、しかもシンプルにまとまりました。

でもなんで、こんな書き方ができるのでしょうか?

今回はそのからくりを見ていきます。

JavaScript のデフォルト値設定は、なぜ or 演算子で実施できるのか?

true と判定される値・false と判定される値

まず、問題の中核についてお話しする前に、一つ前提として理解しておくべきことがあります。
それは、値には true として扱われるものと、false として扱われるものがあると言うことです。

以下が、false として扱われる値

  • false
  • 0
  • (空の文字列)
  • null
  • undefined
  • NaN (Not a Number、計算不能の場合などに使用されます)

これ以外の値は全て true として扱われます。

つまり、どういうことかというと、

if (a !== null) {
  // a が null ではない時に実行される処理
}

としなくても、

if (a) {
  // a が null ではない時に実行される処理
}

このように if 文を書けば、 a が null の場合は勝手に if の () 内が false として判定されるため、
if ブロックの中は実行されないということですね。

(もちろん、一つ目の場合は a が null 以外の値であれば if ブロックが実行されるのに対し、
二つ目は a が null と判定される値である undefined や 0 などの場合でも実行されません。
このため、必ずしも置き換えられる訳ではないと言うことは知っておいてください)

JavaScript における or 演算子の挙動

さて、値には true, false と判定される値があることを知った上で、
次に or 演算子の挙動について調べてみましょう。

or 演算子は論理演算子というものになるのですが、MDN のその解説記事はこちら。

論理演算子

論理演算子 (Logical operators) は、基本的に真偽(論理)値とともに用いられ真偽値を返します。しかし、&& および || 演算子は真偽値ではない値も使うことができるため、その場合は、真偽値ではない値を返すことがあります。その場合の考え方は以下の「説明」の欄の記載の通りとなります。

この、論理 or の説明を読んでみますと、こんなことが書かれています。

使用方法: expr1 || expr2
説明(抜粋): expr1 を true と見ることができる場合は、expr1 を返します。そうでない場合は、expr2 を返します。

ここで重要なのは 「expr1 を返します。」の部分です。

つまり、例えば以下のコード

true || false

これは一つ目が true なので、文句なしで true が返ってきます。

※ いまいちイメージがわかないかもしれませんが、これは式であり、答えが返ってきます。
例えば、 1 + 2 を実行すれば 3 が返ってくるのと同じだと思ってもらったら良いです。
今回、or の計算をするには || を使うので、一般には見慣れない形の式になりますが、
プラス記号が、両側の数字を合計した結果を返すように、
|| の記号は条件に従って両側のどちらかの値を計算結果として返します。

では

3 || 5

これはどうでしょうか。
説明は、「expr1 を true と見ることができる場合は、expr1 を返します。」でしたね。

ここで、 3 は先ほどの false に判定されるリストに含まれていませんでした。
ということは、 3 は true として見ることができる値、ということなので、
3 || 5 の結果は 3 が返ってくるということになります。

重要なのは、判定に使われた値そのものが返ってくる、と言う点です。

もう一つ例題

null || 5

これはどうでしょうか。

null は false に判定されるリストに含まれていましたね。
ということは、説明文の「expr1 を true と見ることができる場合は、expr1 を返します。」には、
今回は当てはまらない (true とは見ることができない) ですね。

よって、説明の続きに「そうでない場合は、expr2 を返します。」とあるので、
expr2 の位置にある値 5 が返ってくると言うことになります。

結果として得られる挙動

さて、 or 演算子の挙動も分かりましたので、元の問題に戻りましょう。

var a = b || ’default’;

この場合、まず or 演算子を判定します。

b || ’default’

ここで、変数 b に格納されている値が null などの false として判定されるものでなければ
この計算結果は b になります。
または、 null などの false として判定される値が入ってる場合は、
or 演算子の後ろ側の値 ’default’ が返されます。

つまり、or 演算子の計算結果として、 b が null でなければ

var a = b;

b が null ならば

var a = ’default’;

となり、確かに変数 a は、 b が入力されていればその値を、されていなければ ’default’ の文字が
格納されることになりますね。
(繰り返しになりますが、 b が 0 等の値の場合も false と判定され、デフォルト値が格納されます。
b に正しい値として 0 等が渡される可能性がある場合は使用できない方法ですね)

まとめ

意外にあまり解説されていない JavaScript の or 演算子を使ったデフォルト値設定の考え方、
ご理解いただけましたでしょうか。

ちなみに、 JavaScript 以外の言語では、 or 演算子の結果は true, または false のどちらかになることが多いです。
JS は or 演算子を実行したときの値そのものが結果として返ってくるという、ちょっと珍しい仕様のため
こんな技が使えるのですね。

知っておくととても便利で、よく使う表現なので是非マスタ-してくださいね。

Takato Ezaki

Takato Ezaki小中高の塾講師からエンジニア

投稿者プロフィール

福岡で Web 系のエンジニアをしています。

中高の理科教師免許を取り、起業に 2 年間トライした後エンジニアの道へ入りました。

化学反応の中では Belousov-Zhabotinsky 反応が大好きです。

この著者の最新の記事

関連記事

コメントは利用できません。

募集中!(o゜▽゜)o

エンジャパン
求む、社長!
follow us in feedly

コッチもヨロシク!





最近のネタ!

  1. 2019-8-19

    Web で物理アニメーション・その3 「簡単な物理法則に従うアニメーションを作ろう」

    前回の回答 前回の回答から行きましょう。 前回の宿題は 以下のように、近づいて右下に抜けてい…
  2. 2019-8-15

    2019年7月度社員総会&懇親会@Nagoya

    愛知は、わざいかぬっかど! 大田です。 さて!(笑) 今回は7/10(水)に行われた、名古屋社員総…
  3. 2019-8-13

    2019年7月度社員総会&懇親会@東京

    はじめに 今年もやってきました!みんな大好き、夏季休暇の季節! 40度近い気温が毎日どこかで計測さ…
  4. 2019-8-12

    Web で物理アニメーション・その2 「単純なアニメーションを作ろう」

    前回の回答 さて、まずは前回の宿題の答え合わせから。 問題は 三角形を一つ、canvas 上…
  5. 2019-8-5

    Web で物理アニメーション・その1 「canvas で絵を描いてみよう」

    アニメーションを作ってみよう! 最近、動きがある Web ページが多くなりましたね。 ここ数年で …
ページ上部へ戻る

当サイトに掲載されているコンテンツ(文書、画像等)は、許可なく複製・転用等する事を禁じます。

「フェアネス方式®」(登録6150741)は、日本国内における株式会社エージェントグローの登録商標です。

当サイトでは最低限必要と考えられる場合において、会社名/サービス名/商品名などを記載している場合があります。
これらはあくまでも説明の必要性に応じて用いているものであり、各社の権利等を侵害を目的とするものではございません。
不適切と考えられる場合には、当社お問い合わせフォームよりご連絡ください。

当サイトでは®や™などの表記を省略させていただいております。