こんにちは、さち です。
今回は、JavaScript の備忘録です。
「if」を使わずに条件の分岐ができる「条件演算子（三項演算子）」
単純な「if else」の代わりとして使えるので便利です。
しかし、条件演算子（三項演算子）は使う機会が少ないので
いざ必要な時に書き方を忘れていることが……。
というわけで、記事にしておきます。
論理演算子「and（&&）」「or（||）」を使った記述でも
シンプルな条件分岐ができるので、こちらも併せて書いておきます。
「条件演算子（三項演算子）」を使う
年齢（age）が20歳以上なら、オーダー（order）が通るという条件分岐です。
if で書くと、order を2回書く必要があるので何かスッキリしません。
if(age >= 20) {
order = 'OK';
} else {
order = 'NG';
}
条件演算子（三項演算子）を使うとこうなります。
order = (age >= 20)? 'OK' : 'NG';
order は一度書くだけで済みます。
変数に代入するだけの単純な条件分岐であれば
一行で書いても、読みやすさは十分です。
分岐条件の記述の カッコ() は無くても動きますが
読みやすいように、できるだけ付けた方が良いです。
ちなみに、こんなこともできます（個人的には非推奨ですが）。
var age = 18; var text = 'オーダーは、できま' + (age >= 20? 'す' : 'せん'); console.log(text);// オーダーは、できません
論理演算子「or（||）」を使う
サイト上で名前（name）を 入力（input）してもらいます。未入力の時は「匿名」とします。
if で書くと、name を2回書く必要があるので、やはりスッキリしません。
if(input) {
name = input;
} else {
name = '匿名';
}
論理演算子「or（||）」を使って書くとこうなります。
name = input || '匿名';
name も input も一度書くだけで済みます。
「条件演算子（三項演算子）」でも書けますが、こっちの方がシンプルですね。
何で論理演算子が if の代わりになるような動きをするのか
ざっくりと説明してみます。
論理演算子は、if などで複数の条件を書く時に使うのが主ですが
実は、どんな値でも true/false を判定するという仕組みがあります。
論理演算子の結果が決まると、最後に判定した値が返ってきます。
（※ false と判定される値のまとめは後述）
「or（||）」の特徴は
1つでも true があると結果が true に決まること。
つまり、最初に true と判定された値を返す仕組みとして使われます。
（すべて false の時は、最後に false と判定された値が返る）
上記の例の場合
ユーザーが名前を入力した時は input に何らかの「文字列」が入っています。
「文字列」は true と判定されるので
name にはユーザーが入力した文字列が入ります。
逆に、未入力のとき input に入っているのは「空の文字列」です。
「空の文字列」は false と判定されるので、次の '匿名' に進みます。
'匿名' は「空でない文字列」なので true と判定され、name には '匿名' が入ります。
論理演算子「and（&&）」を使う
会員（member）かどうかで、料金（price）を切り替えます。
if で書くと、price を2回書く必要があるので、やはりスッキリしません。
if(member === '会員') {
price = 1500;
} else {
price = 2000;
}
論理演算子「and（&&）」「or（||）」を使って書くとこうなります。
price = member === '会員' && 1500 || 2000;
前項でも書いた通り
論理演算子はどんな値でも true/false を判定する仕組みがあります。
（※どんな値が false と判定されるのかは後述）
「and（&&）」の特徴は
1つでも false があると結果が false に決まること。
つまり、最初に false と判定された値を返す仕組みとして使われます。
（すべて true の時は、最後に true と判定された値が返る）
例の場合、「member === '会員'」が true の時は次の「1500」に進みます。
0でない数値は true と判定されます。
この時点で or の結果が true に決まるので「2000」の判定は不要。
よって、price には「1500」が入ります。
逆に、「member === '会員'」が false のとき
and の結果は false に決まるので、次の「1500」の判定は不要。
この false を踏まえて or は「2000」 の判定に進み、ここで true になります。
よって、price には「2000」が入ります。
ただ、単純な if else なら条件演算子（三項演算子）で書けるので
論理演算子「and（&&）」を使う意味はあまりなさそうです。
price = (member === '会員')? 1500 : 2000;
さらに、条件分岐が3つあるものを考えてみます。
例は、小学生/中高生/一般（age）で料金（price）を切り替える場合です。
if(age === '小学生') {
price = 500;
} else if(age === '中高生') {
price = 1000;
} else {
price = 2000;// 一般
}
// 論理演算子「and」「or」で書くとこうなる
price = age === '小学生' && 500 || age === '中高生' && 1000 || 2000;
else if がある場合、条件演算子で書くと入れ子（ネスト）になってしまうので
「and（&&）」の出番かもしれません。
（「or（||）」が目立つので、一行で書いても可読性がそこそこある）
「and（&&）」は、「or（||）」のように単独で使うことは稀（まれ）です。
「and（&&）」だけで書けるものは、if でもシンプルに書けるでしょうから
わざわざ「and（&&）」を使う利点がないのだと思います。
ちなみに、「or（||）」と「and（&&）」では、優先順位が上なのは「and（&&）」です。
カッコを付けて、優先順位を可視化するとこうなります。
price = (age === '小学生' && 500) || (age === '中高生' && 1000) || 2000;
四則計算でいうと
「and（&&）」は、「かけ算（×）」「わり算（÷）」
「or（||）」は、「たし算（＋）」「ひき算（－）」とイメージすると理解しやすいかも。
false と判定される値
基本、「無い」「エラー」的なものが false と判定される仕様ですが
予想外の動作を防ぐためにも、ちゃんと理解しておきましょう。
// false と判定される値たち
var array = [
false,
undefined,// 未定義
null,// ヌル
NaN,// Not a Number (非数)
0,// 数値の0
'',// 空の文字列
];
for(var i=0; i<array.length; i++) {
var bool = (array[i])? true : false;
console.log(bool);// すべて「false」
}
逆に言えば、上記以外の値はすべて true と判定されます。
また、false と勘違いしやすい値に注意しましょう。
// true と判定される値たち
var array = [
true,
[],// 空の配列
{},// 空のオブジェクト
function(){},// 空のfunction
'false',// falseという文字列
'0',// 0という文字列
' ',// 空白の文字列
'',// ゼロ幅スペースのみの文字列
];
for(var i=0; i<array.length; i++) {
var bool = (array[i])? true : false;
console.log(bool);// すべて「true」
}
「配列」や「オブジェクト」は中身が空であっても true です。
（空かどうかで真偽が異なるのは「文字列」だけ）
数値の 0 は false と判定されますが
文字列の '0' は当然 true なのでデータ型に注意。
特に、サイト上で入力された数値は文字列として取得されるので
このミスにハマらないようにしましょう。
文字列は空のとき以外すべて true です。
ゼロ幅スペースのような見えない文字列でも true と判定されます。
当然のことなんですが
これらの記述は if で書くと冗長になる場合にのみ使いましょう。
複雑な if に使うと逆に読みにくくなります。
コメント