¿Cómo quitar y agregar elementos a un array en JavaScript? Con ejemplos

¿Sabías que modificar un array en JavaScript puede ser más sencillo de lo que imaginas? Aprender a agregar y quitar elementos no solo te permitirá personalizar tus datos, sino que también descubrirás los beneficios de hacerlo de forma eficiente. En este artículo, exploramos para qué sirve esta habilidad con ejemplos prácticos que te ayudarán a transformar y gestionar arrays como un experto. ¡No te lo pierdas!

1. ¿Qué significa agregar y quitar elementos de un array en JavaScript?

Quitar o agregar elementos a un array en JavaScript significa modificar el contenido del array, ya sea eliminando elementos existentes, insertando nuevos elementos o reemplazando algunos de ellos.

¿Qué es un array? Un array en JS es una estructura de datos que almacena una colección ordenada de valores, y en JavaScript es muy común trabajar con ellos para manejar datos dinámicos.

1.1. ¿Qué significa agregar elementos a un array?

Agregar elementos implica insertar nuevos valores dentro del array. Esto puede hacerse:

• Al final del array.
• Al inicio del array.
• En una posición específica.

1.2. ¿Qué significa quitar elementos de un array?

Quitar elementos implica eliminar valores existentes del array. Esto puede hacerse:

• Del final del array.
• Del inicio del array.
• De una posición específica.

1.3. Importancia de entender estos conceptos

Dominar cómo agregar y quitar elementos de un array es esencial en JavaScript, ya que:

• Los arrays son fundamentales en la manipulación de datos.
• Son ampliamente usados en aplicaciones web, juegos, APIs, y más.
• Permiten crear programas más dinámicos y flexibles.

2. ¿Para que sirve agregar o quitar elementos en arrays?

Es fundamental porque los arrays son una de las estructuras de datos más utilizadas para gestionar y manipular información en aplicaciones.

Aquí te explico para qué sirve agregar o quitar elementos en arrays, con algunos ejemplo los cuales en el siguiente punto iremos ampliando:

1. Gestionar listas de datos dinámicos
2. Modificar datos en tiempo real
3. Reorganizar y filtrar información
4. Crear interfaces dinámicas
5. Optimizar el manejo de datos en algoritmos
6. Trabajar con API y bases de datos
7. Realizar cálculos o operaciones agrupadas
8. Preparar datos para visualizaciones

2.1. Gestionar listas de datos dinámicos

• Los arrays suelen almacenar listas de elementos que cambian con el tiempo, como:
  • Productos en un carrito de compras.
  • Tareas en una lista de pendientes.
  • Resultados de búsquedas.
• Ejemplo:

let carrito = [];
carrito.push('Manzanas'); // Agregar un producto
carrito.pop(); // Eliminar el último productoLenguaje del código: JavaScript (javascript)

2.2. Modificar datos en tiempo real

• Permite que las aplicaciones sean interactivas y respondan a las acciones del usuario, como:
  • Añadir un mensaje en un chat.
  • Eliminar un archivo seleccionado.
• Ejemplo:

let mensajes = ['Hola', '¿Cómo estás?'];
mensajes.push('¡Todo bien!'); // Se agrega un mensaje.
mensajes.shift(); // Eliminar el mensaje más antiguo.Lenguaje del código: JavaScript (javascript)

2.3. Reorganizar y filtrar información

• Quitar elementos es útil para limpiar datos o filtrar información irrelevante.
• Ejemplo: eliminar usuarios inactivos de una lista.

let usuarios = ['Activo', 'Inactivo', 'Activo'];
usuarios = usuarios.filter(estado => estado === 'Activo'); // ['Activo', 'Activo']Lenguaje del código: JavaScript (javascript)

2.4. Crear interfaces dinámicas

• Los arrays están directamente relacionados con elementos visuales, como:
  • Listados dinámicos en menús.
  • Carruseles de imágenes.
  • Galerías de productos.
• Ejemplo:

let imagenes = ['imagen1.jpg', 'imagen2.jpg'];
imagenes.push('imagen3.jpg'); // Agregar una nueva imagen al carrusel.Lenguaje del código: JavaScript (javascript)

