Eliminar elementos de un array en Javascript

Eliminar o filtrar elementos de un array en JavaScript es una tarea muy común. A continuación veremos algunas formas de eliminar elementos de un array en JavaScript.

Eliminar el primer elemento de un array en JavaScript

El Objeto Array de Javascript nos proporciona el método shift() que nos permite eliminar el primer elemento de un array.

Elimina el elemento ubicado en el índice 0 del array y devuelve el elemento eliminado. Si el array está vacío, devuelve undefined.

const jsLibraries = ['react', 'redux', 'vue', 'D3', 'Chart']
jsLibraries.shift()

Este método no modifica el array original.

Eliminar el último elemento de un array en JavaScript

Una de las formas más sencillas de eliminar el último elemento de un array, es usando el método pop(). Este método elimina el último elemento del array y devuelve el elemento eliminado. Si el array está vacío retorna undefined.

const jsLibraries = ['react', 'redux', 'vue', 'D3', 'Chart']
jsLibraries.pop()

Otra forma de eliminar el último o los últimos elementos de un array es utilizando su propiedad length. Si modificamos la longitud del array asignando a la propiedad length un valor menor a la longitud actual, eliminará los elementos que estén en el índice superior al valor de la longitud.

const jsLibraries = ['react', 'redux', 'vue', 'D3', 'Chart']
jsLibraries.length = jsLibraries.length - 1

O si quieres eliminar los últimos 3 elementos

const jsLibraries = ['react', 'redux', 'vue', 'D3', 'Chart']
jsLibraries.length = jsLibraries.length - 3

Debes tener en cuenta que sí, la longitud del array es menor que la cantidad de elementos que quieres eliminar, saltará un error, debido a que no se puede asignar un valor negativo a la propiedad length.

Eliminar un elemento en una posición específica

Utilizando el método splice() que nos permite eliminar un elemento en una posición específica.

const jsLibraries = ['react', 'redux', 'vue', 'D3', 'Chart']
jsLibraries.splice(0, 1) // Elimina el primer elemento el array

Este método modifica el array original.

• Retorna un array con los elementos eliminados.
• El primer parámetro es el índice de inicio.
• El segundo parámetro es la cantidad de elementos a eliminar.

Elimina el elemento en la posición 0 usando slice()

const jsLibraries = ['react', 'redux', 'vue', 'D3', 'Chart']
jsLibraries.slice(0, 1) // Elimina el primer elemento el array

Este método no modifica el array original.

Eliminar un rango de elementos a partir de una posición

Utilizando el método splice() podemos especificar un rango de elementos a eliminar basado en un índice inicial y final.

const jsLibraries = ['react', 'redux', 'vue', 'D3', 'Chart']
const removedLibraries = jsLibraries.splice(1, 3)

Al ejecutar jsLibraries.splice(1, 3) modificamos el array original y eliminamos los elementos ubicados en el índice 1 hasta el índice 3.

El método splice() retorna un array con los elementos eliminados.

Eliminar elementos de un array basado en su valor

En ocasiones queremos eliminar un elemento de un array basado en su valor. Para ello podemos utilizar el método filter() que nos permite filtrar un array basado en una función que recibe como primer parámetro.

Creamos un nuevo array filteredLibraries con los elementos que cumplan la condición.

const jsLibraries = ['react', 'redux', 'vue', 'D3', 'Chart']
const filteredLibraries = jsLibraries.filter((item) => item !== 'react')

Conclusión

Hay muchas otras formas de buscar, filtrar o eliminar elementos de un array. Lo mismo que hemos hecho con estos métodos, podemos hacerlo con cualquier bucle que nos proporciona JavaScript.

Pero actualmente es recomendable utilizar los métodos que nos ofrece el lenguaje.