What is the cleanest way to remove an element from an immutable array in JS?

Question

I need to remove an element from an array that is a state of a React Component. Which means that it is an immutable object.

Adding a element is easy using spread syntax.

    return {
        ...state,
        locations: [...state.locations, {}]
    };

Removing is a little more tricky. I need to use an intermediate object.

        var l = [...state.locations]
        l.splice(index, 1)
        return {
            ...state,
            locations: l
        }

It make the code more dirt and difficult to understand.

Is there an easier or less tricky to create a new array removing an element from it?

Answer 1

You can use a combination of spread and Array#slice:

const arr = ['a', 'b', 'c', 'd', 'e'];

const indexToRemove = 2; // the 'c'

const result = [...arr.slice(0, indexToRemove), ...arr.slice(indexToRemove + 1)];

console.log(result);

Another option is Array#filter:

const arr = ['a', 'b', 'c', 'd', 'e'];

const indexToRemove = 2; // the 'c'

const result = arr.filter((_, i) => i !== indexToRemove);

console.log(result);