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:
💡 Pista: recuerda que los objetos, incluidos los arrays, se pasan por referencia, mientras que los strings, números y booleanos se pasan por valor.
¿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, "🧃"]
La respuesta correcta es la Opción A: [{ animal: "🐖" }, { place: "🏔️" }, 5, "🧃"].
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, "🧃".
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 💚
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 !
el famoso spread operator …
Que bueno estuvo el live!!!
Estas preguntas aunque sean sencillas, en una entrevista te ponen a dudar de tu existencia 🤔🥵
Increíble forma de explicar este tema
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! 😃
Esta muy bueno el ejercicio, pero, porque usas
var?Quizá para que los más nuevos entendieran que se trata de una variable. Aunque pudo usar
let.Me encantó el ejercicio!! Gracias profe Teff.
Genial! 😁
¡Me gustó muchísimo!
Es muy bueno saber y entender a fondo cada pregunta y respuesta.
Excelente explicación ❤️
Esta es una clásica pregunta de entreviste o el tema en general. Es bueno recordarlo siempre 💡
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 😄