Stew on This Explainer

Explanation:

The aim of this puzzle:
Using the tools you learned from the previous 3 lessons, you’ll now face some code full of various mistakes. You will find these bugs one by one and fix them resulting in

Walkthrough of the solution:

  1. newRecipe is an array of objects with ‘name’ and ‘kilos’ as their properties (on the left of the (:) in the object), and their values on the right side are the names and kilos of each ingredient. For example:
    name: beans,
    kilos: 4,

The value 4 for ‘kilos’ is fine, however, the value for ‘name’ is beans with no quotations. This makes the computer read beans as a variable and not a string. Add quotations to change its syntax to be a string and not a variable.

  1. The code is currently looping through the newRecipe array, but we can’t see what is actually happening. To achieve this, we can simply add a console.log inside of the for loop to log the output of the for loop to the console. For example:
    console.log(element.name + element.kilos);
  1. Now we can see that the for loop is iterating through the newRecipe array, but in the console all we are seeing is:
    NaN
    NaN
    NaN
    NaN

This confirms that the for loop is indeed looping over the 4 objects in the newRecipe array, but instead of seeing the ingredients’ names or kilos we just see an error. This is due to the fact that the function is using a for…in loop instead of a for…of loop. This is problematic because a for…in loop iterates over the properties of an object and newRecipe is an array.

Let’s take a moment and think about why we are seeing NaN. First of all, just as a refresher, NaN is a term in JavaScript and many other coding languages which means Not A Number. Thus far, we know that adding element.name to element.kilos is printing this result. Let’s simplify the code a bit for the sake of visualizing what’s happening and see what happens if we just console.log element:

    function printRecipe(recipe) {
           for(var element in recipe) {
               console.log(element);
    }
}

printRecipe(newRecipe);

When we do this we see printed to the console:

     0
     1
     2
     3

These are simply the indexes of the four items in the newRecipe array. Now let’s try console.logging the same code snippet from above, but now using dot notation with ‘name’:

    function printRecipe(recipe) {
           for(var element in recipe) {
               console.log(element.name);
    }
}

printRecipe(newRecipe);

What do we see in the console? There’s 4 lines being iterated through, but they’re all blanket, which means in the context of Grasshopper that they’re undefined. Why are they undefined? Think of it like this, console.logging element.name with a for…in loop would be like they equivalent of:

     0.name
     1.name
     2.name
     3.name

An index in itself does not have any property-value pair associated with it, so trying to get the ‘name’ property from an index is basically trying to get something that doesn’t exist, or something that is undefined. Now, let’s return to the starter code:

       function printRecipe(recipe) {
                for(var element in recipe) {
                       element.name + element.kilos;
    }
}

printRecipe(newRecipe);

Now we know that if we are to console.log element.name + element.kilos; this is exactly that same as trying to console.log undefined + undefined. You may be thinking, why does this result in NaN and not just undefined? The reason why is due to the addition operator. Remember in JavaScript we can use the addition operator to concatenate(combine) strings with other strings, strings with numbers, and also just normal mathematical applications. The main takeaway here is that when using this format for math operations and trying to combine one or more things that are undefined, this will always result in NaN.

6 Likes

Can someone please help me with this “Stew on This”

2 Likes

Screenshot_20210706-000125_Grasshopper

This is the part 2 of the answer

Screenshot_20210706-000118_Grasshopper
This is part 1 of the answer

1 Like

This is not working for me-please help me with it.

3 Likes

Definitely something wrong with this one.

1 Like

Para mim também.


i cant


Incase anyone still interested thats the stew right there 100%

1 Like

Screenshot_20210814-175059_Grasshopper

use for…of loop in the place of for in

this works


Please help me!!!

What is bad on my code?
Thanks,

@JonySVK :slovakia:

they need to be strings just like this:
‘beans’
‘rabbits’
‘mushrooms’
‘potatoes’
the rest i think is correct

1 Like

help me please this is my code and its not working-



Thanks, @Spinestdog816!!! Thanks for your help!!! :+1::+1::+1:

@JonySVK :slovakia:

@idiot :
Ingredients must be like a string … Such as: ‘beans’, ‘rabbits’, …
And also change For … in loop to For … of loop …

@JonySVK :slovakia: