Mutabilidad e inmutabilidad en arrays: conceptos y ejemplos prácticos

Clase 28 de 55Curso de Fundamentos de JavaScript

Contenido del curso

Introducción a JavaScript

Estructuras de Control y Lógica

Manipulación de Arrays

Programación Orientada a Objetos

Asincronía en JavaScript

Resumen

Comprender cómo se comportan los arrays cuando los modificamos es fundamental para escribir código predecible en JavaScript. La diferencia entre mutar el array original o crear uno nuevo determina la forma en que gestionamos los datos y evitamos errores inesperados. A continuación se exploran estos conceptos junto con un ejercicio práctico que combina arrays y ciclos for.

¿Qué significa mutabilidad e inmutabilidad en arrays?

Un array en JavaScript es un objeto que dispone de múltiples métodos. Algunos de esos métodos transforman el array original (mutabilidad) y otros generan un array completamente nuevo sin alterar el anterior (inmutabilidad). Reconocer esta distinción es clave para decidir qué método usar en cada situación.

¿Cómo funciona un método mutable como push?

El método .push() agrega un elemento al final del array existente, modificándolo directamente [03:06].

js const fruits = ["apple", "banana", "orange"]; fruits.push("watermelon"); console.log(fruits); // ["apple", "banana", "orange", "watermelon"]

Al ejecutar este código, el array fruits ya no tiene tres elementos sino cuatro. El array original fue mutado, es decir, su contenido cambió permanentemente.

¿Cómo se logra la inmutabilidad con concat?

El método .concat() une dos arrays y devuelve uno nuevo, sin modificar ninguno de los originales [04:12].

js const newFruits = fruits.concat(["grape", "kiwi"]); console.log(fruits); // ["apple", "banana", "orange", "watermelon"] console.log(newFruits); // ["apple", "banana", "orange", "watermelon", "grape", "kiwi"]

Aquí fruits conserva sus cuatro elementos, mientras que newFruits contiene seis. No se mutó el array original; se creó una referencia distinta con los datos combinados.

¿Cómo verificar si una variable es un array?

JavaScript ofrece el método estático Array.isArray(), que recibe cualquier valor y devuelve un booleano (true o false) indicando si se trata de un array [05:24].

js const isArray = Array.isArray(fruits); console.log(isArray); // true

Esta comprobación resulta útil cuando recibimos datos de fuentes externas y necesitamos asegurarnos de que podemos iterar sobre ellos antes de aplicar métodos propios de arrays.

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

Un ejercicio clásico para practicar arrays y ciclos consiste en sumar todos los valores numéricos contenidos en un array [06:18].

js 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

¿Qué papel juegan length y el índice en la iteración?

  • numbersArray.length devuelve 5, que es la cantidad total de elementos.
  • La condición i < numbersArray.length garantiza que el índice llegue como máximo hasta 4, evitando acceder a una posición inexistente.
  • En cada vuelta del ciclo, numbersArray[i] obtiene el valor en la posición actual y lo acumula en la variable sum.

El resultado es 15 porque 1 + 2 + 3 + 4 + 5 = 15. Este patrón de acumulador es muy común y sirve de base para operaciones más complejas como promedios o búsquedas de valores máximos.

Dominar la diferencia entre métodos mutables e inmutables, saber verificar tipos de datos y combinar arrays con estructuras de control como for son habilidades esenciales para cualquier persona que esté aprendiendo JavaScript. ¿Has probado a reemplazar .push() por el spread operator para mantener la inmutabilidad? Comparte tu experiencia en los comentarios.