2.5. Optimizar el manejo de datos en algoritmos

• En estructuras de datos como pilas (stack) y colas (queue), los métodos para agregar (push) y quitar (pop o shift) elementos son esenciales.
• Ejemplo: Implementación de una pila.

let pila = [];
pila.push(1); // Agregar al tope.
pila.pop(); // Eliminar del tope.Lenguaje del código: JavaScript (javascript)

2.6. Trabajar con API y bases de datos

• Al consumir datos desde una API o base de datos, a menudo se necesita agregar, quitar o modificar elementos del array.
• Ejemplo:

let usuarios = await fetchUsuarios(); // Traer usuarios de la API
usuarios.push({ id: 5, nombre: 'Nuevo Usuario' }); // Agregar usuario.Lenguaje del código: JavaScript (javascript)

2.7. Realizar cálculos o operaciones agrupadas

• Manipular arrays facilita realizar operaciones como sumar valores, calcular promedios o agrupar elementos.
• Ejemplo:

let notas = [8, 7, 9];
notas.push(10); // Agregar nueva nota.
notas.pop(); // Eliminar la última.
let promedio = notas.reduce((acc, val) => acc + val) / notas.length;Lenguaje del código: JavaScript (javascript)

2.8. Preparar datos para visualizaciones

• En gráficos o estadísticas, los datos a menudo se derivan de arrays modificados.
• Ejemplo:

let datos = [100, 200, 300];
datos.splice(1, 1); // Eliminar el segundo dato.
console.log(datos); // [100, 300]Lenguaje del código: JavaScript (javascript)

En resumen, agregar y quitar elementos en arrays permite controlar dinámicamente la información dentro de tu aplicación, hacerla más interactiva, eficiente y orientada al usuario.

3. ¿Cómo quitar elementos a un array en JavaScript?

3.1. Métodos para quitar o eliminar elementos de un array:

1. Método pop():
2. El método shift()
3. El método splice() para quitar elementos:
4. El método filter():
5. Diferencias clave entre pop, shift, splice y filter.

3.1.1. Método pop():

El método pop() es una función integrada en JavaScript que se utiliza para eliminar el último elemento de un array y devolverlo. Este método modifica el array original al acortar su longitud en una unidad.

Sintaxis:

array.pop();Lenguaje del código: CSS (css)

• array: Es el nombre del array del cual deseas eliminar el último elemento.

Ejemplo:

let numeros = [1, 2, 3, 4, 5];
let numeroEliminado = numeros.pop();
console.log(numeros);   // Imprimirá [1, 2, 3, 4]
console.log(numeroEliminado);   // Imprimirá 5Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Creación del array: Se crea un array llamado numeros que contiene los números del 1 al 5.
2. Aplicación de pop():
   • Al llamar a numeros.pop(), se elimina el último elemento del array numeros, que es el número 5. Este valor eliminado se almacena en la variable numeroEliminado.
3. Impresión del array modificado: La línea console.log(numeros) muestra el array numeros después de que se haya eliminado el último elemento. Ahora el array contiene solo los números del 1 al 4.
4. Impresión del elemento eliminado: La línea console.log(numeroEliminado) muestra el valor del elemento que fue eliminado, que es el número 5.

En resumen:

• pop() es como quitar el último elemento de una pila.
• Siempre elimina el elemento en el índice array.length - 1 (descubre que es la propiedad length en arrays).
• Devuelve el valor del elemento eliminado.
• Modifica el array original.

Otra forma de verlo:

Imagina que tienes una fila de personas esperando. pop() sería como sacar a la última persona de la fila. Esa persona sería el valor devuelto por pop(), y la fila quedaría con una persona menos.

Usos comunes de pop():

• Eliminar el último elemento de una pila: Cuando se implementa una estructura de datos tipo pila.
• Procesar datos uno por uno: Al eliminar elementos uno a uno del final del array.
• Simplificar arrays: Para eliminar elementos innecesarios al final de un array.

Importante:

