Explicación de Cocina así
Objetivo de este acertijo:
Usar las herramientas que has aprendido en las 3 lecciones anteriores; ahora verás algunos códigos llenos de diversas equivocaciones. Encontrarás estos errores uno a uno y los corregirás para imprimir cada ingrediente con su peso.
Tutorial de la solución:
-
newRecipees un arreglo de objects con ‘name’ y ‘kilos’ como sus propiedades (a la izquierda de (:) en el object), y sus valores en el lado derecho son los nombres y kilos de cada ingrediente. Por ejemplo:
name: beans,
kilos: 4,
El valor 4 para ‘kilos’ está bien; sin embargo, el valor para ‘name’ es beans, sin comillas. Esto causa que la computadora lea beans como una variable y no como un string. Agrega comillas para cambiar su sintaxis para que sea un string y no una variable.
- Actualmente, el código está ciclando por el arreglo
newRecipe, pero no podemos ver lo que sucede realmente. Para verlo, nada más hay que agregar un console.log dentro del for loop para imprimir la salida del for loop en la consola. Por ejemplo:
console.log(element.name + element.kilos);
- Ahora podemos ver que el ciclo está iterando por el arreglo
newRecipe, pero en la consola lo único que vemos es:
NaN
NaN
NaN
NaN
Esto confirma que el for loop en realidad está ciclando por los 4 objects en el arreglo newRecipe, pero en vez de ver los names o kilos de los ingredientes, solo vemos un error. Esto ocurre porque la función usa un for…in loop en vez de un for…of loop. Es un problema porque el for…in loop itera por las propiedades de un object y newRecipe no es object, sino un arreglo.
Tomemos un momento para pensar por qué estamos viendo NaN. Primero, solo para repasar, NaN es un tema en JavaScript y muchos otros lenguajes de qué significa “Not a Number” (no es un número). Hasta ahora, sabemos que agregar element.name a element.kilos está imprimiendo este resultado. Simplifiquemos un poco el código para poder visualizar lo que está sucediendo y ver qué sucede si solo registramos el elemento en la consola (console.log):
function printRecipe(recipe) {
for(var element in recipe) {
console.log(element);
}
}
printRecipe(newRecipe);
Cuando hacemos esto, vemos impreso en la consola:
0
1
2
3
Estos son simplemente los índices de los cuatro elementos en el arreglo newRecipe. Ahora intentemos registrar en la consola el mismo fragmento de código de arriba, pero ahora usaremos la notación por punto con ‘name’:
function printRecipe(recipe) {
for(var element in recipe) {
console.log(element.name);
}
}
printRecipe(newRecipe);
¿Qué vemos en la consola? Se está iterando por 4 líneas, pero todas son blanket, lo que en el contexto de Grasshopper significa que no están definidas. ¿Por qué no están definidas? Es tan fácil como esto: la salida en la consola de element.name con un for…in loop sería como si fueran equivalentes a:
0.name
1.name
2.name
3.name
Un índice por sí mismo no está asociado con ningún par propiedad-valor, así que intentar obtener la propiedad ‘name’ desde un índice es básicamente intentar obtener algo que no existe, o algo que no está definido. Ahora, regresemos al código de inicio:
function printRecipe(recipe) {
for(var element in recipe) {
element.name + element.kilos;
}
}
printRecipe(newRecipe);
Sabemos que si imprimimos en la consola element.name + element.kilos;, es igual a intentar imprimir en la consola undefined + undefined. Tal ve te preguntes, ¿por qué esto tiene imprime NaN y no simplemente undefined? Esto se debe al operador de suma. Recuerda que en JavaScript podemos usar el operador de suma para concatenar (sumar) strings con otros strings, strings con números y también aplicaciones matemáticas normales. Aquí podemos concluir principalmente que cuando usamos este formato para operaciones matemáticas e intentamos sumar una o más cosas que no están definidas, siempre tendremos la salida NaN.
