勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptで配列をコピー後に値変更した際、元の配列の値も変更される点を解消する方法

  JavaScript

JavaScriptで配列をコピー後に値変更した際、元の配列の値も変更されてしまう。「const array1 = array2」のようにコピーすると配列の中身が入るわけではなく、インスタンスを参照するアドレスが入るため書き換わってしまう模様。スプレッド構文というもので対応できるようなので以下に実装方法をメモ。

 

ソースコード

NGケース

const test_array1 = [100, 200];
const test_array2 = test_array1;

test_array2[0] = 300;

console.log(test_array1); //Array [ 300, 200 ]
console.log(test_array2); //Array [ 300, 200 ]

感覚的にはtest_array2のみ書き換わりそうだけどtest_array1も書き換わるというNGケース。

OKケース

const test_array1 = [100, 200];
const test_array2 = [...test_array1];

test_array2[0] = 300;

console.log(test_array1); //Array [ 100, 200 ]
console.log(test_array2); //Array [ 300, 200 ]

test_array2のみ正常に書き換わった点が確認できる。

 

スプレッド構文

リファレンス

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

使いどころ

今回のような配列のコピー以外では以下参考サイトが分かりやすい。

https://zenn.dev/robon/articles/4dd535ecb71d27

https://qiita.com/Nossa/items/e6f503cbb95c8e6967f8

 

所感

スプレッド構文について使いどころがイマイチ分からず、またあまり見慣れない構文のため敬遠していたが、今回のようなピンポイントな使いどころが分かったのは勉強になった。

 - JavaScript

  関連記事

「input type="number"」のテキストボックスを桁数制限且つ半角数値のみ入力可にする方法

「input type="number"」のテキストボックスに対して「2桁まで」 ...

日本地図のクリッカブルマップをjQueryで実装する方法(japan-map)

JavaScriptもしくはjQueryで日本地図を表示し、都道府県や八地方区分 ...

jQueryで同サーバ内のCSVを読み込み、配列やオブジェクトとして取り扱う方法

先日バニラJavaScriptで同サーバ内のCSVを読み込み、配列として取り扱う ...

JavaScriptにてテキストボックスにサジェスト機能を実装できる「autoComplete.js」の利用方法

以前にjQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する ...

formでファイルを選択した際にファイル名やサイズ、形式を調べる方法

フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか?」「拡 ...