Eliminando un elemento de una lista

¿Cómo eliminar un elemento de un array en JavaScript?

ByLeo

Una matriz, también llamada arreglo (o array en inglés), es una colección ordenada de datos que se utiliza para almacenar varios valores bajo una variable. ¿Cómo se elimina un elemento específico de un arreglo en JavaScript?

Existen varios métodos del objeto Array que se pueden utilizar para borrar elementos de un arreglo. Algunos de ellos son

Podemos usar algunas de estas funciones en combinación con indexOf y findIndex.

Ten en cuenta que existen dos tipos de soluciones para eliminar elementos de un array:

  1. mutando, o modificando, el array original 😬
  2. devolviendo un nuevo array, sin modificar el array original ✅

En la mayoría de los casos, debes evitar modificar el array original. Debido a la naturaleza de “asignar por referencia” de los arrays en JavaScript, modificarlos puede producir problemas inesperados y difíciles de depurar.

Si lo que buscas es eliminar duplicados de un array, consulta nuestro artículo ¿Cómo eliminar elementos duplicados de un array en Javascript?

¿Cómo eliminar un elemento de una array por índice?

Puedes utilizar una de dos funciones de JavaScript para eliminar un elemento de un arreglo según el índice del elemento.

  1. El método splice modificará el arreglo.
  2. El método toSpliced no modificará el arreglo original, sino que devolverá uno nuevo.

Usando splice

El método de splice cambia el contenido de un arreglo quitando elementos. También se puede utilizar para reemplazar elementos existentes y/o agregar nuevos elementos. Para este post, nos centraremos en eliminar elementos del arreglo.

splice muta el arreglo original y retorna un arreglo que contiene los elementos eliminados.

El primer parámetro es start, que en nuestro ejemplo representa el índice de base cero en el que comenzar a eliminar elementos del array.

El segundo parámetro es deleteCount, que indica la cantidad de elementos que deseas eliminar desde start.

const names = ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer'];

// Usa el indice para remover el elemento
const removed = names.splice(2, 1); 

console.log(removed); // 👉 ['Kip']

// Arreglo modificado 😬
console.log(names); // 👉 ['Napoleon', 'Pedro', 'Deb', 'Summer']

También puedes eliminar más de un elemento del array.

const names = ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer'];

// Usa el indice para remover el elemento
const removed = names.splice(1, 3); // 👉 ['Pedro', 'Kip', 'Deb']

// Arreglo modificado 😬
console.log(names); // 👉 ['Napoleon', 'Summer']

Usando toSpliced

El método toSpliced se puede utilizar para retornar un nuevo array con los elementos especificados eliminados.

El primer parámetro es start, que es el índice de base cero donde deseas comenzar a omitir elementos en el nuevo array.

El segundo parámetro es deleteCount, que indica la cantidad de elementos que desea omitir desde start.

const names = ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer'];

// Usa el indice para remover el elemento
const newArray = names.toSpliced(2, 1); // 👉 ['Napoleon', 'Pedro', 'Deb', 'Summer']
  
// Nuevo array
console.log(newArray); // 👉 ['Napoleon', 'Pedro', 'Deb', 'Summer']

// Array original permanece igual ✅
console.log(names); // 👉 ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer']

¿Cómo eliminar un elemento de un array por valor?

Si ya sabes cuál es el valor que deseas eliminar del arreglo pero no conoces su índice, usa indexOf o findIndex para encontrar el índice del elemento, luego usa splice o toSpliced para eliminar el elemento.

Eliminar un elemento de un array usando indexOf y splice

  1. Proporcione a indexOf el valor que estás buscando y te devolverá el primer índice donde se encuentra el valor; de lo contrario, devolverá -1.
  2. Una vez que conozcas el índice del elemento del arreglo que deseas eliminar, utiliza splice.
const names = ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer'];

// 1. Encuentra el indice
const index = names.indexOf('Kip'); // 👉 2

// 2. Usa el indice para especificar el elemento a remover
if (index !== -1) {
  names.splice(index, 1); // 👉 ['Kip']
}

