Mutabilidad en arrays con push y pop

Contenido del curso

Introducción a JavaScript

Estructuras de Control y Lógica

Funciones y This

Manipulación de Arrays

Programación Orientada a Objetos

Asincronía en JavaScript

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:32

Mutabilidad en arrays con push y pop

Curso de Fundamentos de JavaScript

Clase 29 de 55

Clase 29 / 55

Recursos

Si estás aprendiendo JavaScript y quieres entender cómo modificar arreglos sin crear uno nuevo cada vez, los métodos push y pop son tu punto de partida. Ambos pertenecen al grupo de funciones que mutan el array original, una característica clave para manejar datos dinámicos en tus proyectos.

La idea es simple: en lugar de generar copias, le pides al mismo array que cambie. Esto ahorra memoria y te da control directo sobre la estructura de datos. Y aquí viene lo interesante, además de modificar el array, ambos métodos te devuelven un valor útil que puedes guardar en una variable.

¿Qué significa que un método mute el array original?

Cuando hablamos de mutabilidad en JavaScript, nos referimos a que el array sobre el que aplicas el método cambia su contenido directamente. No estás creando un array nuevo, estás reescribiendo el que ya existe.

¿Qué es la mutabilidad en arrays? Es la capacidad de un array de cambiar su contenido sin generar una copia. Métodos como push y pop modifican el array original, no devuelven uno nuevo.

Esto es importante porque cambia la forma en que piensas tu código. Si necesitas conservar el array original intacto, push y pop no son tu mejor opción. Pero si tu objetivo es agregar o quitar elementos sobre la marcha, son justo lo que buscas.

¿Cómo funciona el método push para agregar elementos?

El método push añade uno o más elementos al final del array y devuelve la nueva longitud del array después de la modificación.

Imagina que tienes una variable countries con tres países:

javascript const countries = ['USA', 'Canada', 'UK']; const newCountries = countries.push('Germany', 'Australia');

console.log(countries); // ['USA', 'Canada', 'UK', 'Germany', 'Australia'] console.log(newCountries); // 5

Fíjate en dos cosas. La primera, countries ya no tiene tres elementos, ahora tiene cinco. La segunda, newCountries no es un array, es el número 5, que representa la longitud final.

¿Por qué push devuelve un número y no un array?

Porque su trabajo principal es modificar, no copiar. El número que devuelve es una pista útil: te dice cuántos elementos tiene tu array después de la operación, lo cual sirve para validaciones rápidas o bucles.

¿Cómo funciona el método pop para eliminar elementos?

El método pop elimina el último elemento del array y te devuelve ese elemento eliminado. Es el complemento natural de push.

javascript const removedCountry = countries.pop();

console.log(removedCountry); // 'Australia' console.log(countries); // ['USA', 'Canada', 'UK', 'Germany']

El array original pierde su último valor y, al mismo tiempo, capturas ese valor en una variable por si necesitas usarlo después. Es una forma elegante de gestionar pilas o historiales.

¿Cuál es la diferencia entre push y pop? Push agrega elementos al final del array y devuelve la nueva longitud. Pop elimina el último elemento y devuelve ese elemento eliminado. Ambos modifican el array original.

¿Cuándo conviene usar push y pop en tu código?

Estos métodos brillan cuando trabajas con estructuras dinámicas:

Listas de tareas donde agregas o completas ítems.
Pilas de navegación o historial de acciones.
Carritos de compra donde sumas o quitas productos.
Buffers temporales que crecen y se reducen según la lógica del programa.

La clave es recordar que estás mutando el array. Si en tu aplicación necesitas mantener el estado original, considera otros métodos como concat o el spread operator, que sí devuelven copias.

¿Qué pasa si uso push con varios valores a la vez?

Puedes pasarle todos los argumentos que quieras separados por coma. En el ejemplo anterior agregamos Germany y Australia en la misma llamada, y push los añadió en orden al final del array. La longitud final reflejará todos los elementos sumados.

Ahora que ya distingues entre mutar y copiar, prueba combinar push y pop en una pequeña función de tu proyecto. Cuéntame en los comentarios qué caso de uso se te ocurre primero.

Andrés Soret Chacin

Hace 2 años

Métodos que Modifican el Array Original

En esta clase vamos a hablar de dos métodos que modifican el array original: push y pop.
Ambos métodos son ejemplos de mutabilidad, ya que cambian el contenido del array sin crear uno nuevo.

Método push

El método push añade uno o más elementos al final de un array.
Devuelve la nueva longitud del array.
Ejemplo:let countries = ['USA', 'Canada', 'UK']; const newLength = countries.push('Germany', 'Australia'); console.log(countries); // ['USA', 'Canada', 'UK', 'Germany', 'Australia'] console.log(newLength); // 5
Este método modifica el array original countries, añadiendo los nuevos elementos 'Germany' y 'Australia'.

Método pop

