Original article: How to Add and Remove Elements from Arrays in JavaScript

Los arreglos son estructuras de datos comunes en JavaScript, y es importante saber cómo trabajar con ellos.

Las operaciones básicas incluyen agregar o remover elementos desde el principio, el final o desde un índice en particular.

En este artículo, aprenderemos cómo trabajar con los métodos propios de los arreglos: pop(), push(), shift() y unshift(). También, veremos cómo trabajar con el método splice(), el cual nos permite modificar el arreglo agregando o removiendo elementos en un índice específico.

¿Qué es un arreglo en JavaScript?

Antes de que nos sumerjamos en los diferentes métodos de la clase Arreglo, primero tenemos que entender qué es un arreglo en JavaScript.

Un arreglo, es un tipo de estructura de datos que se usa para guardar colecciones de elementos, esta puede ser de múltiples tipos al mismo tiempo (como números, cadenas de texto, booleanos [verdadero o falso], otros arreglos o, incluso objetos) o de un solo tipo (a diferencia de otros lenguajes de tipados como C++, donde los arreglos son de un solo tipo a la vez).

Aquí te presento un ejemplo de un arreglo de nombres:

let nombres = ["Maria", "Victoria", "Santino"];

Para acceder a un elemento del arreglo, debes hacerlo escribiendo el nombre del arreglo, y entre corchetes el índice del elemento al que quieres acceder, este índice comienza en cero y se incrementa de uno en uno.

Volviendo al ejemplo anterior si quisiera obtener el primer nombre deberías hacerlo de este modo:

nombres[0]; // "Maria"

Ahora, digamos que se quiere acceder al último elemento del arreglo. En ese caso puedes hacer uso de la propiedad length() la cual nos retornará la longitud del arreglo y le restamos 1 (recuerda que el índice del arreglo comienza en cero así, que en nuestro arreglo el último de los 3 elementos sería el elemento con sub-índice 2).

nombres[nombres.length - 1]; // "Santino"

Cómo remover un elemento al final del arreglo

Llega el momento de hablar de uno de los primero métodos que veremos en el artículo: el método pop(). Este método nos permite remover el último elemento de un arreglo; de ese modo podemos asignarlo en otra variable pero, hay que tener en cuenta al usarlo ya que este método modifica la estructura del arreglo.

Veamos un ejemplo, trabajando nuevamente con nuestro arreglo:

// declaramos un arreglo de nombres 
let nombres = ["Maria", "Victoria", "Santino"]; 

// declaramos una variable que contendrá el elemento extraído del arreglo 
let nombreEliminado; 

// asignamos el elemento eliminado del arreglo con el metodo pop en la variable nombreEliminado 
nombreEliminado = nombres.pop(); 

// mostramos en consola el nombre eliminado 
console.log(nombreEliminado); // "Santino" 

// mostramos en consola el contenido del arreglo nombres:
console.log(nombres); // Array(2)["Maria","Victoria"]

Si utilizamos este método en un arreglo vacío, lo que obtendremos será undefined, veamos cómo se vería en la consola de javascript:

arrayVacio
Ejemplo del método pop() en un arreglo vacío

Cómo remover un elemento al principio del arreglo

Llega el momento de hablar de shift(). Este método permite retirar el primer elemento del arreglo y asignarlo en una nueva variable, y al igual que con el método pop() hay que tener cuidado al utilizarlo ya que este método modifica el arreglo original.

Volvamos al ejemplo del arreglo de los nombres para ver cómo funciona:

// mostramos en consola el contenido del arreglo nombres:
console.log(nombres); // Array(2)["Maria","Victoria"] 

// creamos una variable para extrer el primer nombre 
let otroNombreEliminado; 

// utilizamos el metodo shift() para quitar el primer nombre y asignarlo a la variable que creamos (otroNombreEliminado) 
otroNombreEliminado = nombres.shift(); 

// mostramos en consola el nombre que quitamos
console.log(otroNombreEliminado); // "Maria" 