• Si el array está vacío al llamar a pop(), devolverá undefined.
• Para eliminar elementos de otras posiciones en el array, puedes utilizar el método splice().

3.1.2. El método shift()

El método shift() se utiliza para eliminar el primer elemento de un array y devolverlo. Este método modifica el array original al desplazar todos los elementos una posición hacia adelante.

Sintaxis:

array.shift();Lenguaje del código: CSS (css)

• array: Es el nombre del array del cual deseas eliminar el primer elemento.

Ejemplo:

let numeros = [1, 2, 3, 4, 5];
let primerNumero = numeros.shift();
console.log(numeros); // Imprimirá [2, 3, 4, 5]
console.log(primerNumero); // Imprimirá 1Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Creación del array: Se crea un array llamado numeros que contiene los números del 1 al 5.
2. Aplicación de shift():
   • Al llamar a numeros.shift(), se elimina el primer elemento del array numeros, que es el número 1. Este valor eliminado se almacena en la variable primerNumero.
3. Impresión del array modificado: La línea console.log(numeros) muestra el array numeros después de que se haya eliminado el primer elemento. Ahora el array contiene los números del 2 al 5.
4. Impresión del elemento eliminado: La línea console.log(primerNumero) muestra el valor del elemento que fue eliminado, que es el número 1.

En resumen:

• shift() es como quitar el primer elemento de una fila.
• Siempre elimina el elemento en el índice 0.
• Devuelve el valor del elemento eliminado.
• Modifica el array original.

Otra forma de verlo:

Imagina que tienes una cola de personas esperando. shift() sería como sacar a la primera persona de la cola. Esa persona sería el valor devuelto por shift(), y la fila avanzaría una posición.

Usos comunes de shift():

• Eliminar el primer elemento de una cola: Cuando se implementa una estructura de datos tipo cola.
• Procesar datos en orden: Al eliminar y procesar elementos uno por uno desde el principio del array.
• Simplificar arrays: Para eliminar elementos innecesarios al principio de un array.

Importante:

• Si el array está vacío al llamar a shift(), devolverá undefined.
• Para eliminar elementos de otras posiciones en el array, puedes utilizar el método splice().

3.1.3. El método splice() para quitar elementos:

El método splice() te permite modificar el contenido de un array al eliminar elementos existentes y/o agregar nuevos elementos. Es decir, puedes tanto eliminar como insertar elementos en una posición específica del array.

Sintaxis:

array.splice(index, deleteCount, item1, item2, ...);Lenguaje del código: CSS (css)

• array: El array sobre el cual quieres realizar la operación.
• index: El índice donde deseas comenzar a eliminar o insertar elementos.
• deleteCount: El número de elementos que deseas eliminar a partir del índice especificado.
• item1, item2, …: Los elementos que deseas agregar al array a partir del índice especificado.

Ejemplo:

let colores = ["rojo", "verde", "azul", "amarillo"];


// Eliminar el elemento en la posición 2 (índice 1)
colores.splice(1, 1);
console.log(colores); // IMPRIMIRÁ["rojo", "azul", "amarillo"]


// Eliminar dos elementos a partir de la posición 1 y agregar dos nuevos
colores.splice(1, 2, "naranja", "morado");
console.log(colores); // IMPRIMIRÁ ["rojo", "naranja", "morado"]Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Creación del array: Se crea un array llamado colores con cuatro colores.
2. Eliminación de un elemento:
   • La primera llamada a splice() elimina un elemento (deleteCount=1) a partir de la posición 1 (índice 1), que es el color «verde».
3. Eliminación y adición: La segunda llamada a splice() elimina dos elementos (deleteCount=2) a partir de la posición 1 (índice 1) y agrega dos nuevos colores: «naranja» y «morado».
4. Ten en cuenta: Este método te permite tanto eliminar como agregar elementos.

En resumen:

• splice() es una herramienta poderosa para modificar arrays de manera flexible.
• Puedes eliminar cualquier número de elementos a partir de una posición específica.
• Puedes agregar nuevos elementos en la posición donde se eliminaron los elementos.
• Modifica el array original.

Usos comunes de splice():