// Arreglo mutado 😬
console.log(names); // 👉 ['Napoleon', 'Pedro', 'Deb', 'Summer']

Eliminar un elemento de un array usando findIndex y splice

El método findIndex devuelve el índice del primer elemento que satisface la función de prueba, de lo contrario, devolverá -1.

  1. Proporciona a findIndex una función callback para encontrar el valor que estás buscando.
  2. Una vez que conozcas el índice del elemento del arreglo que deseas eliminar, utiliza splice.
const names = ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer'];

// 1. Encuentra el indice
const index = names.findIndex(n => n === 'Kip'); // 👉 2

// 2. Usa el indice para especificar el elemento a remover
if (index !== -1) {
  names.splice(index, 1); // 👉 ['Kip']
}

// Arreglo mutado 😬
console.log(names); // 👉 ['Napoleon', 'Pedro', 'Deb', 'Summer']

Eliminar un elemento de un array usando filter

filter no modifica el array, sino que devuelve una copia superficial que contiene solo los elementos que pasan la prueba. ✅

Ten en cuenta que si ningún elemento pasa la prueba, filter devuelve una matriz vacía. 👀

const names = ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer'];

const newArray = names.filter(n => n !== 'Kip'); 

// Nuevo arreglo ✅
console.log(newArray); // 👉 ['Napoleon', 'Pedro', 'Deb', 'Summer']

Eliminar un elemento de un array usando toSpliced

toSpliced no muta el array original, sino que devuelve un nuevo array con los elementos especificados eliminados.

const names = ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer'];

// Encuentra el indice
const index = names.indexOf('Kip'); // 👉 2

// Revisa que el elemento fue encontrado
if (index !== -1) {
  // Usa el indice para eliminar el elemento
  const newArray = names.toSpliced(index, 1); // 👉 ['Napoleon', 'Pedro', 'Deb', 'Summer']
  
  // Nuevo arreglo
  console.log(newArray); // 👉 ['Napoleon', 'Pedro', 'Deb', 'Summer']
}

// Array original permanece sin cambios ✅
console.log(names); // 👉 ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer']

¿Cómo eliminar un objeto de un array de objetos?

Con el método de filter, puedes eliminar un objeto de una matriz según el valor de la propiedad.

Eliminar un objeto de un array con el método de filter

filter devolverá una copia superficial de la matriz que contiene solo los elementos que satisfacen la función de prueba.

const customers = [{
  id: 100,
  name: 'Napoleon',
}, {
  id: 101,
  name: 'Pedro',
}, {
  id: 102,
  name: 'Deb',
}];

const filteredByName = customers.filter(
  // especifica la propiedad y el valor
  customer => customer.name !== 'Pedro'
);

console.log(filteredByName); // 👉 [ { "id": 100, "name": "Napoleon" }, { "id": 102, "name": "Deb" } ];

Eliminar un objeto de un array con el método toSpliced

Puedes crear un nuevo arreglo con el objeto especificado eliminado utilizando los métodos findIndex y toSpliced.

Tal como su nombre lo indica, findIndex devuelve el índice del primer elemento del arreglo que pasa la prueba. Luego, toSpliced puede usar el índice para determinar qué elemento no debe estar presente en el nuevo arreglo.

const customers = [{
  id: 100,
  name: 'Napoleon',
}, {
  id: 101,
  name: 'Pedro',
}, {
  id: 102,
  name: 'Deb',
}];

const index = customers.findIndex(customer => customer.name === 'Pedro');

if (index !== -1) {
  const newArray = customers.toSpliced(index, 1);

  console.log(newArray); // 👉 [ { "id": 100, "name": "Napoleon" }, { "id": 102, "name": "Deb" } ];
}

Eliminar un objeto de un arreglo con el método splice

Si prefieres modificar el arreglo original, puedes utilizar los métodos findIndex y splice.

const customers = [{
  id: 100,
  name: 'Napoleon',
}, {
  id: 101,
  name: 'Pedro',
}, {
  id: 102,
  name: 'Deb',
}];

