Valores Primitivos vs. de Referencia en JavaScript

En JavaScript, no todos los datos se comportan de la misma manera. La forma en que se almacenan, copian y manipulan depende de si son un valor primitivo o un valor de referencia. Entender esta diferencia es, sin duda, una de las claves para predecir el comportamiento de tu código, evitar bugs frustrantes y escribir software robusto.

En este artículo, desglosaremos esta distinción fundamental, explorando cómo funciona la memoria en JavaScript (la Pila y el Montón) y qué implicaciones tiene en tu día a día como programador.

Las Dos Familias de Datos en JavaScript

JavaScript agrupa todos sus tipos de datos en dos categorías:

1. Valores Primitivos:

Los valores primitivos son los tipos de datos más básicos y simples en JavaScript. Son inmutables, lo que significa que no pueden ser modificados una vez creados. En lugar de modificar el valor, JavaScript crea un nuevo valor cuando se realiza una operación sobre un valor primitivo.

• number: Representa valores numéricos, tanto enteros como decimales.
• string: Cadenas de texto.
• boolean: Valores lógicos true o false.
• undefined: Indica que una variable ha sido declarada pero no inicializada.
• null: Representa la ausencia intencional de un valor.
• symbol: Identificadores únicos introducidos en ES6.
• bigint: Para representar números enteros muy grandes, a partir de ES2020.

2. Valores de Referencia:

Los valores de referencia son estructuras de datos complejas que no almacenan los valores directamente, sino una referencia a la ubicación en memoria donde se encuentran. Esto significa que cuando se asigna un valor de referencia a una variable, se copia la referencia y no el valor en sí.

• Objetos: Colección de pares clave-valor.
• Arrays: Listas ordenadas de elementos, que son un tipo especial de objeto.
• Funciones: Objetos invocables que pueden contener lógica de programación.
• Fechas (Date), Expresiones regulares (RegExp), entre otros.

¿Cómo se Almacenan en Memoria? La Pila vs. el Montón

Para entender la diferencia, imaginemos la memoria de nuestro programa dividida en dos áreas:

• La Pila (Stack): Una zona de memoria rápida y organizada donde se almacenan los valores primitivos. Es como una pila de libros: ordenada y de acceso directo al que está arriba.
• El Montón (Heap): Una región de memoria más grande y flexible donde se almacenan los valores de referencia (objetos, arrays). Es menos organizada pero puede guardar datos de gran tamaño y estructura dinámica.

La Diferencia en Acción: Copia por Valor vs. Copia por Referencia

Aquí es donde todo cobra sentido. La forma en que se copian las variables depende de si su valor vive en la Pila o en el Montón.

Primitivos: Copia por Valor

Cuando asignas un valor primitivo a otra variable, JavaScript crea una copia completa e independiente de ese valor.

Analogía: Le das a un amigo una fotocopia de un documento. Si tu amigo escribe en su fotocopia, tu documento original permanece intacto.

let scoreA = 100;
let scoreB = scoreA; // 'scoreB' obtiene una COPIA del valor de 'scoreA'.

scoreB = 200; // Modificamos 'scoreB'. Esto NO afecta a 'scoreA'.

console.log(`Puntuación A: ${scoreA}`); // Puntuación A: 100
console.log(`Puntuación B: ${scoreB}`); // Puntuación B: 200

Las dos variables son totalmente independientes.

Referencias: Copia por Referencia

Cuando asignas un valor de referencia (un objeto o array), JavaScript no copia el objeto. En su lugar, copia la referencia (la “dirección”) que apunta al objeto original en el Montón.

Analogía: Le das a un amigo la dirección de tu casa. Si tu amigo va y pinta una pared, tú verás la pared pintada porque ambos estáis afectando a la misma casa.

const user1 = { name: "Alex" };
const user2 = user1; // 'user2' copia la dirección de 'user1'. Ambos apuntan al MISMO objeto.

user2.name = "Eva"; // Modificamos el objeto a través de 'user2'.