// mostramos en consola el contenido del arreglo:
console.log(nombres); // Array(1)["Victoria"]

Al igual que con el método pop(), si utilizamos el método shift() en un arreglo vacío, este nos devolverá el valor primitivo undefined, veamos un ejemplo en la consola de javascript:

arrayVacioConShift
Ejemplo del método shift() en un arreglo vacío

Cómo agregar un elemento al final del arreglo

Digamos que al final de un arreglo queremos agregar otro elemento, en ese caso utilizaremos el método push(): éste nos permite agregar nuevos elementos y nos retornará el tamaño actualizado del arreglo, veámoslo con un ejemplo:

// crearemos un arreglo con lenguajes de programacion 
let lenguajes = ["C++", "Java", "Visual Basic"]; 

// creamos una nueva variable para guardar el tamaño del arreglo: 
let tamañoArregloOriginal = lenguajes.length; // 3 

// creamos una nueva variable para guardar el tamaño del arreglo luego de modificarlo 
let tamañoArregloModificado; 

// insertamos dos nuevos lenguajes en el arreglo y guardamos el nuevo tamaño del arreglo en la variable nuevoTamaño: 
tamañoArregloModificado = lenguajes.push("Ruby", "Python"); // 5 

// mostramos el arreglo en consola: 
console.log(lenguajes);  // Array(5)["C++", "Java", "Visual Basic", "Ruby", "Python"]

Algo interesante que podemos hacer con el método push() es agregar un arreglo a otro arreglo, veámoslo con el ejemplo anterior de los lenguajes:

// crearemos un arreglo con lenguajes de programacion 
let lenguajes = ["C++", "Java", "Visual Basic"]; 

// crearemos otro arreglo con dos lenguajes: 
let otrosLenguajes = ["Ruby", "Python"]; 

// creamos una nueva variable para guardar el tamaño del arreglo: 
let tamañoArregloOriginal = lenguajes.length; // 3 

// creamos una nueva variable para guardar el tamaño del arreglo luego de modificarlo 
let tamañoArregloModificado; 

// utilizaremos el metodo push junto con la sintaxis expandida (spread) para concatenar el arreglo otrosLenguajes al final del arreglo lenguajes:
tamañoArregloModificado = lenguajes.push(...otrosLenguajes); // 5 

// mostramos el arreglo en consola: 
console.log(lenguajes); // Array(5)["C++", "Java", "Visual Basic", "Ruby", "Python"]

En este ejemplo utilizamos el operador de sintaxis extendida (spread) para sumar el arreglo otrosLenguajes[] hacia el arreglo original lenguajes[].

Cómo agregar elementos al principio de un arreglo

Ahora nos toca hablar del método unshift(), este nos permite agregar nuevos elementos al principio del arreglo original, trabaja del mismo modo que push, pero la concatenación la realiza al principio, veamos el ejemplo anterior de los lenguajes, pero con el método unshift():

// crearemos un arreglo con lenguajes de programacion 
let lenguajes = ["C++", "Java", "Visual Basic"]; 

// creamos una nueva variable para guardar el tamaño del arreglo: 
let tamañoArregloOriginal = lenguajes.length; // 3 

// creamos una nueva variable para guardar el tamaño del arreglo luego de modificarlo 
let tamañoArregloModificado; 

// insertamos dos nuevos lenguajes en el arreglo (al principio del mismo) y guardamos el nuevo tamaño del arreglo en la variable nuevoTamaño: 
tamañoArregloModificado = lenguajes.unshift("Ruby", "Python"); // 5 

// mostramos el arreglo en consola: 
console.log(lenguajes); // Array(5)["Ruby", "Python", "C++", "Java", "Visual Basic"]

Cómo agregar o remover elementos en un índice específico del arreglo

Llegamos al último método que cubriremos en este artículo: el método splice(), este nos permite agregar o remover elementos en un índice específico del arreglo, la sintaxis del método es la siguiente:

