JavaScript
Compara primitivos y objetos para explicar copias, identidad, referencias compartidas, mutación y paso de argumentos en JavaScript.
Los primitivos y los objetos no solo guardan información diferente: también se copian, comparan y modifican de maneras distintas.
Cuando trabajas con un valor primitivo, la variable contiene ese valor simple.
Cuando trabajas con un objeto, la variable mantiene una referencia que permite encontrar ese objeto en memoria.
Una referencia puede imaginarse como la dirección de una casa: no es la casa, pero indica dónde encontrarla.
Los primitivos son:
stringnumberbigintbooleanundefinednullsymbolCuando copias un primitivo, obtienes otro valor independiente.
let puntuacionOriginal = 10;
let puntuacionCopia = puntuacionOriginal;
puntuacionCopia = 20;
console.log(puntuacionOriginal); // 10
console.log(puntuacionCopia); // 20Cambiar la copia no afecta al original.
Los objetos incluyen estructuras como:
const usuarioOriginal = {
nombre: "Nicolás",
};
const usuarioCopia = usuarioOriginal;En este caso no se creó un segundo objeto. Ambas variables apuntan al mismo objeto.
usuarioCopia.nombre = "Nico";
console.log(usuarioOriginal.nombre); // "Nico"El cambio puede verse desde ambas variables porque existe un único objeto compartido.
usuarioOriginal ──┐
├──> { nombre: "Nicolás" }
usuarioCopia ─────┘Las variables son diferentes, pero la referencia conduce al mismo lugar.
Esta asignación solo copia la referencia:
const configuracion = {
tema: "oscuro",
};
const otraConfiguracion = configuracion;Para crear un objeto exterior nuevo, podemos usar spread:
const otraConfiguracion = {
...configuracion,
};Ahora son objetos diferentes:
console.log(configuracion === otraConfiguracion); // falseSin embargo, spread solo realiza una copia superficial.
const usuario = {
nombre: "Ana",
preferencias: {
tema: "oscuro",
},
};
const copia = {
...usuario,
};
copia.preferencias.tema = "claro";
console.log(usuario.preferencias.tema); // "claro"El objeto exterior es nuevo, pero preferencias continúa compartiendo la misma referencia.
Los primitivos se comparan por su valor.
console.log(10 === 10); // true
console.log("hola" === "hola"); // trueLos objetos se comparan por identidad: deben ser exactamente el mismo objeto.
const primero = { nombre: "Ana" };
const segundo = { nombre: "Ana" };
console.log(primero === segundo); // falseAunque contienen la misma información, fueron creados por separado.
const tercero = primero;
console.log(primero === tercero); // trueAquí ambas variables apuntan al mismo objeto.
Los primitivos son inmutables. No puedes cambiar una parte interna del valor.
let saludo = "Hola";
saludo[0] = "B";
console.log(saludo); // "Hola"Para obtener "Bola", necesitas crear un texto nuevo.
Los objetos sí pueden modificarse internamente.
const producto = {
nombre: "Teclado",
stock: 5,
};
producto.stock = 4;JavaScript siempre pasa argumentos por valor.
La diferencia es que, cuando el argumento es un objeto, el valor copiado es una referencia.
function cambiarNombre(usuario) {
usuario.nombre = "Laura";
}
const perfil = { nombre: "Ana" };
cambiarNombre(perfil);
console.log(perfil.nombre); // "Laura"La función recibió una copia de la referencia, y esa referencia seguía apuntando al mismo objeto.
Pero reasignar el parámetro no reemplaza la variable exterior:
function reemplazarUsuario(usuario) {
usuario = { nombre: "Carlos" };
}
const perfil = { nombre: "Ana" };
reemplazarUsuario(perfil);
console.log(perfil.nombre); // "Ana"La función cambió su copia local de la referencia.
React suele detectar cambios comparando referencias.
Esto conserva la misma referencia:
usuario.nombre = "Nico";
setUsuario(usuario);Esto crea una referencia nueva:
setUsuario({
...usuario,
nombre: "Nico",
});Por eso las actualizaciones inmutables son tan importantes en el estado de React.
const usuario = { nombre: "Ana" };
usuario.nombre = "Laura"; // válidoconst protege la variable frente a una reasignación, no el contenido del objeto.
const copia = original;Solo copia la referencia.
{} === {} // falseCada literal crea un objeto distinto.
Spread crea una copia superficial. Los objetos anidados pueden seguir compartidos.
let a = 5;
let b = a;
b = 8;
console.log(a);const a = { activo: false };
const b = a;
b.activo = true;
console.log(a.activo);[] === [] // falselet a = 5;
let b = a;
b = 8;
console.log(a);5. b recibió una copia independiente del número.const a = { activo: false };
const b = a;
b.activo = true;
console.log(a.activo);true. Ambas variables apuntan al mismo objeto.[] === [] // false[] crea un array distinto con una referencia diferente.null y undefined explica las dos formas principales de representar ausencia de valor en JavaScript.