Quiz de JavaScript: paso por valor y paso por referencia

Curso de JavaScript Engine (V8) y el Navegador

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

Este quiz pone a prueba tus conocimientos sobre el paso por valor y paso por referencia en JavaScript. El objetivo es que leas el código de la pregunta, analices las 3 opciones de respuesta y, finalmente, elijas cuál es la opción correcta.

A continuación encontrarás:

Una imagen con la pregunta inicial del quíz y 3 opciones de respuesta.
El código JavaScript correspondiente a la pregunta y a las opciones de respuesta.
La respuesta correcta con su explicación.
Algunos recursos para reforzar este concepto.

💡 Pista: recuerda que los objetos, incluidos los arrays, se pasan por referencia, mientras que los strings, números y booleanos se pasan por valor.

Encuentra el resultado correcto en JavaScript

¿Cuál es la salida del siguiente código?

var randomThings = [{ animal: "🐓" },  { place: "🏔️" }, 5, "🧃"]
var newRandomThings = randomThings
newRandomThings[0].animal = "🐖"
console.log(randomThings)

Opción A:

[{ animal: "🐖" },  { place: "🏔️" }, 5, "🧃"]

Opción B:

[{ animal: "🐓🐖" },  { place: "🏔️" }, 5, "🧃"]

Opción C:

[{ animal: "🐓" },  { place: "🏔️" }, 5, "🧃"]

Respuesta correcta

La respuesta correcta es la Opción A: [{ animal: "🐖" }, { place: "🏔️" }, 5, "🧃"].

¿Cómo funciona la memoria en JavaScript?

Debemos tener en cuenta que Javascript tiene 3 tipos de datos que se pasan por referencia: los arrays, las funciones y los objetos. Todos estos son técnicamente Objetos, por lo que nos referiremos a ellos colectivamente como Objetos.

A las variables a las que se les asigna uno de estos 3 tipos de datos se les asigna una referencia a ese valor. Esa referencia apunta a la ubicación del objeto en la memoria. Es decir, las variables en realidad no contienen el valor, sino la referencia al lugar memoria donde en realidad se encuentra su valor.

Teniendo en cuenta esta definición, lo que tenemos en memoria de la variable randomThings del código de este quiz es lo siguiente:

Variable	Valor	Dirección	Objeto
randomThings	<#001>	001	`[{ animal: "🐖" }, { place: "🏔️" }, 5, "🧃"]`

Si revisamos de nuevo el código, vamos a notar que newRandomThings es igual a randomThings en la línea número 2:

var randomThings = [{ animal: "🐓" },  { place: "🏔️" }, 5, "🧃"]
var newRandomThings = randomThings // Esta línea
newRandomThings[0].animal = "🐖"
console.log(randomThings)

Eso en la memoria sería equivalente a lo siguiente:

Variable	Valor	Dirección	Objeto
randomThings	<#001>	001	[{ animal: “🐓” }, { place: “🏔️” }, 5, “🧃”]
newRandomThings	<#001>

Es decir, el valor de newRandomThings está apuntando a la misma dirección en memoria de randomThings (es decir, la misma referencia, de aquí el nombre de paso por referencia).

Por lo que, al modificar randomThings o newRandomThings, ¡estamos modificando el mismo objeto!

Al hacer newRandomThings[0].animal = "🐖" estamos cambiando la gallinita por el cerdito en el objeto [{ animal: "🐓" }, { place: "🏔️" }, 5, "🧃". Y, por esta razón, la salida del código es [{ animal: "🐖" }, { place: "🏔️" }, 5, "🧃".