39

Quiz de JavaScript: paso por valor y paso por referencia

17186Puntos

hace un año

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:

VariableValorDirecciónObjeto
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:

VariableValorDirecciónObjeto
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 💚

Estefany
Estefany
teffcode

17186Puntos

hace un año

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
6
11492Puntos

Una manera de copiar esa misma array pero que al modificar la copia no modifica la array seria de la siguiente manera:

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

my_copy_list = [...my_list]

y asi tendran ambos los mismo elementos pero para js son objetos totalmente distintos ^^

PD: si me equivoque en algo sientete libre de corregir !

1
10790Puntos

Que bueno estuvo el live!!!
Estas preguntas aunque sean sencillas, en una entrevista te ponen a dudar de tu existencia 🤔🥵

1
7754Puntos

Increíble forma de explicar este tema

1
33399Puntos

El post se podría resumir diciendo que el = crea un puntero (con un nuevo nombre) que apunta a la misma dirección de la variable, por lo que si se modifica este puntero, se afecta a la variable original.
Pero es genial que se detalle con animalitos, es muy didáctico.
¡Saludos! 😃

1
80757Puntos

Esta muy bueno el ejercicio, pero, porque usas var?

1
33399Puntos
un año

Quizá para que los más nuevos entendieran que se trata de una variable. Aunque pudo usar let.

1
19170Puntos

¡Me gustó muchísimo!

Es muy bueno saber y entender a fondo cada pregunta y respuesta.

Excelente explicación ❤️

1
25271Puntos

Esta es una clásica pregunta de entreviste o el tema en general. Es bueno recordarlo siempre 💡

1
27459Puntos

Hola la verdad no conocía muy bien del tema y aun así me anime a responder el quiz siguiendo mi lógica le atine a la respuesta a 😅
me encanto este contenido, pude entenderlo mucho mejor con la explicación y recursos 😄