JavaScript: Métodos Push, Pop, Shift, Unshift

Hola 👋, el otro día estaba repasando los métodos que sirven para manejar arreglos en JavaScript. Y quería comentar sobre los 4 métodos más comunes y básicos que existen para “manipular” el contenido de un arreglo en JavaScript.

⚙️ Resulta que a veces queremos agregar un elemento al final de un arreglo y para eso usamos push. 🤔 ¿Pero qué usamos para agregar uno al comienzo de un arreglo? ¡Vamos a ver! 💡

Comencemos desde el principio. Hablaré sobre los métodos más conocidos, comunes y usados en JavaScript para manipular arreglos: push, pop, shift, unshift. 👨‍💻

🫸 Push: Al final del arreglo.

El método push de los arreglos en JavaScript nos ayuda a agregar un elemento al final del arreglo y se utiliza de la siguiente manera:

const frutas = ['Manzana', 'Naranja', 'Pera'];

frutas.push('Mango');

// El resultado final sería:

console.log(frutas); // ['Manzana', 'Naranja', 'Pera', 'Mango']

Consulta la documentación de MDN.

🎈 Pop: Elimina el último.

Tal cual es el sonido que rompe una burbuja, pop produce el efecto de eliminar o “reventar” el último elemento de un arreglo y lo devuelve. Puedes almacenar el retorno de pop en una variable si lo que quieres es recuperarlo. Un ejemplo simple sería:

const frutas = ['Manzana', 'Naranja', 'Pera'];

const frutaEliminada = frutas.pop();

// El resultado final sería:

console.log(frutas); // ['Manzana', 'Naranja'];

console.log(frutaEliminada); // 'Pera'

Consulta la documentación de MDN.

☝️ Unshift: Vamos al principio.

Por otra parte, si lo que queremos es añadir elementos al principio del arreglo, es posible hacerlo fácilmente mediante el método unshift. Es muy fácil y el ejemplo quedaría así:

const frutas = ['Manzana', 'Naranja', 'Pera'];

frutas.unshift('Mango');

// El resultado final sería:

console.log(frutas); // ['Mango', 'Manzana', 'Naranja', 'Pera']

Consulta la documentación de MDN.

✏️ Shift: Borramos el primero.

Por último, tenemos el método shift. Este sirve para alcanzar el primer elemento de un array y eliminarlo del arreglo. ¡Súper fácil de usar! Al igual que pop, puedes almacenar el elemento borrado en una variable por si lo necesitas rescatar para usar en otra lógica de tu código. Un ejemplo sería así:

const frutas = ['Manzana', 'Naranja', 'Pera'];

const frutaEliminada = frutas.shift();

// El resultado final sería:

console.log(frutas); // ['Naranja', 'Pera'];

console.log(frutaEliminada); // 'Manzana'

Consulta la documentación de MDN.

No olvidemos que los métodos push y unshift aceptan más de un elemento separado por coma; es decir, si quieres agregar más de un elemento a la vez puedes hacerlo de forma separada uno por uno o todos juntos en la misma instancia en que invocas los métodos.

🧰 Herramienta para entenderlos mejor.

Hace unos días atrás hice esta pequeña herramienta, no muy elaborada, pero que sirve para entender de una forma más “visual” cómo se comportan los métodos al ser utilizados. Mira este ejemplo aquí