Javascriptの演算子やら&&やら||やらを備忘録

Jsで詰まったところを残しておくメモ。

その1

この２つの式は同じ。(※厳密には異なります、ちょっと下の「ワンポイント：true扱いされる値とfalse扱いされる値」を参照)

javascript

var hensu = a && b && c;

javascript

var hensu;
if(a == false){
    hensu = a;
}else if(b == false){
    hensu = b;
}else{
    hensu = c;
}

aが「true扱いされる値」なら次に進み、「false扱いされる値」が出たらその時点での値を返す。
たとえば、a = 1、b = "素数"、c = 0、なら、aもbもtrue扱いなのでスルーされ、hensu = 0となる。

ワンポイント：条件式と返り値

たとえばvar hensu = (a > 20);で、a = 10だった場合、
hensuに入る値はfalseとなる。a = 22なら、hensuに入る値はtrue。
条件式にすると値そのものではなく真偽値を返すというのはつまづきやすい部分だ。

or条件の場合

なお、&&ではなく||を利用すると逆のことが起こる。

javascript

var hensu = a || b || c;

javascript

var hensu;
if(a == true){
    hensu = a;
}else if(b == true){
    hensu = b;
}else{
    hensu = c;
}

こちらはaがfalse扱いされる値ならbに進み、bでもfalse扱いされるならcに移動している。
たとえば、a = 0、b = "はなまるぴっぴ"、c = undefined、なら、hensuには最初に出たtrue値であるbが入る、hensu = "はなまるぴっぴ"となる。

ワンポイント：true扱いされる値とfalse扱いされる値

わざわざtrue、falseではなく、true「扱いされる値」とfalse「扱いされる値」と書いてあるのには理由がある。
というのも、コンピューターの言う「false」は複数存在するのだ。

Javascriptでは以下の8種類の値が「false」とみなされる。
0 -0 null false NaN undefined 空の文字列( "" '' )

逆に言えばそれ以外の値は「trueである」と認識されるというわけだ。
勘違いのないように言っておくと、"NaN"とか'null'とか書くとtrueとして通ってしまう。

その2

この２つの式は同じ。

javascript

 var c = a == 15 && 'this is 15' || 'not 15';

javascript

var c;
if(a == 15){
    c = 'this is 15';
}else{
    c = 'not 15';
}

「その1」の原理を使った応用。
var c = ((a == 15 && 'this is 15') || 'not 15');と補ってやるとわかりやすいだろう。
まず、a == 15がtrueかfalseかがチェックされる。
trueならa == 15がスルーされ、(a == 15 && 'this is 15')は'this is 15'で確定する。
そんで('this is 15' || 'not 15')の式に回されるのだが、||はtrueの値が出た時点で処理を終えてその先には進まないため
c = 'this is 15'となる。

falseなら(a == 15 && 'this is 15')はfalseで確定し、(false || 'not 15')の式に回される。
先述した通り||はfalseをスルーするので最終的な値は'not 15'になる、でそれがcに代入されて
c = 'not 15'というわけだ。

その3

上の「ワンポイント：条件式と返り値」で書いた通り、
条件式を書く、つまり>、<、==、!を使うとその値は強制的にtrueかfalseに変換される。
これを応用して、以下のような式を組むことができる。

以下の２つの式は同じである。

javascript

var B = !(A % 4);

javascript

var B;
if(A % 4 === 0){
    B = true;
}else{
    B = false;
}

こちらは、余りが出るかどうかを判断する式。
余りが出ない＝余りは0＝0はfalse扱い、という解釈により、!(A % 4)とすると、Aが4で割れる数ならtrue、Aが4で割れない数ならfalseが返される。

なお、!(14 - 14)という式を書くとtrueが返される。

その4

この２つの式は同じ。
こちらの記事が秀逸な解説だったのでそちらから引用。。。

javascript

var result;
if(str === 'piyo'){
  result = 'piyo！！';
} else {
  result = 'not piyo…';
}

javascript

var result;
result = str === 'piyo' ? 'piyo！！' : 'not piyo…'

その5

カンマの使い方。

javascript

// 一気に変数を定義できる！（中身はundefinedになります）
var a, b, c, d;

// 最後の行に ; がついてさえいれば、
// 途中のコードの文末を,にしても大丈夫！
console.log(a),
console.log(b),
console.log(c),
console.log(d);

// 値を仕込みたい場合は = でつなぐ
var e = f = g = h = 'marufoi! ';

console.log(e + f + g + h);


a = 1;
b = 2;
c = 3;

// 代入が優先されるので、1が入る
var kon01 = a, b, c;
console.log(kon01); // 1

// 左から順番に実行（するので、3が入る）
var kon02 = (a, b, c);
console.log(kon02); // 3

参考文献

https://qiita.com/smicle/items/7d3b9881834dc0142fb7
https://qiita.com/Imamotty/items/bc659569239379dded55
https://qiita.com/amamamaou/items/785d1fa6f32d5586ed49
https://teratail.com/questions/38967