配列のコピー

配列の要素が文字列や数値の場合

.slice() もしくは.concat()で元の配列から値をコピーできる
→参照ではないので加工しても元の配列に影響しない

const arr = [1,2,3,4,5];
const arrCopy = arr.slice(); 
arrCopy[0] = 6;
console.log(arr); // 1,2,3,4,5
console.log(arrCopy); // 6,2,3,4,5

const arr2 = ['A','B','C'];
const arrCopy2 = arr2.concat(); 
arrCopy2[2] = `Z`;
console.log(arr2); // A,B,C
console.log(arrCopy2); // A,B,Z

配列の要素がオブジェクトの場合

.slice() や.concat()ではオブジェクトは参照コピーになってしまう。

const arr = [
{id:'a'},
{id:'b'}
];
const arrCopy = arr.slice(); 
arrCopy[0].id = 'z';
console.log(arr[0]); // {id:'z'}
console.log(arrCopy[0]); // {id:'z'}

元の配列まで変更されてしまった！

配列の要素がオブジェクトの場合、コピーには.map()を使う

const arr = [
{id:'a'},
{id:'b'}
];
const arrCopy = arr.map(arr => ({id:arr.id}));
arrCopy[0].id = 'z';
console.log(arr[0]); // {id:'a'}
console.log(arrCopy[0]); // {id:'z'}

元の配列はそのまま！やったー

以下メモ

.map()

配列.map((引数) => {配列内の要素を加工するコールバック関数});

・引数には配列の要素の値が入る
・配列内の要素が1つずつ関数で加工され新しい配列が生成される
・returnで戻り値を返す必要がある

上記の例の場合、変数arrの各要素はオブジェクトなので
引数arrには各オブジェクト　{id:'a'}、{id:'b'}　が入る
コールバック関数で新たにオブジェクトを生成し、引数arrのidをセット
({id:arr.id})　
後述、アロー関数で記述しているのでreturnは省略。

アロー関数

(引数) => {関数}が基本形で
引数が1つの場合()が、関数も一行の場合{}が省略できる
関数の{}を省略する際はreturnも省略可
引数 => 関数

ただし関数にオブジェクトが入る場合、
関数を囲む{}とオブジェクトリテラルの{}が区別できず
エラーとなってしまうため()で囲む必要がある
引数 => ({オブジェクト})