array.splice(inicio[, elementoEliminado[, item1[, item2[, ...]]]])

Ahora, veamos parte por parte, cómo se compone este método:

El valor inicio, es un número que puedes ser positivo o negativo. Va a indicar desde dónde se comienza a modificar el arreglo (si es positivo las posiciones a las que nos movamos comenzarán a contarse desde el primer elemento, es decir, el índice 0, y si es negativo comenzará a contar desde el último elemento hacia atrás).

Algo interesante es que si ponemos un valor mayor al arreglo, comenzará a modificar desde el final del mismo.

El valor elementoEliminado, es un número que puede ser negativo o positivo, si es negativo o cero indica que no vamos a eliminar ningún elemento del arreglo, por el contrario si es positivo nos marcará la cantidad de elementos a eliminar, si es mayor al índice del arreglo, eliminará el total.

item1, item2, etc... son los valores que insertamos en el arreglo.

Veámoslo con un ejemplo:

// Primero, crearemos un arreglo al que llamaremos sistema solar, que contendra los planetas pertenecientes: 
let sistemaSolar = ["Sol", "Mercurio", "Venus", "Marte", "Jupiter", "Saturno", "Neptuno", "Urano", "Pluton"];

Si leemos nuestro ejemplo, vemos que nos falta un planeta, la Tierra, por lo que utilizaremos el método splice() para agregarlo:

sistemaSolar.splice(3, 0, "Tierra"); // ["Sol", "Mercurio", "Venus", "Marte", "Tierra", "Jupiter", "Saturno", "Neptuno", "Urano", "Pluton"];

Repasemos qué realizamos con el método splice:

El primer argumento del splice, indica en qué punto nos ubicamos para insertar o quitar el elemento (nos ubicamos en el índice 3, donde se encuentra "Marte").

El segundo argumento, indica si vamos a eliminar o no un elemento, en este caso agregamos, por lo que le pasamos un cero.

El tercer argumento es el elemento que insertamos, en esta caso una cadena de texto: "Tierra".

Cabe destacar, que siempre que utilicemos el método splice() este nos retornará un arreglo vacío en caso de que insertemos valores:

spliceRetornoInsertar
Ejecución del código de prueba en la consola de JavaScript, con el retorno de un arreglo tras ejecutar splice()

Sigamos trabajando con nuestro arreglo. Si revisamos el arreglo, veremos que al principio del mismo, tenemos listado al Sol, y éste es una estrella, no un planeta, por lo que vamos a removerlo con splice() y guardarlo en otro arreglo:

let indice = sistemaSolar.indexOf("Sol"); 
let estrella[]; 

if (indice !== -1) { estrella = sistemaSolar.splice(indice, 1); }

Repasemos el último ejemplo:

Primero definimos una variable auxiliar llamada índice, a la cual le asignamos utilizando el método indexOf() el índice de la cadena "Sol", para luego utilizarla en el splice como índice a retirar.

Luego, creamos un arreglo llamado estrella donde guardaremos el elemento que splice nos devuelve.

El método indexOf() realiza la comparación estricta de la cadena que le pasamos y devuelve el primer índice en el que aparece, y en caso de que esta cadena no exista, retorna "-1".

Luego, con un condicional, verificamos que el índice no sea igual a -1.

Finalmente, guardamos en el arreglo estrella el splice, pasándole como primer argumento el índice, y como segundo argumento la cantidad a remover (en este caso, 1 elemento).

Conclusiones

En este artículo aprendimos cómo utilizar los métodos pop, push, shift y unshift pertenecientes al objeto arreglo, extremadamente útiles al momento de agregar o remover un elemento al principio o al final del arreglo.

También aprendimos a utilizar el método splice para remover o agregar un elemento al arreglo en una posición específica.

Recuerde, que todos los métodos vistos cambian la estructura del arreglo.

Espero que hayas encontrado este artículo interesante, disfruta el día programando (¡y aprendiendo algo nuevo!)