En el fascinante mundo de la programación, es esencial comprender cómo JavaScript maneja los datos. Dos de los conceptos clave son las referencias y valores primitivos en JS, que pueden parecer similares a primera vista, pero tienen diferencias fundamentales. En este artículo, exploraremos a fondo qué son y su impacto en el desarrollo web.

¿Qué encontrarás en este post?

¿Qué son las referencias y valores primitivos en JS?

Las referencias y valores primitivos en JS son dos tipos de datos que juegan un papel vital en la manipulación y almacenamiento de información.

Valores primitivos

Los valores primitivos son datos simples y directos que representan una sola entidad. Estos tipos de datos incluyen números (number), cadenas de texto (string), booleanos (boolean), null y undefined. Veamos algunos ejemplos:

let numero = 42; // número es un valor primitivo 
let nombre = "John"; // nombre es una cadena de texto (valor primitivo) 
let esVerdadero = true; // esVerdadero es un booleano (valor primitivo)

Referencias

Por otro lado, las referencias se utilizan para almacenar valores complejos, como objetos y estructuras de datos. Cuando creamos una variable y le asignamos un objeto, en realidad estamos almacenando una referencia a ese objeto en lugar de los datos reales del objeto en sí. Veamos un ejemplo:

const objetoA = { nombre: "Alice", edad: 30 }; 
const objetoB = objetoA; // objetoB ahora hace referencia al mismo objeto que objetoA

Diferencias referencias y valores primitivos en JS en la práctica

Una de las diferencias más notables entre referencias y valores primitivos en JS es cómo se manejan en JavaScript. Para comprenderlo mejor, exploremos algunas de estas diferencias en detalle:

Operador typeof

El operador typeof es una herramienta útil para determinar el tipo de dato de una variable en JavaScript. Sin embargo, cuando se trata de referencias y valores primitivos, su comportamiento puede ser sorprendente.

Cuando se aplica el operador typeof a un valor primitivo, devuelve el tipo de dato correspondiente. Por ejemplo: typeof 42; // “number” typeof “John”; // “string”
Pero cuando se aplica a una referencia a un objeto, devuelve “object” en lugar del tipo específico del objeto. Esto puede ser confuso: typeof objetoA; // “object”

Comparación de igualdad

Otra diferencia clave entre las referencias y valores primitivos en JS es cómo se compara la igualdad.

Para valores primitivos, puedes utilizar el operador de igualdad (==) o el operador de igualdad estricta (===) para compararlos. El operador de igualdad estricta compara tanto el valor como el tipo de dato. Por ejemplo: 5 == “5”; // true 5 === “5”; // false
Sin embargo, cuando se trata de referencias, la comparación de igualdad verifica si ambas referencias apuntan al mismo objeto en la memoria, no si los objetos tienen los mismos valores. Veamos un ejemplo: const objetoA = { nombre: “Alice” }; const objetoB = { nombre: “Alice” }; objetoA === objetoB; // false, ya que son dos objetos diferentes en la memoria

Cambios en el mismo objeto

Cuando trabajamos con referencias, es importante comprender que si modificamos un objeto a través de una referencia, ese cambio se reflejará en todas las referencias que apunten al mismo objeto. Veamos un ejemplo:

const objetoA = { nombre: "Alice" }; 
const objetoB = objetoA; // 
objetoB ahora apunta al mismo objeto que objetoA objetoB.nombre = "Bob"; console.log(objetoA.nombre); // "Bob", ya que ambos hacen referencia al mismo objeto

Objetos regulares vs. valores primitivos

Para ilustrar aún más las diferencias entre referencias y valores primitivos en JS, consideremos la siguiente situación:

let numero = 42; 
let numero2 = numero; // número2 contiene una copia del valor de numero 
numero2 = 10; // Cambiamos numero2, pero numero permanece intacto console.log(numero); // 42 
console.log(numero2); // 10

En este caso, al cambiar numero2, numero no se ve afectado porque los valores primitivos se copian por valor y no por referencia.

Ahora, veamos un ejemplo similar con objetos:

const objetoA = { nombre: "Alice" }; 
const objetoB = objetoA; // 
objetoB ahora hace referencia al mismo objeto que objetoA objetoB.nombre = "Bob"; // Cambiamos el nombre en objetoB, pero afecta a objetoA 
console.log(objetoA.nombre); // "Bob", ya que ambos hacen referencia al mismo objeto console.log(objetoB.nombre); // "Bob"

En este caso, al cambiar objetoB, también afecta a objetoA porque ambas referencias apuntan al mismo objeto en la memoria.

Hasta ahora, hemos explorado las diferencias fundamentales entre referencias y valores primitivos en JS. Comprender estas diferencias es esencial para evitar comportamientos inesperados en su código.

En el mundo del desarrollo web y la programación en general, comprender las diferencias entre referencias y valores primitivos en JS es esencial para escribir un código robusto y evitar errores sutiles. Si estás interesado en profundizar en JavaScript considera unirte al Desarrollo Web Full Stack Bootcamp de KeepCoding. Este bootcamp te proporcionará las habilidades y conocimientos necesarios para convertirte en un desarrollador web completo. ¡Solicita información ahora y cambia tu futuro!