[JS] 42==trueがfalseになるわけ

2019-01-11T17:02:40+09:00

JSを少しでも書いてる人は値を比較するときに必ず===を使えと教わることだと思います。==がいかにエンジニアの直感に背き、値を比較するかを書いてみようと思います。

まずは、以下のコードが何をプリントするか予想してみてください。

console.log(42 == true); // ?
console.log('42' == true); // ?
console.log(1 == true); // ?
console.log(0 == false); // ?

.
.
.

予想できましたか？結果はこうなります。

console.log(42 == true); // false
console.log('42' == true); // false
console.log(1 == true); // true
console.log(0 == false); // true

42 == trueや'42' == trueはtrueになると予想したのではないでしょうか。なぜなら、42も'42'も単体ではtruthyだからです。

その証拠にifで単体で比較するとtrueになります。

if (42) {
  console.log('42 is true!');
} else {
  console.log('42 is false!');
}
if ('42') {
  console.log('true');
} else {
  console.log('false');
}

これらはを実行するとどちらも42 is true!とtrueが出力されます。なので、型強制(coercion)が行われtrue == trueが実行されたと考えるのが自然です。

ところがそうなりません。これはスペックを読むと理解することができます。(Abstract Equality Comparisonの6と7より)

x == y
If Type(x) is Boolean, return the result of the comparison ToNumber(x) == y.
If Type(y) is Boolean, return the result of the comparison x == ToNumber(y).
(日本語)
もし、xがBooleanなら、ToNumber(x) == yを返す
もし、yがBooleanなら、y == ToNumber(y)を返す

つまり、実際に起きていたのは「Boolean型じゃない値をBoolean型に変換し比較」ではなく、「Boolean型の値をNumber型に変換し比較」だったのです。
Boolean型をNumber型に変換するとtrueが1になり、falseが0になります。そうすると、42 == 1と'42' == 1の比較になり当然結果はfalseになります。

同じ理由で1 == trueはtrueになり、0 == falseもtrueになります。

なので、タイトルの「JSで42==trueがfalseになるわけ」は「==で比較される値のうち片方がBooleanの場合、Booleanの値をNumberに型強制して比較するようにSpecに書かれているから」が答えになります。

.
.
.

せっかくなので、もう少し==を見てみましょう。片方がオブジェクトでもう片方がString, Number, Symbolの場合、オブジェクトをプリミティブ型に変換して比較することが指定されています。(7.2.14 Abstract Equality Comparisonの8と9より)

x == y
If Type(x) is either String, Number, or Symbol and Type(y) is Object, return the result of the comparison x == ToPrimitive(y).
If Type(x) is Object and Type(y) is either String, Number, or Symbol, return the result of the comparison ToPrimitive(x) == y.
(日本語訳)
もし、xがString, Number, Symbolならx == ToPrimitive(y)を返す
もし、yがString, Number, SymbolならToPrimitive(x) == yを返す

ここで使われるToPrimitiveはJSエンジン内部で使われる処理のことで、オブジェクトのプロトタイプチェーンには定義されていません。ここではvalueOf(), toString()を順番に呼び、返ってきた値がプリミティブならその値を返す、プリミティブにならなかったらTypeErroeを返すという処理になっています。(7.1.1 ToPrimitive)

これを使ってみるとこのような面白い結果になります。

console.log(1 == [1]); // true
console.log(123 == [123]); // true
console.log(true == [1]); // true
console.log(false == []); // true

1 == [1]は[1].valueOf()が[1]を返すので、[1].toString()を呼びます。そこでプリミティブの"1"が返ってくるため、1 == "1"の比較結果になります。型強制(coercion)が起こりtrueになります。

123 == [123]も前のサンプルと同様123 == "123"の比較になります。

true == [1]はトリッキーです。trueがあるため、まずここを処理しないといけません。trueはNumber型に変換され、1 == [1]になります。これは最初のサンプルと同じなため、同じステップを踏みtrueになります。

false == []もいくつかのステップがあります。まず、falseが0になり0 == []になります。[].valueOf()は[]のため、[].valueOf()の戻り値が使われます。0 == ""の比較です。""がNumber型に変換され0になり0 == 0はtrueです。空文字が0になるのは直感的ではないですが、そうなっています。

このように予期しない結果になるため、比較するときは必ず===を使いましょう。

(参考)
Abstract Equality - You Dont Know JS

JavaScriptのPrototype周りの勉強

2018-12-31T17:36:58+09:00

以下のようなコードを考えてみます。

function Person(f, l) {
    this.firstName = f;
    this.lastName = l;
    this.fullName = function() {
        return `${this.firstName} ${this.lastName}`;
    }
}
var a = new Person('a', 'x');
var b = new Person('b', 'y');
a.fullName(); // "a x"
b.fullName(); // "b y"

ここのfunction Personはnewキーワードを使うことで新しいオブジェクトが返されるため、オブジェクトコンストラクタと呼ばれます。
ここで、インスタンスはもう作られていますが、新しい関数をaとb、さらにこれから作られるすべてのPersonインスタンスに適用したいケースを考えます。ここでは、あいさつを表示するgreet関数を加えます。

Person.prototype.greet = function() {
    console.log(`Hello ${this.fullName()}!`);
}
a.greet(); // "Hello a x!"
b.greet(); // "Hello b y!"
// 新しいインスタンスにも適用されるかをテストする
var c = new Person('c', 'z');
c.greet(); // "Hello c z!
// greet関数の書き換えも可能。
Person.prototype.greet = function() {
    console.log(`Hello ${this.fullName()}! Have a nice day!`);
}
a.greet(); // Hello a x! Have a nice day!
b.greet(); // Hello b y! Have a nice day!
c.greet(); // Hello c z! Have a nice day!

こういうことが可能なのは、インスタンスとインスタンスの元になったPersonはPerson.prototypeが指してるオブジェクトを共有しているからです。図にするとこうなります。

すべてのインスタンスがPerson.prototypeを.__proto__で参照しています。

JSはクラス構造がないかわりにオブジェクト同士を参照していくオブジェクトチェーンが存在します。これは、指定されたプロパティがない場合、.__proto__でつながってるオブジェクトを再帰的にみていく仕組みのことです。これのおかげでインスタンスにgreet関数がなくてもgreet関数を呼び出すことができました。

以下参考になったリンクを張っておきます。
図で理解するJavaScriptのプロトタイプチェーン
 や...やっと理解できた！JavaScriptのプロトタイプチェー

1kohei1の投稿 - Crieit

[JS] 42==trueがfalseになるわけ

JavaScriptのPrototype周りの勉強