const index = customers.findIndex(customer => customer.name === 'Pedro');

if (index !== -1) {
  customers.splice(index, 1);  
}

// Arreglo modificado 😬
console.log(customers); // 👉 [ { "id": 100, "name": "Napoleon" }, { "id": 102, "name": "Deb" } ];

Crea una función para eliminar un elemento de un array

¿Cuál es el beneficio de programar tu propia función? Reutilización de código, es decir, usar código previamente desarrollado con el fin de evitar la duplicación de código.

Puedes utilizar cualquiera de las soluciones ya presentadas para programar tu propia función de utilidad.

Siempre es mejor evitar mutaciones y prevenir problemas inesperados. Te recomendaría que utilices una de las soluciones que no modifica el array original.

Selecciona una de las soluciones, envuélvela en una declaración de función y realiza algunos ajustes.

function removeElementByValue(arr, value) {
  const index = arr.indexOf(value);

  if (index !== -1) {
    return arr.toSpliced(index, 1);
  }
  
  return arr;
}

const names = ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer'];

const newArray = removeElementByValue(names, 'Kip');

console.log(newArray); // 👉 ['Napoleon', 'Pedro', 'Deb', 'Summer']

¿Cómo eliminar el primer elemento de un array?

Utiliza el método shift para eliminar el primer elemento de una matriz. Además de eliminar el primer elemento, shift devuelve el valor eliminado.

const numbers = [1, 2, 3, 4, 5];

const removedValue = numbers.shift();

console.log(`The array of numbers: ${numbers}`); // 👉 2, 3, 4, 5
console.log(`The removed value : ${removedValue}`); // 👉 1

¿Cómo eliminar el último elemento de un array?

Utiliza el método pop para eliminar el último elemento de una matriz. Además de eliminar el último elemento, pop devuelve el valor eliminado.


const numbers = [1, 2, 3, 4, 5];

const removedValue = numbers.pop();

console.log(`The array of numbers: ${numbers}`); // 👉 1, 2, 3, 4
console.log(`The removed value : ${removedValue}`); // 👉 5

¿Cómo eliminar todos los elementos de un array?

Para vaciar un array, utiliza el método splice. Como índice inicial usa 0 y como deleteCount usa la propiedad length del array.

En el siguiente ejemplo, el argumento start es 0 y deleteCount es 5.

const names = ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer'];

names.splice(0, names.length); // 👉 ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer']

// Matriz modificada
console.log(names); // 👉 []

No utilices el operador delete para eliminar elementos de un array

Puedes sentirse tentado a utilizar el operador delete para eliminar elementos de un arreglo de JavaScript. Parece muy sencillo de usar.

Te recomiendo encarecidamente que no lo utilices. ¿Por qué? Si bien elimina el elemento del arreglo, no actualiza la propiedad de length.

const names = ['Napoleon', 'Pedro', 'Kip', 'Deb', 'Summer'];

delete names[2];

// Array mutado 😬
console.log(names); // 👉 ['Napoleon', 'Pedro', undefined, 'Deb', 'Summer']

console.log(names.length); // 👉 5

Similar Posts

¿Qué es NPM?

¿Qué es NPM?

ByLeo

npm (Node Package Manager, por sus siglas en inglés) es el registro de software más grande del mundo. Desarrolladores de código abierto lo usan para compartir paquetes. npm consiste de 3 componentes distintos: el sitio Web, la interfaz de la línea de comandos (CLI) y el registro.

¿Qué significa “RangeError: Maximum call stack size exceeded” y cómo solucionarlo?

¿Qué significa “RangeError: Maximum call stack size exceeded” y cómo solucionarlo?

ByLeo

El error “RangeError: Maximum call stack size exceeded” comúnmente sucede cuando una función se llama a sí misma indefinidamente. Dicho de una manera más técnica, este error ocurre cuando se realiza una llamada de función que excede el tamaño de la Pila de Llamadas (Call Stack). Ahora puede que te preguntes, ¿qué es la pila de llamadas (call stack) y cuál es su límite?