JS で関数型っぽく書きたいときは、スプレッド構文を使用して配列に値の追加や連結を行う

React の勉強中にここもよく出てくるのでまとめ。

まず前提として、関数型っぽく書こうとする場合には、破壊的な関数は使用せずに非破壊的な関数を使用すると良い。

qiita.com

qiita.com

例えば特定の要素を削除する場合には、なるべく filter を使用する。

console.log([1,2,3,4,5].filter(num => num !== 1)) // [ 2, 3, 4, 5 ]

じゃあ配列に要素を追加をしたいときはどうするか？というと、あまりネットにある記事には記載されていないように感じた。

ドキュメントの配列を複製するの項目に記載されているコードもこんな感じ。

let arr = [1, 2, 3];
let arr2 = [...arr]; // arr.slice() のような動きです

arr2.push(4);
//  arr2 は [1, 2, 3, 4] になります
//  arr は変更されません

developer.mozilla.org

これならば push せずに、スプレッド構文と合わせて追加したい項目を記載すれば良いと思う。

変更元の配列に影響を与えずにより簡潔に記載ができる。

let arr = [1, 2, 3];
console.log([...arr, 4]) // [ 1, 2, 3, 4 ]
console.log([4, ...arr]) // [ 4, 1, 2, 3 ]

配列に新たに要素を追加したい場合、スプレッド構文でこんな感じにすれば良い。

const numbers = [1,2,3,4,5]
const numbers2 = [...numbers, 6]
console.log(numbers2) // [ 1, 2, 3, 4, 5, 6 ]

const numbers3 = [6, ...numbers]
console.log(numbers3) // [ 6, 1, 2, 3, 4, 5 ]

また、スプレッド構文のドキュメントを読んでいたら、配列の連結についての記載もあった。

これも concat を使用せずにスプレッド構文で連結ができるとのこと。

const array1 = [1, 2, 3]
const array2 = [4, 5, 6]

console.log(array1.concat(array2))  // [ 1, 2, 3, 4, 5, 6 ]
console.log([...array1, ...array2]) // [ 1, 2, 3, 4, 5, 6 ]