Los arreglos de JavaScript son fácilmente uno de mis tipos de datos favoritos. Son dinámicos, fáciles de usar, y ofrecen un montón de métodos incorporados que podemos aprovechar.

Sin embargo, cuantas más opciones tengas, más confuso puede ser decidir cuál de ellas debes usar.

En este artículo, me gustaría discutir algunas formas comunes de agregar un elemento a un arreglo de JavaScript.

El Método Push

El primer y probablemente más común método de arreglo de JavaScript que encontrarás es push(). El método push() es usado para agregar un elemento al final de un arreglo.

Digamos que tienes un arreglo de elementos, cada elemento es una cadena que representa una tarea que necesitas realizar. Tendría sentido agregar nuevos elementos al final del arreglo para poder terminar primero las tareas anteriores.

Veamos el ejemplo en forma de código:

const arr = ['First item', 'Second item', 'Third item'];

arr.push('Fourth item');

console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item']

Muy bien, entonces push nos ha dado una agradable y simple sintaxis para agregar un elemento al final de nuestro arreglo.

Digamos que quisiéramos agregar dos o tres elementos a la vez a nuestra lista, ¿Qué haríamos entonces? Resulta que push() puede aceptar que se agreguen varios elementos a la vez.

const arr = ['First item', 'Second item', 'Third item'];

arr.push('Fourth item', 'Fifth item');

console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

Ahora que hemos agregado algunas tareas más a nuestro arreglo, podríamos querer saber cuántos elementos hay actualmente en nuestro arreglo para determinar si tenemos demasiados en nuestro plato.

Por suerte, push() tiene un valor de retorno con la longitud del arreglo después de que nuestro(s) elemento(s) haya(n) sido agregado(s).

const arr = ['First item', 'Second item', 'Third item'];

const arrLength = arr.push('Fourth item', 'Fifth item');

console.log(arrLength); // 5 
console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

El Método Unshift

No todas las tareas se crean igual. Puede que te encuentras con un escenario en el que estás agregando tareas a tu conjunto y de repente te encuentres con una que es más urgente que las otras.

Es hora de presentar a nuestro amigo unshift() que nos permite agregar elementos al principio de nuestro arreglo.

const arr = ['First item', 'Second item', 'Third item'];

const arrLength = arr.unshift('Urgent item 1', 'Urgent item 2');

console.log(arrLength); // 5 
console.log(arr); // ['Urgent item 1', 'Urgent item 2', 'First item', 'Second item', 'Third item']

Puedes notar en el ejemplo anterior que, al igual que el método push(), unshift() devuelve la nueva longitud del arreglo para que la usemos. También nos da la capacidad de agregar más de un elemento a la vez.

El Método Concat

Abreviatura de concatenar (unir), el método concat() se utiliza para unir dos (o más) arreglos.

Si recuerdas desde arriba, los métodos unshift() y push() devuelven la longitud del nuevo arreglo. concat(), por otro lado, devolverá un arreglo completamente nuevo.

Esta es una distinción muy importante y hace que concat() sea extremadamente útil cuando se trata de arreglos que no se quieren mutar (como los arreglos almacenados en React state).

He aquí cómo podría ser un caso bastante básico y sencillo:

const arr1 = ['?', '?'];
const arr2 = ['?', '?'];

const arr3 = arr1.concat(arr2);

console.log(arr3); // ["?", "?", "?", "?"] 

Digamos que tienes múltiples arreglos que te gustaría unir. ¡No te preocupes, concat() está ahí para salvar el día!

const arr1 = ['?', '?'];
const arr2 = ['?', '?'];
const arr3 = ['?', '?'];

const arr4 = arr1.concat(arr2,arr3);

console.log(arr4); // ["?", "?", "?", "?", "?", "?"]

Clonando con Concat

¿Recuerdas que dije que concat() puede ser útil cuando no quieres mutar tu arreglo existente? Echemos un vistazo a cómo podemos aprovechar este concepto para copiar el contenido de un arreglo a un nuevo arreglo.

const arr1 = ["?", "?", "?", "?", "?", "?"];

const arr2 = [].concat(arr1);

arr2.push("?");

console.log(arr1) //["?", "?", "?", "?", "?", "?"]
console.log(arr2) //["?", "?", "?", "?", "?", "?", "?"]

¡Genial! Esencialmente podemos "clonar" un arreglo usando concat().

Pero hay un pequeño "gotcha" en este proceso de clonación. El nuevo arreglo es una "copia superficial" (o llamado también "shallow copy") del arreglo copiado. Esto significa que cualquier objeto se copia por referencia y no el objeto real.

Echemos un vistazo a un ejemplo para explicar esta idea más claramente.

const arr1 = [{food:"?"}, {food:"?"}, {food:"?"}]

const arr2 = [].concat(arr1);

//change only arr2
arr2[1].food = "?";
arr2.push({food:"?"})

console.log(arr1) //[ { food: '?' }, { food: '?' }, { food: '?' } ]

console.log(arr2) //[ { food: '?' }, { food: '?' }, { food: '?' }, 
{ food: '?' } ]

Aunque no hicimos directamente ningún cambio en nuestro arreglo original, ¡El arreglo se vio afectado en última instancia por los cambios que hicimos en nuestro arreglo clonado!

Hay muchas maneras de hacer un "clon profundo" (o llamado también "deep clone") de un arreglo, pero se los dejo como tarea.

TL;DR

Cuando quieras agregar un elemento al final de tu arreglo, usa push(). Si necesitas agregar un elemento al principio de tu arreglo, prueba con unshift(). Y puedes agregar arreglos juntos usando concat().

Ciertamente hay muchas otras opciones para agregar elementos a un arreglo, ¡y te invito a que salgas y encuentres más métodos de arreglos geniales!

Siéntete libre de contactarme en Twitter y déjame saber tu método de arreglos favorito para agregar elementos a un arreglo.

Traducido del artículo de Nehemiah Kivelevitz - JavaScript Array Insert - How to Add to an Array with the Push, Unshift, and Concat Functions