El método pop elimina el último elemento de un array.
Devuelve el elemento eliminado.
Ejemplo:let countries = ['USA', 'Canada', 'UK']; const removedCountry = countries.pop(); console.log(countries); // ['USA', 'Canada'] console.log(removedCountry); // 'UK'
Este método modifica el array original countries, eliminando el último elemento 'UK'.

Explicación de los Métodos

Mutabilidad: Ambos métodos (push y pop) modifican el array original en lugar de crear uno nuevo.
Resultado:
- push agrega elementos y devuelve la nueva longitud del array.
- pop elimina el último elemento y devuelve ese elemento.

Ejemplo Práctico

Crear un array de países y utilizar push y pop para modificarlo:let countries = ['USA', 'Canada', 'UK'];

// Usar push para agregar países const newLength = countries.push('Germany', 'Australia'); console.log(countries); // ['USA', 'Canada', 'UK', 'Germany', 'Australia'] console.log(newLength); // 5

// Usar pop para eliminar el último país const removedCountry = countries.pop(); console.log(countries); // ['USA', 'Canada', 'UK', 'Germany'] console.log(removedCountry); // 'Australia'
Conclusión: Los métodos push y pop son útiles para modificar arrays de manera directa, añadiendo o eliminando elementos según sea necesario.

Comentarios (17)17 comentarios

Desarrollador itglobers

LUIS FELIPE RESTREPO ARGÜELLO

Kyb3r Cipher

Alejandro Guadalupe Sanchez Sanchez

Florencia Maria Berra Panelo

Hace un año

Cristian Javier Martinez Barcinilla

Juan pablo Delgadillo Giraldo

Pablo Luna Guzmán

Calvin Rafael Bobadilla Fernandez

Alfonso Neil Jiménez Casallas

Gorka Gallardo Castany

Ian Steve Portuguez Rodriguez

Hace 20 días

marco contreras

José Miguel Vásquez Guerra

Daniel Vergel

Hace 3 meses

Robinson Daniel Mendoza Campo

Alejandro Romero Rodriguez

Jhony Alex Huamanchumo Bances

Diego Andrés Lopez Rodriguez

Introducción a JavaScript

Fundamentos de JavaScript para Principiantes

Instalación y Configuración de JavaScript en Visual Studio Code

Instalación y configuración de Visual Studio Code y Node.js en Windows

Variables y Buenas Prácticas en JavaScript

Tipos de datos primitivos y complejos en JS

Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings

Números y Operaciones Matemáticas en JavaScript

Conversión de Tipos en JavaScript: Implícita y Explícita

Conversión de Tipos en JavaScript: Explícita e Implícita

Estructuras de Control y Lógica

Operadores de Comparación en JavaScript: Igualdad y Desigualdad

Operadores Lógicos en Programación: AND, OR y NOT

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

Juego de Adivinanza: Programación con Estructuras Condicionales

Cómo funciona switch en JavaScript

Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript

Cómo usar for of con arrays en JavaScript

Iteración sobre Objetos con forIn en JavaScript

Uso del ciclo while para iteración en programación

Ciclos doWhile: Estructura y Diferencias con While

Funciones y This

Funciones en JavaScript: Cómo Calcular Precios con Descuentos

Diferencias entre Funciones y Métodos en JavaScript

Funciones Puras e Impuras en Programación: Conceptos y Ejemplos

Arrow functions y lexical binding en JS

Scope chain y contextos en JavaScript

Closures y Ámbito Léxico en JavaScript

Fundamentos del Desarrollo Web: Frontend y Backend

Manipulación de Arrays

Arrays: Propiedades, Acceso y Creación en Programación

Mutabilidad e inmutabilidad en arrays JS

Mutabilidad en arrays con push y pop

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

Uso del método slice para extraer porciones de un array en JavaScript

Uso del Spread Operator en JavaScript: Copia, Combinación y Más

Programación Orientada a Objetos

Objetos en JavaScript: propiedades y métodos

Creación y Manipulación de Objetos en JavaScript

Función constructora y gestión de instancias en JavaScript

Clases en JavaScript con sintaxis moderna

Herencia y prototipos en JavaScript

Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

Métodos y herencia prototípica en JavaScript

Uso de "this" en Clases y Funciones Constructoras

Validación de Usuarios en una Red Social: Algoritmo Básico

Cómo el return false dentro del for rompe tu login

Asincronía en JavaScript

Programación Síncrona y Asíncrona en JavaScript

Promesas en JavaScript: estados y métodos

Uso de Async/Await para Promesas Asíncronas en JavaScript

Peticiones asíncronas con for await en JavaScript

Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición

Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network

Función reutilizable para peticiones fetch

Enviar un POST con Fetch API y formularios

Cómo borrar posts con fetch y delegation pattern

Manejo de IDs en JavaScript para eliminar artículos del DOM

Actualizaciones y Nuevas Funciones en JavaScript

Mutabilidad en arrays con push y pop