• Eliminar elementos en cualquier posición: Al especificar el índice y el número de elementos a eliminar.
• Insertar elementos en cualquier posición: Al especificar el índice y los elementos a agregar.
• Reemplazar elementos: Eliminando elementos existentes y agregando nuevos en la misma posición.

Importante:

• Si deleteCount es 0, no se eliminará ningún elemento y los elementos nuevos se insertarán a partir del índice especificado.
• Si no se especifican nuevos elementos, solo se eliminarán los elementos.

Ejemplo adicional:

let numeros = [1, 2, 3, 4, 5];

// Eliminar los dos últimos elementos
numeros.splice(3); // Equivalente a numeros.splice(3, 2);
console.log(numeros); // Imprimirá [1, 2, 3]Lenguaje del código: JavaScript (javascript)

En este ejemplo, al no especificar el deleteCount, se eliminan todos los elementos desde el índice 3 hasta el final del array.

En conclusión:

splice() es un método muy versátil que te permite realizar una amplia variedad de operaciones en un array. Al dominar este método, podrás manipular tus arrays de manera eficiente y precisa.

3.1.4. El método filter():

El método filter() crea un nuevo array con todos los elementos que cumplan una condición determinada.

A diferencia de splice(), que modifica el array original, filter() no altera el array original sino que devuelve un nuevo array con los elementos filtrados.

Sintaxis:

nuevoArray = array.filter(function(elemento, indice, array) {
  // Retorna true si el elemento cumple la condición
  // Retorna false si el elemento no cumple la condición
});Lenguaje del código: PHP (php)

• nuevoArray: El nuevo array que contendrá los elementos filtrados.
• array: El array original sobre el que se aplicará el filtro.
• function(elemento, indice, array): Una función que se ejecuta para cada elemento del array.
  • elemento: El elemento actual del array.
  • indice: El índice del elemento actual.
  • array: El array completo.

Ejemplo:

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

// Filtrar los números pares
const numerosPares = numeros.filter(numero => numero % 2 === 0);
console.log(numerosPares); // Imprimirá [2, 4]

// Filtrar los números mayores a 3
const numerosMayoresA3 = numeros.filter(numero => numero > 3);
console.log(numerosMayoresA3); // Imprimirá [4, 5]Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Creación del array: Se crea un array numeros con números del 1 al 5.
2. Filtrando números pares:
   • La primera llamada a filter() crea un nuevo array numerosPares. La función de flecha numero => numero % 2 === 0 verifica si cada número es par. Si lo es, se incluye en el nuevo array, eliminando los impares e imprimiendo solo los pares.
3. Filtrando números mayores a 3:
   • La segunda llamada a filter() crea un nuevo array numerosMayoresA3. La función de flecha numero => numero > 3 verifica si cada número es mayor que 3. Si lo es, se incluye en el nuevo array, eliminando los menores a 3 e imprimiendo solo los mayores..

En resumen:

• filter() crea un nuevo array sin modificar el original.
• La función de callback determina qué elementos se incluyen en el nuevo array.
• Es ideal para extraer subconjuntos de datos basados en condiciones.

Usos comunes de filter():

• Buscar elementos específicos: Filtrar elementos por tipo, valor, propiedad, etc.
• Crear subconjuntos de datos: Extraer datos relevantes para un cálculo o visualización.
• Validar datos: Eliminar elementos que no cumplan ciertos criterios.

Importante:

• filter() es una función pura, lo que significa que no modifica el array original.
• Puedes encadenar múltiples llamadas a filter() para aplicar filtros más complejos.

3.1.5. Diferencias clave entre pop, shift, splice y filter para quitar elementos

pop

• Qué Hace: Elimina el último elemento del array.
• Uso Común: Se utiliza para trabajar con estructuras como pilas (stack) o descartar el elemento más reciente.
• Impacto en Índices: Solo afecta al último índice; no reordena los demás.
• Eficiencia: Muy rápido porque no necesita reorganizar el array.

shift

