What is the shortest way to modify immutable objects using spread and destructuring operators

Question

I'm looking for a pure function, to modify my immutable state object. The original state given as parameter must stay untouched. This is especially useful when working with frameworks like Redux and makes working with immutable object in javascript much easier. Especially since working with the object spread operator using Babel is already possible.

I did not found anything better than first copy the object, and than assign/delete the property I want like this:

function updateState(state, item) {   newState = {...state};   newState[item.id] = item;   return newState; }  function deleteProperty(state, id) {     var newState = {...state};     delete newState[id];     return newState; } 

I feel like it could be shorter

Answer 1

Actions on state, where state is considered immutable.

Adding or Updating the value of a property:

// ES6: function updateState(state, item) {     return Object.assign({}, state, {[item.id]: item}); }  // With Object Spread: function updateState(state, item) {   return {      ...state,      [item.id]: item   }; } 

Deleting a property

// ES6: function deleteProperty(state, id) {     var newState = Object.assign({}, state);     delete newState[id];     return newState;  }  // With Object Spread: function deleteProperty(state, id) {     let  {[id]: deleted, ...newState} = state;     return newState; }  // Or even shorter as helper function: function deleteProperty({[id]: deleted, ...newState}, id) {     return newState; }  // Or inline: function deleteProperty(state, id) {     return (({[id]: deleted, ...newState}) => newState)(state); } 

Answer 2

An ES6 solution, that has a bit more support is Object.assign:

const updateState = (state, item) => Object.assign({}, state, { [item.id]: item });