Enlaces — JS: Arrays

• Tipos primitivos
• Tipos de referencia
  • Comparación de arrays
• Paso de referencias a funciones
• Diseño de funciones: ¿modificar o no modificar?
• Modificación de arrays por rendimiento

Cuando guardamos información en una variable en JavaScript, esta puede ser de dos tipos: datos primitivos y datos de referencia. Entender la diferencia entre ellos es clave porque afecta la forma en que se modifican y se pasan entre funciones.

Tipos primitivos

Los tipos de datos primitivos incluyen:

Las variables que almacenan un valor primitivo contienen directamente el valor en sí. Por ejemplo:

let mensaje = 'Hola';
let copia = mensaje;

copia = 'Adiós';

console.log(mensaje); // 'Hola'
console.log(copia);   // 'Adiós'

Aquí, cambiar copia no afecta a mensaje porque son valores separados.

Tipos de referencia

Los tipos de referencia incluyen:

Cuando asignamos un tipo de referencia a una variable, en realidad estamos almacenando una referencia a ese valor en memoria, no el valor en sí. Eso significa que si dos variables apuntan al mismo array u objeto, modificar una afectará también a la otra.

⏬ Veamos un ejemplo con un array:

const items = [1, 2];
// Ambas constantes apuntan al mismo array en memoria
const items2 = items;

items2.push(3);

console.log(items);  // [1, 2, 3]
console.log(items2); // [1, 2, 3]
console.log(items === items2); // true

Aquí, items e items2 son referencias al mismo array en la memoria. Cuando modificamos items2, también cambiamos items, porque ambos apuntan a la misma ubicación.

Comparación de arrays

Al comparar arrays con ===, estamos comparando referencias, NO el contenido:

console.log([1, 2, 3] === [1, 2, 3]); // false

Cada array se guarda en una ubicación diferente de la memoria, por lo que aunque tengan el mismo contenido, no son el mismo array.

Paso de referencias a funciones

Cuando pasamos un array a una función, lo que realmente se pasa es la referencia, no una copia del array:

const agregarElemento = (arr) => arr.push('wow');

const items = ['uno'];
agregarElemento(items);
console.log(items); // ['uno', 'wow']
agregarElemento(items);
console.log(items); // ['uno', 'wow', 'wow']

La función agregarElemento modificó directamente el array original porque está trabajando con la referencia.

Diseño de funciones: ¿modificar o no modificar?

Cuando se trabajan con arrays dentro de funciones, hay dos opciones:

• Modificar el array original
  
• Crear un nuevo array y devolverlo

Por lo general, es mejor la segunda opción. Así evitamos efectos inesperados y facilitamos la depuración del código.

Por ejemplo, veamos una función last(), que obtiene el último elemento de un array. Una mala implementación sería esta:

const last = (coll) => coll.pop();

❌ El problema aquí es que la función no solo obtiene el último elemento, sino que también lo elimina. Esto puede ser inesperado.

La forma correcta de hacerlo sin modificar el array es:

const last = (coll) => coll.at(-1);

const numeros = [10, 20, 30];
console.log(last(numeros)); // 30
console.log(numeros); // [10, 20, 30] (sin cambios)

El método .at(-1) devuelve el último elemento sin modificar el array.

Modificación de arrays por rendimiento

A veces sí queremos que una función modifique el array original, especialmente cuando el rendimiento es una preocupación. Hacer una copia de un array grande puede ser costoso en términos de memoria y velocidad.

Algunos métodos incorporados en JavaScript ya operan directamente sobre el array original, como:

const items = [3, 8, 1];

items.sort(); // Ordena el array permanentemente
console.log(items); // [1, 3, 8]

items.reverse(); // Invierte el array original
console.log(items); // [8, 3, 1]

Por otro lado, hay métodos como .concat(), que devuelven un nuevo array sin modificar el original. Siempre es importante leer la documentación para saber si un método modifica el array o no.

Materiales adicionales

1. El método concat() 📚 MDN Web Docs