• Qué Hace: Elimina el primer elemento del array.
• Uso Común: Es útil en estructuras como colas (queue) o para eliminar el elemento más antiguo.
• Impacto en Índices: Reorganiza todos los índices restantes, ya que desplaza los elementos hacia la izquierda.
• Eficiencia: Menos eficiente en arrays grandes porque requiere desplazamiento.

splice

• Qué Hace: Elimina elementos en una posición específica dentro del array.
• Uso Común: Perfecto para eliminar uno o más elementos en ubicaciones específicas, como remover un usuario en particular.
• Impacto en Índices: Reorganiza los índices desde la posición eliminada hacia adelante.
• Eficiencia: Moderada porque requiere localizar la posición y ajustar los índices.

filter

• Eficiencia: Dependiente del tamaño del array y la complejidad de la condición.
• Qué Hace: Devuelve un nuevo array con los elementos que cumplen una condición; no modifica el original.
• Uso Común: Ideal para filtrar datos dinámicamente, como eliminar elementos según propiedades específicas (por ejemplo, usuarios inactivos).
• Impacto en Índices: No afecta el array original ni sus índices.

4. ¿Cómo agregar elementos a un array en JS?

4.1. Métodos para agregar elementos en un array:

1. El método push()
2. El método unshift()
3. El método splice() para agregar un elemento:
4. Diferencias clave entre push, unshift y splice

4.1.1. El método push()

El método push() es una función integrada en JavaScript que se utiliza para agregar uno o más elementos al final de un array. Este método modifica el array original al incrementar su longitud y devuelve la nueva longitud del array.  

Sintaxis:

nuevaLongitud = array.push(elemento1, elemento2, ...);Lenguaje del código: PHP (php)

• array: El array al que se agregarán los elementos.
• elemento1, elemento2, …: Los elementos que se van a agregar al final del array.
• nuevaLongitud: La nueva longitud del array después de agregar los elementos.

Ejemplo:

let frutas = ['manzana', 'banana'];

// Agregar un elemento
let nuevaLongitud = frutas.push('pera');
console.log(frutas); // Imprimirá ['manzana', 'banana', 'pera']
console.log(nuevaLongitud); // Imprimirá 3

// Agregar varios elementos
frutas.push('uva', 'kiwi');
console.log(frutas); 

// Imprimirá ['manzana', 'banana', 'pera', 'uva', 'kiwi']Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Creación del array: Se crea un array frutas con dos elementos.
2. Agregar un elemento:
   • La primera llamada a push() agrega la fruta «pera» al final del array y devuelve la nueva longitud, que es 3.
3. Agregar varios elementos:
   • La segunda llamada a push() agrega las frutas «uva» y «kiwi» al final del array.

En resumen:

• push() es como agregar elementos al final de una lista.
• Siempre agrega los nuevos elementos al final del array.
• Devuelve la nueva longitud del array.
• Modifica el array original.

Usos comunes de push():

• Agregar elementos a una lista: Cuando se necesita construir una lista de elementos de forma dinámica.
• Implementar una pila: Al agregar elementos al final de un array, se comporta como una pila (LIFO).

Importante:

• push() puede aceptar cualquier número de argumentos, incluyendo otros arrays.
• Si se pasa un array como argumento, se agregará como un solo elemento al array original.

4.1.2. El método unshift()

El método unshift() se utiliza para agregar uno o más elementos al inicio de un array. Este método modifica el array original al incrementar su longitud y devuelve la nueva longitud del array.

Sintaxis:

nuevaLongitud = array.unshift(elemento1, elemento2, ...);Lenguaje del código: PHP (php)

• array: El array al que se agregarán los elementos.
• elemento1, elemento2, …: Los elementos que se van a agregar al inicio del array.
• nuevaLongitud: La nueva longitud del array después de agregar los elementos.

Ejemplo:

let frutas = ['manzana', 'banana'];

// Agregar un elemento
let nuevaLongitud = frutas.unshift('pera');
console.log(frutas); // Imprimirá ['pera', 'manzana', 'banana']
console.log(nuevaLongitud); // Imprimirá 3

// Agregar varios elementos
frutas.unshift('uva', 'kiwi');
console.log(frutas); 

