javascript

JavaScript – Agregar elemento a arreglo

Hoy veremos algo muy simple en JS: cómo agregar un elemento a un arreglo ya sea para agregarlo al inicio o al final.

Esto lo vamos a hacer con JavaScript así que puede que funcione para los frameworks como Vue, React, Angular o jQuery.

Recuerda que un array en JavaScript puede tener elementos mixtos y de cualquier tipo. Por otro lado puedes agregar elementos sin límite.

Veamos entonces cómo agregar un elemento a un array en JavaScript.

Array push en JavaScript

La solución para añadir el elemento al final es la función push que tienen los arreglos. Nosotros invocamos a la función, le pasamos los elementos que queremos agregar al arreglo y la función modificará el arreglo internamente.

Aquí el ejemplo:

const arreglo = [1, 2];
console.log("Antes de agregar es: " + arreglo); // 1,2
arreglo.push(3, 4);
console.log("Después de agregar dos elementos es: " + arreglo); // 1,2,3,4
arreglo.push(5);
console.log("Después de agregar un elemento es: " + arreglo); // 1,2,3,4,5

Fíjate en que yo no espero el valor de regreso de la función, ya que no me interesa; lo que me interesa es que la función agrega los elementos al final del arreglo.

Por cierto, recuerda que esto lo agrega al final y que puedes invocar a push con uno o varios elementos.

Agregar elemento al inicio de arreglo

Si por el contrario quieres agregar un elemento a un arreglo de JavaScript pero quieres que este se coloque al inicio, utiliza la función unshift. De este modo colocas los elementos a la izquierda o mejor dicho al inicio del arreglo.

Aquí el código:

const arreglo = [5, 6, 7];
console.log("Antes de agregar es: " + arreglo);
arreglo.unshift(2, 3, 4);
console.log("Después de agregar dos elementos es: " + arreglo);
arreglo.unshift(1);
console.log("Después de agregar un elemento es: " + arreglo);

Poniendo todo junto

A continuación te muestro la ejecución de los dos programas. Recuerda que esto funcionará del lado del cliente o del lado del servidor, ya que al final el lenguaje es JavaScript.

Por cierto, en este caso te mostré ejemplos con números enteros pero puedes agregar cualquier tipo de dato válido.

Agregar elemento a arreglo con JavaScript

Si quieres puedes aprender más sobre JavaScript en mi blog.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 días hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 días hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 días hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 días hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 días hace

Solución: Apache – Server unable to read htaccess file

Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…

3 días hace

Esta web usa cookies.