Javascript の配列操作を 破壊的操作と非破壊的操作を意識して整理する

はじめに

javascriptの配列操作は実務でもよく出てくる重要な操作です。そこで、よく使われる配列操作を破壊的操作（元の配列やオブジェクトを変更する操作）と非破壊的操作（元の配列やオブジェクトを変更せずに新しい配列やオブジェクトを返す操作）の違いを意識しながらまとめてみます。

非破壊的操作

map

map メソッドは元の配列の要素に対して、処理を加えて新しい配列を作ります。

const numbers = [1, 2, 3, 4, 5]
const double = numbers.map((num) => num * 2)

console.log(double) // [2, 4, 6, 8, 10]
console.log(numbers); // [1, 2, 3, 4, 5] 元の配列は変更されない

filter

filter メソッドは元の配列の要素に対して、ある条件に合致するものだけを抽出して新しい配列を作ります。

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(n => console.log(n * 2));
// 出力: 2, 4, 6, 8, 10
console.log(numbers); // [1, 2, 3, 4, 5] 元の配列は変更されない

reduce

rducee メソッドは、配列の各要素を合計する時に使います。

const numbers = [1, 2, 3, 4, 5];
// acc は累積値、 cur は現在の値 、 初期値は 0
const total = numbers.reduce((acc, cur) => acc + cur , 0); 
console.log(total) // 15
console.log(numbers); // [1, 2, 3, 4, 5] 元の配列は変更されない

ForEach

forEach メソッドは、配列の各要素に対して提供された関数を一度だけ実行します。新しい配列を生成しません。

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(n => console.log(n * 2));
// 2
// 4 
// 6 
// 8 
// 10
console.log(numbers); // [1, 2, 3, 4, 5] 元の配列は変更されない

slice

slice メソッドは、配列の一部を抽出して新しい配列を作成します。元の配列は変更されません。

const fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];

// インデックス1から3（4の手前）までを抽出
const sliced = fruits.slice(1, 4);
console.log(sliced); // ['banana', 'cherry', 'date']

// 引数を省略すると、配列全体のコピーを作成
const copy = fruits.slice();
console.log(copy); // ['apple', 'banana', 'cherry', 'date', 'elderberry']

console.log(fruits); // ['apple', 'banana', 'cherry', 'date', 'elderberry'] 元の配列は変更されない

破壊的操作

push

push メソッドは、配列の末尾に一つ以上の要素を追加し、配列を返します。

const numbers = [1, 2, 3, 4, 5];
numbers.push(6);
console.log(numbers); // [1, 2, 3, 4, 5, 6] 元の配列が変更される

pop

pop メソッドは、配列の末尾の要素を削除し、その要素を返します

const numbers = [1, 2, 3, 4, 5];
const lastElement = numbers.pop();
console.log(lastElement); // 4
console.log(numbers); // [1, 2, 3, 4] 元の配列が変更される

shift

shift メソッドは、配列の最初の要素を削除し、その要素を返します。

javascriptコードをコピーする
const numbers = [1, 2, 3, 4, 5];
const firstElement = numbers.shift();
console.log(firstElement); // 1
console.log(numbers); // [2, 3, 4, 5] 元の配列が変更される

unshift

unshift メソッドは、配列の先頭に一つ以上の要素を追加し、配列を返します。

javascriptコードをコピーする
const numbers = [1, 2, 3, 4, 5];
numbers.unshift(0);
console.log(numbers); // [0, 1, 2, 3, 4, 5] 元の配列が変更され

splice

splice メソッドは、配列から要素を追加・削除・置換するために使用されます。

const numbers = [1, 2, 3, 4, 5];
const removed = numbers.splice(2, 1, 6);
console.log(removed); // [3] 削除された要素
console.log(numbers); // [1, 2, 6, 4, 5] 元の配列が変更される

まとめ

• 非破壊的操作: map, filter, reduce, forEach
• 破壊的操作: push, pop, shift, unshift, splice

非破壊的操作の方が元の配列やオブジェクトが変更されないため、予期しないバグの混入を防げる一方で、新しい配列やオブジェクトを作成するため、メモリ消費が増えてパフォーマンスが落ちるという点が留意点かと思いました。