本記事では、JavaScriptで配列同士の比較について詳しく解説しています。全く同じ値を格納しているのにfalseになるといった摩訶不思議な現象を理解することが出来ます。
JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで
| 出版社 | 技術評論社 |
|---|---|
| 著者 | 山田 祥寛 |
| 発売日 | 2023/2/13 |
| ページ数 | 624ページ |
| レビュー (Amazon) | (4件) |
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ！
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ！
綺麗なコードが書けるようになる！
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
| 出版社 | オライリージャパン |
|---|---|
| 著者 | Dustin Boswell / Trevor Foucher |
| 発売日 | 2012/6/23 |
| ページ数 | 260ページ |
| レビュー (Amazon) | (620件) |
先輩くん
より良いコードを書きたい人におすすめの本だよ！
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです！
配列は参照先を比較している
まず始めに、下記のコードをご覧ください。
let num1 = 10;
let num2 = 10;
let arr1 = ["apple", "banana"];
let arr2 = ["apple", "banana"];
console.log(num1 === num2); // => true
console.log(arr1 === arr2); // => false同じ値が代入されている変数「num1,num2」を比較すると、trueが返されています。しかし、中身が同じ配列が代入されている変数「arr1,arr2」を比較すると、falseが返されています。
何故、このような結果になるのか、その理由は値のみが代入されている変数は「基本型」と呼ばれる型で、値そのものを比較します。そのため、純粋に10と10を比較しているからtrueが返されます。
しかし、配列が代入されている変数は「参照型」と呼ばれる型で、値ではなく参照先の比較をします。そのため、配列に代入されている値ではなく参照先のアドレスが一致していればtrueを返し、異なればfalseを返します。
配列をコピーして、再度比較してみましょう！
let arr1 = ["apple", "banana"];
let arr2 = arr1;
console.log(arr1 === arr2); // => true今度は、比較した結果trueになりましたね！このように「比較=値」だけではないことが理解できたと思います。今比較しているものは、基本型なのか？それとも参照型なのか？を正しく理解することで意図しない挙動を減らすことが出来るので、頭の片隅に置いておきましょう！
DMM WEBCAMP 
CodeCamp 
TechAcademy 
