Stew On This es-419 Explainer

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:

  1. newRecipe es 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.

  1. 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);
  1. 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.

4 Likes

In the English version, there are better explanations (more complete) unlike this Spanish post.

1 Like

Hola, ¿De casualidad ya pudiste resolver este ejercicio (problema)?

1 Like

Hola Victor. Es más simple de lo que parece. Tenes que corregir los nombres de los ingredientes cambiándolo a ‘strings’, luego modificas la salida - de for…in, a for …of. luego agregas un consolé.log() que declare esto: consolé.log(element.name + element.kilos) probalo. Es simple


Acá te dejo la solución.[quote=“VictorRS, post:4, topic:42043, full:true”]
Hola, ¿De casualidad ya pudiste resolver este ejercicio (problema)?
[/quote]

4 Likes

Pasos

1-. Checa bien la sintaxis del arreglo NAME: están equivocadas y retificalas con ‘STRING’.

2-.checate bien el FOR… IN, cámbialo por FOR…OF con el mismo fragmento de código.

3-. Por último abajo de /* element.name + element.kilos; */ un
console.log(element.name + element.kilos) y listo.
“IMPRIME CORRECTAMENTE EN PANTALLA”

3 Likes

Continuing the discussion from Stew On This es-419 Explainer:

Creo que he resuelto el ejercicio, pero sin embargo el sistema no me lo reconoce como VALIDO.
Cambie, las variables por strings:
name: ‘beans’,
kilos: ‘4’,

name: ‘rabbits’,
kilos: ‘3’,

name: ‘mushrooms’,
kilos: ‘2’,

name: ‘potatoes’,
kilos: ‘4’,

Cambié el
For element in newRecipe por
For element of newRecipe

Agregué la linea:
Console.log(element.name + element.kilos)

Al ejecutar el código, me muestra la misma respuesta que la de la Solución.

Sin embargo, al finalizar en vez de aparecer el cartel de siempre, Felicitaciones … me muestra un mensaje de error, que me indica que me fije si la sintaxis es correcta. El punto es que no puedo continuar con el proximo ejercicio, porque no me da por aprobado este.

¿A alguien le ha pasado lo mismo?

Aguardo sus comentarios.

Grasshopper 20220813 Posible error en la solución 600

¿Dónde se puede ver la versión en inglés?