Mutabilidad e inmutabilidad en arrays JS

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:007:55

Mutabilidad e inmutabilidad en arrays JS

Curso de Fundamentos de JavaScript

Clase 28 de 55

Clase 28 / 55

Comentarios (32)32 comentarios

Augusto Eduardo Bonalumi

Hace 2 años

Métodos mutables: copyWithin, fill, pop, push, reverse, shift, sort, splice, unshift.

Métodos no mutables: slice, concat, toReversed, slice, toSorted, toSoliced.

Miguel Jonathan Madrigal González

Hace 2 años

Quiero agregar el spread operator, depende de su uso es mutable o inmutable.

Spread operator permite copiar todo el contenido de un array a otro. Su invocación es con tres puntos seguido el array que se desea clonar.

ejemplo:

let array1 = [1, 2]
let array2 = [...array1, 3, 4]
console.log(array2)
//output: 1, 2, 3, 4

Gabriel Muñoz Castro

Hace 2 años

Le entrego una leve modificación del ejercicio práctico entregado por la profesora, en donde utilizo un for of para simplificar las líneas del código y sobretodo la lectura del loop:

const numbersArray = Array(1, 2, 3, 4, 5);
let sumElement = 0;

for (element of numbersArray) {
  sumElement += element;
}

console.log(`La suma total de los números almacenados en el Array son:\n${sumElement}`);

LUIS FELIPE RESTREPO ARGÜELLO

Hace 2 años

Para los que están tomando este curso les sugiero algo, pidan a su IA de preferencia que les de una breve explicación del tema de cada clase con ejemplos y luego si vean el video, en mi caso ayudó bastante a comprender más rápido todo. Exitos!

Juan Francisco

Hace un año

Yo veo la clase y si algo no entiendo le pregunto a la IA y que me de ejemplos de lo que no entiendo y de aprofundir algunos temas mas. Es un buen metodo de anticiparse a la clase usando la IA y de aprofundir despues de clase.

Juan Miguel Jimenez

Hace 10 meses

A eso le agregaría pedirle a la IA desafíos relacionados con el tema para entender mucho mejor el tema.

Andrés Soret Chacin

Hace 2 años

Mutabilidad e Inmutabilidad en Arrays

La mutabilidad se refiere a la capacidad de un array de cambiar su contenido sin crear un nuevo array.
La inmutabilidad implica que, al modificar un array, se crea un nuevo array en lugar de cambiar el original.
Los métodos de los arrays pueden ser mutables o inmutables dependiendo de su comportamiento.

Ejemplo de Mutabilidad

Agregar un elemento a un array existente (mutación del array original).let fruits = ['apple', 'banana', 'orange']; fruits.push('watermelon'); console.log(fruits); // ['apple', 'banana', 'orange', 'watermelon']

Ejemplo de Inmutabilidad

Crear un nuevo array concatenando dos arrays (sin modificar el array original).const fruits = ['apple', 'banana', 'orange']; const newFruits = fruits.concat(['grape', 'kiwi']); console.log(fruits); // ['apple', 'banana', 'orange'] console.log(newFruits); // ['apple', 'banana', 'orange', 'grape', 'kiwi']

Comprobación de Arrays

Verificar si una variable es un array utilizando Array.isArray.const fruits = ['apple', 'banana', 'orange']; const isArray = Array.isArray(fruits); console.log(isArray); // true

Ejercicio Práctico: Sumar Elementos de un Array

Sumamos todos los elementos de un array utilizando un bucle for.const numbersArray = [1, 2, 3, 4, 5]; let sum = 0;

for (let i = 0; i < numbersArray.length; i++) { sum += numbersArray[i]; }

console.log(sum); // 15
Explicación del ejercicio:
- Se crea un array de números numbersArray con los valores [1, 2, 3, 4, 5].
- Se inicializa una variable sum en 0.
- Se utiliza un bucle for para iterar a través de los elementos del array, sumando cada elemento a la variable sum.
- Se imprime el resultado final que es la suma de todos los elementos del array (15).

Juan Francisco

Hace un año

Cuando declaras una variable con const, estás diciendo:

“Esta referencia no puede cambiar.”

Pero eso no significa que el contenido del valor referenciado sea inmutable.

const frutas = ['apple', 'banana', 'orange'];

La referencia es en este caso es el array frutas con sus valores de frutas, si aumentas una fruta mas no cambias su referencia sino su contenido. y la variable sigue constante porque su referencia no cambio. Otro ejemplo de refencia podria ser un amigo con const nombre = Carlos, si Carlos estudia un idioma mas no cambias de amigo (referencia) sino que carlos sabe un idioma mas, en este caso un tributo mas per con la misma referencia osea es la misma vairable const.

Si por ejemplo asignas a const frutas = ['grape']; esto seria un error porque estarias cambiando su referencia. Osea esto ya no seria el array original sino otro array distinto.

Emanuel Camarena

Hace 2 años

No pude eliminar mi comentario anterior lol, pero la respuesta al ejercicio tambien podria ser:

// Practica: Sumar todos los elementos que tiene un arrayconst numbersArray = [1,2,3,4,5]let sum = 0