// El cambio se refleja en 'user1' porque ambos se refieren al mismo objeto.
console.log(`Nombre de Usuario 1: ${user1.name}`); // Nombre de Usuario 1: Eva
console.log(`Nombre de Usuario 2: ${user2.name}`); // Nombre de Usuario 2: Eva

Ambas variables están conectadas. Un cambio a través de una afecta a la otra.

Propiedades Dinámicas: La Flexibilidad de los Objetos

Esta diferencia de comportamiento nos lleva a otra característica clave: solo los valores de referencia pueden tener propiedades añadidas, modificadas o eliminadas dinámicamente.

En un objeto (valor de referencia), puedes:

let person = {
    name: "John",
    age: 25
};

// 1. Agregar una nueva propiedad
person.city = 'Madrid';

// 2. Modificar una propiedad existente
person.age = 31;

// 3. Eliminar una propiedad
delete person.age;

console.log(person); // { name: 'John', city: 'Madrid' }

El objeto es mutable y su estructura puede cambiar en cualquier momento.

En un primitivo, no puedes:
Los valores primitivos no tienen propiedades propias. Si intentas añadirles una, JavaScript no producirá un error, pero la acción no tendrá ningún efecto.

let name = 'Juan';
name.city = 'Madrid'; // Intentamos agregar una propiedad a un string

console.log(name.city); // undefined

¿Qué ocurre aquí? JavaScript, para ejecutar la línea name.city = 'Madrid', crea temporalmente un objeto “envoltorio” (new String('Juan')), le asigna la propiedad city, y luego descarta ese objeto inmediatamente. El string primitivo original name nunca es modificado.

Implicaciones Prácticas y Buenas Prácticas

Entender esta distinción tiene consecuencias directas en cómo escribes tu código.

1. Comparación de Valores

Primitivos (===): Se comparan por su valor. Si los valores son idénticos, el resultado es true.

let str1 = "hola";
let str2 = "hola";

console.log(str1 === str2); // true

Referencias (===): Se comparan por su referencia (su dirección en memoria). Dos objetos o arrays solo son iguales si apuntan exactamente al mismo lugar en la memoria.

2. Paso de Argumentos a Funciones

Primitivos: Cuando pasas un valor primitivo a una función, esta recibe una copia. Cualquier modificación dentro de la función no afecta a la variable original fuera de ella.

function increment(score) {
    score += 1; // Modifica la copia local.
    console.log(`Dentro de la función: ${score}`); // 11
}
let myScore = 10;
increment(myScore);

console.log(`Fuera de la función: ${myScore}`); // 10

Referencias: Cuando pasas un objeto o array, la función recibe la referencia. Si la función modifica el contenido de ese objeto, el cambio será visible fuera de la función.

function activateUser(user) {
    user.active = true; // Modifica el objeto original.
}
const currentUser = { name: "Lina", active: false };
activateUser(currentUser);
console.log(currentUser.active); // true

3. Buena Práctica: Cómo Evitar Mutaciones Inesperadas

Para evitar modificar un objeto o array original (especialmente dentro de una función), debes crear una copia o “clon” del mismo. Esto rompe la referencia compartida. La forma moderna y sencilla de hacer una copia superficial es con el operador de propagación (...).

const originalSettings = { theme: 'dark', notifications: true };

function changeTheme(settings) {
    // 1. Creamos una copia para no modificar el original.
    const newSettings = { ...settings };
    
    // 2. Trabajamos sobre la copia.
    newSettings.theme = 'light';
    return newSettings;
}

const updatedSettings = changeTheme(originalSettings);

console.log(originalSettings.theme); //  (El original no fue modificado)
console.log(updatedSettings.theme);  // (Recibimos un nuevo objeto con los cambios)

Conclusión

La distinción entre valores primitivos y de referencia es fundamental en JavaScript. Los primitivos son simples, inmutables y se copian por valor. Las referencias son complejas, mutables y se copian por referencia, lo que significa que múltiples variables pueden apuntar y modificar el mismo objeto.

Al internalizar esta diferencia y aplicar buenas prácticas como la clonación de objetos cuando sea necesario, escribirás un código más seguro, predecible y libre de los errores comunes que surgen de la mutabilidad y la manipulación de datos.