JavaScript - イミュータブルな配列/オブジェクトの操作

JavaScript

今回はJavaScriptで配列/オブジェクトの要素の追加 /変更 / 編集 をイミュータブル(非破壊的)に行う方法をまとめます。

イミュータブルな操作の基本

基本的には、元の配列やオブジェクトをシャローコピーし、そのコピーに対して操作を加える、というやり方をします。

要素の追加

スプレッド記法やObject.assign()を使ってシャローコピーします。

// 配列への追加
const arr = ['Tom', 'Mike', 'John'];
const newArr = ['Bob', ...arr];

console.log(newArr); // [ 'Bob', 'Tom', 'Mike', 'John' ]

// オブジェクトへの追加1 (スプレッド記法)
const obj = {
 name: 'Tom',
 height: 177
};

const newObj = {
 ...obj,
 age: 24,
};

console.log(newObj); // { name: 'Tom', height: 177, age: 24 }

// オブジェクトへの追加2 (Object.assign())
const newObj2 = Object.assign({}, obj);
newObj2.age = 24;

console.log(newObj); // { name: 'Tom', height: 177, age: 24 }


要素の変更

const arr = ['Tom', 'Mike', 'John'];
const newArr = [...arr];
newArr[0] = 'Scot';

console.log(newArr); // [ 'Scot', 'Mike', 'John' ]

const obj = {
 name: 'Tom',
 height: 177
};

const newObj = {...obj};
newObj.name = 'Scot';

console.log(newObj); // { name: 'Scot', height: 177 }


要素の削除

// 配列からTomを削除
const arr = ['Tom', 'Mike', 'John'];

const newArr = arr.filter(e => e !== 'Tom');
console.log(newArr); // [ 'Mike', 'John' ]

// オブジェクトからTomを削除
const obj = {
 name: 'Tom',
 height: 177
};


const {height, ...newObj} = obj; // 分割代入法を使う
console.log(newObj); // { name: 'Tom' }


以上メモでした。