Quiz de JavaScript: paso por valor y paso por referencia

Curso de JavaScript Engine (V8) y el Navegador

Toma las primeras clases gratis

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

Pregunta del quíz

¿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

Y la respuesta correcta es...
Opción A

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, "🧃".

Recursos para aprender más sobre la memoria en JavaScript

A continuación te comparto algunas clases, videos y cursos donde puedes profundizar mucho más en el funcionamiento de la memoria de JavaScript:

¡Cuéntanos en los comentarios cómo te fue en este quiz y nos vemos en el próximo!

#NuncaParesDeAprender 💚

Curso de JavaScript Engine (V8) y el Navegador

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

0 Comentarios

para escribir tu comentario

Artículos relacionados