for(number of numbersArray){ sum += number} console.log(sum)

Manuel Marino

Hace 2 años

Otra opción para el push es el siguiente

const seguros=["Vida","Vehicula","SOAT"]
seguros[seguros.length]="Rentas" // forma 1
console.log(seguros)

El print saldrá
["Vida","Vehicula","SOAT","Rentas"]
```//agregar const seguros=\["Vida","Vehicula","SOAT"]seguros\[seguros.length]="Rentas" // forma 1seguros.push("VDP+") // forma 2console.log(seguros)

Manuel Marino

Hace 2 años

Para el caso de suma de arrays tengo esta otra forma

// suma de arrays mediante for
const numerosPrimos=[1,3,5,7,11]
let sum=0
for (i of numerosPrimos){  //el i representa el valor de cada uno de los elementos en el array y no un índice---> FOR (i) OF (array)   
    sum=i+sum
}
console.log(sum)
```// suma de arrays mediante forconst numerosPrimos=\[1,3,5,7,11]let sum=0for (i of numerosPrimos){  //el i representa el valor de cada uno de los elementos en el array y no un índice---> FOR (i) OF (array)       sum=i+sum}console.log(sum)

Juan Francisco

Hace un año

Exacto el i no devuelve el indice, sino los valores existentes, si hubieran vacios en el array o undefined no devolveria estos y los saltaria hasta darno valores reales.

César Augusto Poveda Floréz

Hace 2 años

Buenas tardes, todo muy claro. Sin embargo me surgio una duda. Tenia entendido que una variable de tipo const es que no cambia. Por que el array siendo de tipo const, permite utilizar el método push?, no lo estaría modificando?, por lo menos en estructura, pues esta agregando un dato mas?... muchas gracias.

Juan Francisco

Hace un año

Cuando declaras una variable con const, estás diciendo:

“Esta referencia no puede cambiar.”

Pero eso no significa que el contenido del valor referenciado sea inmutable.

const frutas = ['apple', 'banana', 'orange'];

La referencia es en este caso el array frutas con sus valores este caso las frutas, si aumentas una fruta mas no cambias su referencia sino su contenido. Otro ejemplo de refencia podria ser un amigo con const nombre = Carlos, si Carlos estudia un idioma mas no cambias de amigo (referencia) sino que carlos sabe un idioma mas.

Si por ejemplo asignas a const frutas = ['grape']; esto seria un error porque estarias cambiando su referencia. Osea esto ya no seria el array original sino otro array distinto.

Elkin Camargo

Hace un año

Andres Lopez

Hace 2 años

hola! me agtadaria que en todos los cursos se tengan en cuenta conceptos basicos cono piede ser la complejidad O de una bloque de codigo.

Moises Baldenegro Melendez

Hace 2 años

// inmutability with spread operator

const newFruits = [...fruits, "grape", "kiwi"];

Alvarez Alvarez

Hace un año

Es normal que me de sueñooooo, a veces no les entiendo mucho y debo buscar videos en youtube

Daniel Vergel

Hace 3 meses

Kamilo Stevan Alomías Correa

Hace 5 meses

Algo que recomiendo es hacer algo llamado "Pruebas de escritorio", consiste en escribir en el cuaderno cómo se ejecutaría el código en cada iteración del ciclo, esto permite interiorizar de manera más efectiva lo que está haciendo el ciclo y cómo se incrementa el contador y cambia la variable sum.

Leonardo Buezo

Hace 7 meses

Los arrays son objetos en JS... typeof []; // "object"

¿Qué hace inmutable a un objeto ?

Para eso existen otros mecanismos:

Object.freeze(obj)

Congela el objeto: no podés agregar, eliminar ni modificar propiedades

Object.seal(obj)

Podés modificar valores existentes, pero no agregar ni eliminar propiedades

const

Solo evita reasignar la variable, no protege el contenido del objeto

Hay una diferencia importante:

No mutar → elegís no tocar el original (pero podrías)
Inmutable → es imposible tocarlo, está protegido

Object.entries() y compañía simplemente te dan una "foto" del objeto en ese momento. El objeto sigue siendo completamente mutable.

¿Cómo hacer un array verdaderamente inmutable?

const arr = Object.freeze([1, 2, 3]);

arr.push(4);    // ❌ falla silenciosamente (o tira error en strict mode)
arr[0] = 99;   // ❌ no hace nada

console.log(arr); // [1, 2, 3] — intacto

⚠️ El freeze es superficial

const arr = Object.freeze([[1, 2], [3, 4]]);

arr[0].push(99); // ✅ esto SÍ funciona — el array interno no está freezado

console.log(arr); // [[1, 2, 99], [3, 4]]

Cristian Alejandro Pereira Rodriguez

Hace 8 meses

Buen momento para recordar que en programación se cuenta desde el 0

Brayan Steven Rivera Páez

Hace 10 meses•editado

sencillo

//practica

const numbersArrays = [1,2,3,4,5];
let sum = 0;

for (let i of numbersArrays){
    sum += i;
}

