本記事では、JavaScriptで配列同士の比較について詳しく解説しています。全く同じ値を格納しているのにfalseになるといった摩訶不思議な現象を理解することが出来ます。
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
ポチップ
目次
配列は参照先を比較している
まず始めに、下記のコードをご覧ください。
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になりましたね！このように「比較=値」だけではないことが理解できたと思います。今比較しているものは、基本型なのか？それとも参照型なのか？を正しく理解することで意図しない挙動を減らすことが出来るので、頭の片隅に置いておきましょう！
