Is there an ES6 (and upwards) solution using destructuring and the spread operator to create a new object with a key and value deleted from the original object, when the key reference is dynamic, so:

const state = {
   12344: {
      url: '',
      id: '12344'
   },
   12345: {
      url: '',
      id: '12345'
   }
}

const idToDelete = 12344

const { [idToDelete], ...newState } = state // dynamic key

console.log('newState:', newState)

// desired newState would only have the key 12345 and its value

Unless it's my present Babel setup, I can't figure out the clean ES6 way of doing this (if it exists).

Many thanks in advance

Is there an ES6 (and upwards) solution using destructuring and the spread operator to create a new object with a key and value deleted from the original object, when the key reference is dynamic, so:

const state = {
   12344: {
      url: 'http://some-url.',
      id: '12344'
   },
   12345: {
      url: 'http://some-other-url.',
      id: '12345'
   }
}

const idToDelete = 12344

const { [idToDelete], ...newState } = state // dynamic key

console.log('newState:', newState)

// desired newState would only have the key 12345 and its value

Unless it's my present Babel setup, I can't figure out the clean ES6 way of doing this (if it exists).

Many thanks in advance

• javascript
• ecmascript-6
• javascript-objects

• Why don’t you just use Map? It seems quite more appropriate here. Even if the thing you want to achieve would be possible it is super unreadable – smnbbrv Commented Sep 4, 2018 at 12:39

2 Answers 2

when destructuring using dynamic id you need to set a var with the remove value : the doc about this

const state = {
   12344: {
      url: 'http://some-url.',
      id: '12344'
   },
   12345: {
      url: 'http://some-other-url.',
      id: '12345'
   }
}

const idToDelete = 12344

// the removed object will go to unusedVar
const { [idToDelete]: unusedVar, ...newState } = state // dynamic key

console.log('newState:', newState)

a better way if you don't need to keep the deleted object is to use the keyword delete

const state = {
   12344: {
      url: 'http://some-url.',
      id: '12344'
   },
   12345: {
      url: 'http://some-other-url.',
      id: '12345'
   }
}

const idToDelete = 12344

delete state[idToDelete]

console.log('newState:', state)

I don't think it's possible to cleanly achieve with ES6 destructuring. Since other answers include mutating the state, try this instead:

const state = {
   12344: {
      url: 'http://some-url.',
      id: '12344'
   },
   12345: {
      url: 'http://some-other-url.',
      id: '12345'
   }
}

const idToDelete = 12344

const newState = Object.assign({}, state);
delete newState[idToDelete];

console.log('newState:', newState)
console.log('old state:', state);