Cómo agregar un elemento a un array en JavaScript: 5 formas con ejemplos

¿Cómo agregar un elemento a un array en JavaScript? Análisis completo con ejemplos

\n\n

Estás escribiendo código en JavaScript y de repente surge la pregunta: «¿Cómo agregar un nuevo elemento al final del array? ¿Y al principio? ¿O quizás en el medio?». Si alguna vez has buscado en Google «How to append something to an array?» — no estás solo. Esta pregunta en Stack Overflow ha acumulado miles de visitas, y hoy la resolveremos de una vez por todas.

\n\n

Los arrays son la base del trabajo con datos en JS. Saber cómo agregar elementos de forma rápida y correcta te ahorrará horas de depuración y hará tu código más limpio. En este tutorial te mostraré 5 formas de agregar un elemento a un array, desde el clásico push() hasta el moderno operador spread. ¡Allá vamos!

\n\n

1. Método push(): agregar al final del array

\n\n

La forma más popular. push() agrega uno o más elementos al final del array y devuelve la nueva longitud.

\n\n

const fruits = ['manzana', 'plátano'];\nconst newLength = fruits.push('naranja');\n\nconsole.log(fruits);    // ['manzana', 'plátano', 'naranja']\nconsole.log(newLength); // 3\n

\n\n

Se pueden agregar varios elementos a la vez:

\n\n

fruits.push('pera', 'uva');\nconsole.log(fruits);\n// ['manzana', 'plátano', 'naranja', 'pera', 'uva']\n

\n\n

Cuándo usarlo: cuando necesitas agregar datos al final de una lista — por ejemplo, un nuevo producto al carrito, un mensaje al chat, una entrada al registro. El método es rápido (O(1)) y muta el array original.

\n\n

2. Método unshift(): agregar al inicio del array

\n\n

Si necesitas insertar un elemento al inicio, usa unshift(). Desplaza todos los elementos existentes hacia la derecha.

\n\n

const numbers = [2, 3, 4];\nnumbers.unshift(1);\n\nconsole.log(numbers); // [1, 2, 3, 4]\n

\n\n

También funciona con varios elementos:

\n\n

numbers.unshift(-1, 0);\nconsole.log(numbers); // [-1, 0, 1, 2, 3, 4]\n

\n\n

Importante: unshift() es más lento que push() para arrays grandes, porque necesita desplazar todos los elementos. Si el array tiene 100 000 elementos — es mejor considerar otra estructura de datos (por ejemplo, una cola con deque).

\n\n

3. Método splice(): insertar en cualquier posición

\n\n

El todoterreno. splice() puede eliminar, reemplazar y, por supuesto, agregar elementos en cualquier posición del array.

\n\n

Sintaxis: array.splice(start, deleteCount, item1, item2, ...)

\n\n

\n
• start — índice desde el que comenzamos
\n
• deleteCount — cuántos elementos eliminamos (ponemos 0 si solo agregamos)
\n
• item1, item2, ... — elementos a insertar
\n

\n\n

Ejemplo: insertamos «cereza» en la segunda posición (índice 1):

\n\n

const colors = ['rojo', 'azul', 'verde'];\ncolors.splice(1, 0, 'cereza');\n\nconsole.log(colors);\n// ['rojo', 'cereza', 'azul', 'verde']\n

\n\n

Se pueden insertar varios elementos a la vez:

\n\n

const letters = ['a', 'd'];\nletters.splice(1, 0, 'b', 'c');\n\nconsole.log(letters); // ['a', 'b', 'c', 'd']\n

\n\n

Cuándo usarlo: cuando necesitas insertar un elemento exactamente en medio del array — por ejemplo, agregar un nuevo elemento de menú entre los existentes. Recuerda: splice() muta el array.

\n\n

4. Método concat(): crear un nuevo array

\n\n

A diferencia de los métodos anteriores, concat() no modifica el array original, sino que devuelve uno nuevo, combinando dos o más arrays (o elementos).

\n\n

const arr1 = [1, 2, 3];\nconst arr2 = [4, 5];\nconst result = arr1.concat(arr2);\n\nconsole.log(result); // [1, 2, 3, 4, 5]\nconsole.log(arr1);   // [1, 2, 3] — no cambió\n

\n\n

Se pueden agregar no solo arrays, sino también valores individuales:

\n\n

const result2 = arr1.concat(6, 7);\nconsole.log(result2); // [1, 2, 3, 6, 7]\n

\n\n

Cuándo usarlo: cuando no quieres mutar el array original, por ejemplo, en programación funcional o cuando trabajas con estado inmutable en React. concat() es seguro y predecible.

\n\n

5. Operador spread (...): la forma moderna

\n\n

El operador spread (...) te permite «expandir» un array en sus elementos individuales. Es una forma elegante de crear nuevos arrays con elementos agregados.

\n\n

const oldArray = [1, 2, 3];\nconst newArray = [...oldArray, 4, 5];\n\nconsole.log(newArray); // [1, 2, 3, 4, 5]\nconsole.log(oldArray); // [1, 2, 3] — no cambió\n

\n\n

Se puede agregar al inicio:

\n\n

const newArray2 = [0, ...oldArray];\nconsole.log(newArray2); // [0, 1, 2, 3]\n

\n\n

E incluso en el medio:

\n\n

const midArray = [1, ...oldArray, 4];\nconsole.log(midArray); // [1, 1, 2, 3, 4]\n

\n\n

Cuándo usarlo: cuando trabajas con código moderno (ES6+) y necesitas inmutabilidad. El spread es más legible que concat() y funciona perfectamente con React, Redux y otros frameworks.

\n\n

Comparación rápida de métodos

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Método	¿Dónde agrega?	¿Muta el array?	Velocidad
push()	Al final	Sí	Rápido (O(1))
unshift()	Al inicio	Sí	Lento (O(n))
splice()	En cualquier posición	Sí	Medio (O(n))
concat()	Al final (nuevo array)	No	Rápido
Spread (...)	En cualquier posición (nuevo array)	No	Rápido

\n\n

Conclusión

\n\n

Ahora sabes 5 formas de agregar un elemento a un array en JavaScript. Cada método tiene sus ventajas:

\n\n

\n
• ¿Necesitas agregar al final? — push()
\n
• ¿Al inicio? — unshift() (pero ten cuidado con el rendimiento)
\n
• ¿En el medio? — splice()
\n
• ¿Sin mutar? — concat() o spread
\n

\n\n

Elige el método según la tarea. Y recuerda: en el desarrollo moderno, la inmutabilidad es cada vez más importante. Así que el spread y concat() son tus mejores amigos.

\n\n

¿Tienes preguntas? Escríbelas en los comentarios. ¡Comparte el artículo con colegas que también estén aprendiendo JavaScript!