console.log(sum);

Juan Miguel Jimenez

Hace 10 meses

Mutables (modifican): push, pop, shift, unshift, splice, sort, reverse, fill, copyWithin.
Inmutables (NO modifican):
- Crean nuevos arrays: concat, slice, map, filter, flat, flatMap, toReversed, toSorted, toSpliced, with.

Edgar Omar Llanque Cordova

Hace un año

hola, cuando defino una const, se suponen que no cambia su valor durante el programa? si ese es el caso, por qué le afecta la mutabilidad?

Juan Francisco

Hace un año

Diràs por què no le afecta la mutabilidad?

Juan Francisco

Hace un año

Cuando declaras una variable con const, estás diciendo:

“Esta referencia no puede cambiar.”

Pero eso no significa que el contenido del valor referenciado sea inmutable.

const frutas = ['apple', 'banana', 'orange'];

Si por ejemplo asignas a const frutas = ['grape']; esto seria un error porque estarias cambiando su referencia. Osea esto ya no seria el array original sino otro array distinto.

David Elias Gatica Morales

Hace 2 años

Entonces se podria decir que los primitivos son inmutables y los no primitivos son mutables?

Recursos

Cuando trabajas con arrays en JavaScript, entender la mutabilidad e inmutabilidad marca la diferencia entre romper tu código sin querer o controlarlo con precisión. Aquí te explico cómo ciertos métodos transforman el array original y otros crean uno nuevo, además de cómo verificar si una variable es un array y cómo recorrerlo con un for para sumar sus elementos.

¿Qué significa que un array sea mutable en JavaScript?

Un array es un objeto, y como tal tiene métodos. Algunos de esos métodos modifican el array original, es decir, lo mutan. Otros, en cambio, devuelven un array nuevo y dejan intacto el original.

Un ejemplo claro de mutación aparece con el método push, que agrega un elemento al final del array existente. Si tienes un array fruits con apple, banana y orange, y le aplicas fruits.push('watermelon'), al imprimir fruits verás que ahora contiene los cuatro valores. El array original cambió.

¿Qué es la mutabilidad en arrays? Es la capacidad que tienen ciertos métodos de modificar directamente el array original en lugar de devolver uno nuevo. Métodos como push mutan el array.

¿Cómo funciona la inmutabilidad con concat?

La inmutabilidad es lo contrario: trabajas sobre el array sin alterarlo. El método concat es un buen ejemplo porque junta dos arrays y devuelve uno nuevo.

Si haces const newFruits = fruits.concat(['grape', 'kiwi']), al imprimir ambos arrays vas a notar dos cosas:

fruits mantiene su contenido previo, sin las nuevas frutas añadidas por concat.
newFruits contiene la combinación: apple, banana, orange, watermelon, grape y kiwi.

Esa diferencia es clave cuando quieres preservar datos originales mientras generas variaciones para otros procesos.

¿Cómo verificar si una variable es un array con Array.isArray?

A veces necesitas confirmar que estás trabajando con un array antes de aplicarle métodos específicos. Para eso existe Array.isArray, que devuelve un booleano: true si la variable es un array, false si no lo es.

La sintaxis es directa: const isArray = Array.isArray(fruits). Al hacer console.log(isArray) con un array válido, recibirás true.

¿Para qué sirve Array.isArray? Sirve para validar si una variable es un array antes de ejecutar lógica que dependa de esa estructura. Devuelve true o false.

Este tipo de validación evita errores silenciosos cuando recibes datos desde APIs o entradas externas donde no controlas el tipo.

¿Cómo sumar todos los elementos de un array con un for?

Un ejercicio práctico muy común es recorrer un array y sumar sus valores. Aquí entran en juego dos cosas que ya viste: la propiedad length y el ciclo for.

El planteamiento es así:

Creas un array de números, por ejemplo numbersArray = [1, 2, 3, 4, 5].
Declaras una variable sum inicializada en cero.
Recorres el array con un for que itere mientras i sea menor que numbersArray.length.
En cada vuelta sumas: sum = sum + numbersArray[i].

El código completo se vería así:

javascript const numbersArray = [1, 2, 3, 4, 5]; let sum = 0;

for (let i = 0; i < numbersArray.length; i++) { sum = sum + numbersArray[i]; }

console.log(sum); // 15

El resultado es 15, que corresponde a la suma de 1 + 2 + 3 + 4 + 5. El uso de numbersArray.length te asegura que el ciclo recorra exactamente la cantidad de posiciones que existen, sin pasarse ni quedarse corto.

¿Por qué usar length en lugar de un número fijo?

Usar length hace tu código flexible. Si mañana el array tiene diez elementos en lugar de cinco, no necesitas tocar el for: la condición se ajusta automáticamente.

Esa es la lógica detrás de combinar arrays con ciclos: la propiedad length te entrega el tamaño dinámico, el for te da el control de iteración, y los índices te permiten acceder a cada valor por su posición.

¿Qué método de array vas a probar primero, uno mutable como push o uno inmutable como concat? Cuéntame en los comentarios.

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 e inmutabilidad en arrays JS