JavaScript 非破壊的に要素を追加した配列を生成する

結論

push()を使わず、スプレッド構文を使って新たな配列を生成する。

サンプル

sample.js

let students = [['sato'], ['suzuki'], ['takahashi'], ['tanaka'], ['ito']];
//配列の各要素にインデックスの値を追加したい。e.g. ['sato'] -> ['sato', 0]

push()

push.js

let addIndex = students.map(function(el, idx) {
 el.push(idx);
 return el;
});
console.log(addIndex); // [['sato', 0], ['suzuki', 1], ['takahashi', 2], ['tanaka', 3], ['ito', 4]] 

// 元の配列も変更されてしまう。
console.log(students); // [['sato', 0], ['suzuki', 1], ['takahashi', 2], ['tanaka', 3], ['ito', 4]]

スプレッド構文

spread.js

let addIndex = students.map((el, idx) => [...el, idx]);
//インデックスが追加されている。
console.log(addIndex); // [['sato', 0], ['suzuki', 1], ['takahashi', 2], ['tanaka', 3], ['ito', 4]] 

// 元の配列はそのまま。
console.log(students); // [['sato'], ['suzuki'], ['takahashi'], ['tanaka'], ['ito']];

本記事の内容は別記事にて@shiracamusさんにご教授頂きました！
ありがとうございました！