javascript - js array remove element by value using destructuring/rest syntax

Question

Seemed quite intuitive to me, but turns out that's not how things work! The goal is to remove the passed element if it exists and return the remainder. I know there's a number of ways of achieving this - including filter: const rest = selection.filter(i => i !== item) - but, as I said, thought this approach would be a thing - as it is for objects/key:value pairs.

if (selection.includes(item)) {
  // remove if available
  const [item, ...rest] = selection;
  
  setSelection(rest)
} else {
  // ...
}

The way destructuring works is it assigns the first element of selection to item and assigns the rest of the items to rest - an array. Which is correct - that's how things work, from my understanding at least. What's the possibility of "injecting" item's value into the destructuring assignment, and not having to treat it as new variable holding the first element of the array?

Answer 1

Here's a strange way it could be done:

const item = 5
const selection = [3, 4, 5, 6]
const itemPos = selection.indexOf(item)

if (selection.includes(item)) {
  // remove if available
  const {[itemPos]: item, ...rest} = selection

  // `rest` is now an object, so convert back to an array:
  console.log(Object.values(rest)) // [3, 4, 6]
  setSelection(Object.values(rest))
} else {
  // ...
}

Since I used const in both places, the second item is a different one, but one could remove const and wrap the expression in parentheses to reassign item (as I think you had originally requested):

let rest, item = 5
const selection = [3, 4, 5, 6]
const itemPos = selection.indexOf(item)

if (selection.includes(item)) {
  // remove if available
  ({[itemPos]: item, ...rest} = selection)
  console.log(Object.values(rest)) // [3, 4, 6]
  setSelection(Object.values(rest))
} else {
  // ...
}

But if you wanted to follow a similar pattern without using filter, you could use splice:

const item = 5
const selection = [3, 4, 5, 6]
const itemPos = selection.indexOf(item)

if (selection.includes(item)) {
  // remove if available
  const rest = [...selection] // Copy array if you still need `selection`; otherwise, we could just splice and pass `selection`
  rest.splice(itemPos, 1)
  console.log(rest)
  setSelection(rest)
} else {
  // ...
}

None of these are especially appealing compared to filter, but it should show how the approaches would work.