Eliminar elementos de un array en Javascript

Muchas las cosas más sencillas son las que más dolores de cabeza nos llegan a dar, a pesar de tener muchos años de experiencia en el mundo del desarrollo web, aún tengo que Googlear las cosas más básicas prácticamente todos los días. Es por eso que he decidido simplemente crear mi propia versión de estos tips, para así tener una referencia en mi sitio cuando inevitablemente tenga que buscarlos de nuevo, ésta vez. Eliminar elementos de un array en Javascript.

#Remover un elemento utilizando .splice()

El método .splice() es probablemente la forma más fácil de manipular arrays, nos permite agregar, reemplazar, o eliminar un cierto elemento en base a su índice, ejemplo:

1const array = ['foo', 'bar', 'baz'];
2// Empezando en la posición 1, elimina el siguiente elemento
3const removedElement = array.splice(1, 1);
4// [ 'foo', 'baz' ]
5console.log(array);
6// [ 'bar' ]
7console.log(removedElement);
8

La ventaja de este método es: En realidad no elimina el elemento del array, si no que lo mueve. Básicamente el método regresa cualquier valor que se ha
eliminado del array, en este caso lo guardamos en una nueva constante, para uso en un futuro.

Otro punto a notar, es que podemos quitar varios elementos utilizando éste mismo método, simplemente debemos aumentar la cantidad en el segundo argumento.

1const array = ['foo', 'bar', 'baz'];
2// Empezando en la posición 1, elimina los dos siguientes elementos
3const removedElement = array.splice(1, 2);
4// [ 'foo' ]
5console.log(array);
6// [ 'bar', 'baz' ]
7console.log(removedElement);
8

#Remover el último elemento utilizando .pop()

El método .pop(), es algo así como el opuesto de .push(), mientras que .push() Agrega un nuevo elemento al final de un array, .pop() elimina el último elemento de un array, ejemplo:

1const array = ['foo', 'bar', 'baz'];
2// Elimina el último elemento del array
3const removedElement = array.pop();
4// [ 'foo', 'bar' ]
5console.log(array);
6// 'baz'
7console.log(removedElement);
8

Al igual que .splice(), .pop() regresará el elemento “removido” para que podamos usarlo en un futuro. Sin embargo, nótese que en ésta ocasión recibimos un string, y no un array.

#Remover el primer elemento utilizando .shift()

El método .shift(), es el opuesto a .unshift(), y éstos a su vez son opuestos a .pop() y .push(), mientras que éstos últimos trabajan al final del array, los primeros hacen su magia al comienzo del array.

.shift() eliminará el primer elemento en nuestro array, ejemplo:

1const array = ['foo', 'bar', 'baz'];
2// Elimina el primer elemento del array
3const removedElement = array.shift();
4// [ 'bar', 'baz' ]
5console.log(array);
6// 'foo'
7console.log(removedElement);
8

Una vez más, nótese que el valor que recibimos es un string

#Remover un elemento en base a su valor

Hasta ahora hemos visto cómo eliminar elementos en base a su índice, pero, ¿Qué pasa cuándo necesitamos remover algo an base a su valor?

El procedimiento es parecido, pero en éste caso necesitamos primero encontrar el índice del elemento con ese valor.

Para encontrar el índice podemos utilizar .indexOf(), y lo utilizamos en conjunto con .splice(), ejemplo, quitemos “bar”:

1let array = ['foo', 'bar', 'baz'];
2let removedElement;
3// Elimina la primer instancia de 'bar'
4if (array.indexOf('bar') > -1) {
5  removedElement = array.splice(array.indexOf('bar'), 1);
6}
7// [ 'foo', 'baz' ]
8console.log(array);
9// [ 'bar' ]
10console.log(removedElement);
11// Reiniciar para el siguiente ejemplo
12let index;
13array = ['foo', 'bar', 'baz', 'bar'];
14// Elimina todas las instancias de 'bar'
15while ((index = array.indexOf('bar')) > -1) {
16  removedElement = array.splice(array.indexOf('bar'), 1);
17
18  // [ 'bar' ]
19  console.log(removedElement);
20}
21// [ 'foo', 'baz' ]
22console.log(array);
23

Nótese la comparación para asegurarnos de que el índice existe, si no existe, regresará -1. Usualmente una comparación fallida regresaría 0, (traduciéndose a false), pero como los arrays comienzan en el índice 0, no nos ayudaría mucho ¿Cierto?

#Remover elementos utilizando .filter()

Por último, podemos utilizar el método .filter() para crear un nuevo array con los valores deseados, técnicamente éste método no elimina los elementos del array, ya que el array original no cambia. Ejemplo, creemos un nuevo array sin “bar”:

1const array = ['foo', 'bar', 'baz'];
2// Regresa todo lo que no es "bar"
3const newArray = array.filter((element) => element !== 'bar');
4// [ 'foo', 'baz' ]
5console.log(newArray);
6// [ 'foo', 'bar', 'baz' ]
7console.log(array);
8

#Conclusión

Así podemos ver que, como muchas cosas en la vida (y en Javascript), a pesar de no ser tan simple como debería, hay muchas maneras de lograr nuestro cometido, así que espero les sean útiles estas formas de eliminar elementos de un array en Javascript.