JavaScriptで [] === [] が falseになるのがなぜなのかわからなかったので言語化してみた

こんにちは、いわむらです

先日ある処理の実装をしていた時に空配列の判定処理がうまくいかず試行錯誤している中で 空配列 === [] としてみた時にfalseが返ってきたのですがその時になぜfalseになるか説明できずもやもやしていたのでちょっと調べてみました

普段は 配列.length !== 0として比較していたのですが、今回気になった部分でやっていることを分解してみると以下のような記述と同じになります

const emptyArray = [];
const emptyArray1 = [];

console.log(emptyArray === emptyArray1); // false

// 参照同士の場合
const emptyArrayRef = [];
const emptyArrayRef1 = emptyArrayRef;

console.log(emptyArrayRef === emptyArrayRef1); // true

なぜ初めに検証した空配列同士の比較がfalseになるかというと、それぞれの変数が参照しているメモリ箇所を比較しているのでfalseになるということがわかりました

これでなぜ 空配列 === []がfalseを返すのが説明できるようになりました

ついでに元々実装しようとしていた部分がなぜうごかなかったのかも復習してみようと思います

type User = {
	id: number
    name: string
    description?: string[]
}

const userNoDescription = {
	id: 1,
    name: 'hoge',
} as User

// うまくいかなかない
const foo = function(description: string[]|undefined): void {
	if (description?.length !== 0) {
    	// do something
    }
}

foo(userNoDescription)

上の実装だとなぜうまくいかなかったのかは引数の descriptionがundefinedの場合も空配列ではない時の処理が実行されてしまうという所が原因でした

上の実装をいい感じに直すと以下のようになります

// type User と const userNoDescriptionは省略
const foo = function(description: string[]|undefined): void {
	if (Array.isArray(description) && description.length !== 0) {
    	// do something
    }
}

foo(userNoDescription)

これで期待した通りの動きになりました

すごく基本的な部分ですがちゃんと言語化できることって大事だなと気づきました。最後まで読んでいただきありがとうございました。