// Imprimirá ['uva', 'kiwi', 'pera', 'manzana', 'banana']Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Creación del array: Se crea un array frutas con dos elementos.
2. Agregar un elemento al inicio:
   • La primera llamada a unshift() agrega la fruta «pera» al inicio del array y devuelve la nueva longitud, que es 3.
3. Agregar varios elementos al inicio: La segunda llamada a unshift() agrega las frutas «uva» y «kiwi» al inicio del array.

En resumen:

• unshift() es como agregar elementos al principio de una lista.
• Siempre agrega los nuevos elementos al inicio del array.
• Devuelve la nueva longitud del array.
• Modifica el array original.

Usos comunes de unshift():

• Agregar elementos al inicio de una lista: Cuando se necesita añadir elementos al principio de una cola (FIFO).
• Implementar una pila: Al agregar elementos al inicio de un array, se comporta como una pila (LIFO) invertida.

Importante:

• unshift() puede aceptar cualquier número de argumentos, incluyendo otros arrays.
• Si se pasa un array como argumento, se agregará como un solo elemento al inicio del array original.

4.1.3. El método splice() para agregar un elemento:

El método splice() es una herramienta versátil en JavaScript que, además de eliminar elementos, también te permite agregar elementos en un índice específico de un array.

Sintaxis:

array.splice(índice, 0, elemento1, elemento2, ...);Lenguaje del código: CSS (css)

• array: El array sobre el cual quieres realizar la operación.
• índice: La posición exacta donde deseas insertar los nuevos elementos.
• 0: Indica que no deseas eliminar ningún elemento existente (es decir, solo insertarás).
• elemento1, elemento2, …: Los elementos que deseas agregar al array.

Ejemplo:

let colores = ["rojo", "azul", "amarillo"];

// Insertar "verde" en la segunda posición (índice 1)
colores.splice(1, 0, "verde");
console.log(colores); 

// Imprimirá ["rojo", "verde", "azul", "amarillo"]Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Creación del array: Se crea un array colores con tres colores.
2. Inserción de un elemento:
   • La llamada a splice() inserta el color «verde» en la posición 1 (índice 1), desplazando los elementos existentes hacia la derecha.

En resumen:

• splice() te permite insertar elementos en cualquier posición de un array.
• El segundo argumento (0 en este caso) indica que no se eliminarán elementos.
• Los elementos insertados se colocan en la posición especificada, desplazando los elementos existentes.

Usos comunes de splice() para insertar:

• Añadir elementos en un orden específico: Insertar elementos en posiciones exactas para mantener un orden determinado.
• Combinar arrays: Insertar elementos de un array en otro array en una posición específica.
• Modificar estructuras de datos: Insertar nuevos nodos en una lista enlazada o un árbol.

Importante:

• El índice comienza en 0, por lo que para insertar al principio del array, el índice sería 0.
• Si el índice especificado es mayor que la longitud del array, el elemento se agregará al final.

4.1.4. Diferencias clave entre push, unshift y splice para agregar elementos:

push

• Dónde Agrega: Siempre al final del array.
• Uso Común: Ideal para expandir una lista o añadir elementos secuencialmente.
• Impacto en Índices: No afecta los índices existentes. Solo incrementa el tamaño del array.
• Eficiencia: Rápido porque no reordena otros elementos.

unshift

• Dónde Agrega: Siempre al inicio del array.
• Uso Común: Útil para priorizar elementos o mantener el orden cronológico inverso.
• Impacto en Índices: Reorganiza todos los índices, ya que desplaza los elementos existentes hacia la derecha.
• Eficiencia: Menos eficiente en arrays grandes debido al desplazamiento.

splice

• Eficiencia: Más complejo porque requiere localizar la posición y ajustar los índices.
• Dónde Agrega: En una posición específica dentro del array.
• Uso Común: Perfecto para insertar elementos entre otros existentes o en una posición fija.
• Impacto en Índices: Reorganiza los índices desde la posición de inserción hacia adelante.

5. Preguntas frecuentes sobre como agregar o quitar elementos en un array.