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 演算子を実行したときの値そのものが結果として返ってくるという、ちょっと珍しい仕様のため
こんな技が使えるのですね。
知っておくととても便利で、よく使う表現なので是非マスタ－してくださいね。
