In and Out explainer

Puzzle Explainer
#1

The aim of this puzzle: Complete the price function so that it returns the .price property of the item.

Walkthrough of the solution: An arrow function can work like a normal function, with input parameters and a return value. Inside the parentheses (), you add the names of the parameters that the function will use. The priceOf function should take an item and then return its price, so it has 1 parameter which we can call item.

To make the function output the price, we need to add the return keyword between the curly brackets {}. The value that should be returned is the .price property of the item. That looks like return item.price

Sample code solution:
(Tap below to reveal)

import { groceries } from 'grasshopper.store';

let nameOf = (item) => {
  return item.name;
};
let priceOf = (item) => {
  return item.price;
};

console.log(nameOf(groceries[0]));
console.log(priceOf(groceries[0]));

JavaScript Concepts: Array Indexing, Code Block (arrow function), console.log()

Summary

This text will be hidden

2 Likes
#4

In the function declaration -> priceOf , my initial thoughts was to enter code : console.log(item.price) instead of the return function. Would that be a possible solution? If not , what’s the difference between console.log & return?

1 Like
#6

Hi there, happy to help!

console.log() prints the value of its argument (whatever is inside the parentheses) to the console so that humans can see it. It does not store information to the computer, it simply displays it.

return, on the other hand, tells the computer to associate an output with a function call. It doesn’t display information to the computer, it stores it - kind of like a variable.

This is a bit of an abstract concept - but what helps me is to think of console.log() as a way to display information whereas return is a way to store it.

Hope this helps and happy to clarify if you have further questions.

– Natalie

3 Likes
#7

Thanks for trying to answer but I’m not sure if the explanation is clear enough.
How come console.log can’t look at an array value like item.price and just display that?

#8

Hey there,

I’m just learning here myself alongside with you. But let me take a shot at answering your question in a different way. Because I think I understand where the confusion is coming in here.

Referencing this line of code:

let priceOf = (item) => {
  return item.price;
};

Lets say instead of using return item.price we used instead replaced it with console.log(item.price). So now our function declaration looks like this:

let priceOf = (item) => {
  console.log(item.price);
};

Now whenever we call the priceOf function, all the function will ever do is print to the console the price of the requested item. And in the context of this lesson, that’s exactly what we want it to do!

So then farther down when we call the function, instead of having to write this line asking it to print the result of the function to the console:

console.log(priceOf(groceries[0]));

We could instead just call the function by typing:

priceOf(groceries[0]);

And it would automatically know that we want it to print the price of the item to the console, effectively having the same result. Hurray!

However, let us go ahead and consider an alternate scenario.

What if instead of just printing the price of the item to the console we wanted use the price value for a different purpose? For example, adding two prices together to find their total cost. For this next example lets use this groceries array:

let groceries = [
    {name: 'Grasshopper Gumdrops', price: 4},
    {name: 'Bug Juice', price: 8}
];

Now if we call this function we just created above:

let priceOf = (item) => {
  console.log(item.price);
};

All the function was told to do is to print the price of the item to the console.
So if we tried adding the price of the 2 grocery items in the above array like this:

priceOf(groceries[0]) + priceOf(groceries[1];

All that would happen is it would print to the console:

4
8

Because when called, those functions are told to print the items price.

Now lets go back and edit our function declaration back to the original example so that it looks like this:

let priceOf = (item) => {
  return item.price;
};

Now when we call on this function, instead of the function being told to just go ahead and print the item price, we are asking it to return the price of the item instead. So now lets try using this new function in our addition problem.

priceOf(groceries[0]) + priceOf(groceries[1]);

Since we told it to return the price value (instead of print it), what effectively happens is this:

4 + 8;

Now it’s adding together the prices, but we haven’t told the program what to do with it.
What we could do is assign a variable to hold the sum:

let sum = priceOf(groceries[0]) + priceOf(groceries[1]);

Now the variable sum contains the number 12 (the sum of 4 + 8)
Now all we have to do if we want print the sum to the console is type:

console.log(sum);

And in the console window it will now print our sum: 12

The alternative to assigning the prices to a variable though is to simply type:

console.log(priceOf(groceries[0]) + priceOf(groceries[1]));

And once again in the console window the sum will appear: 12

Hopefully that helps and I didnt over explain it too much!

Best of Luck!

@Grasshopper_Ben @Grasshopper_Natalie Feel free to correct,edit, or clarify anything if I’m a bit off anywhere!

1 Like
#9

Well explained!!

I came here randomly to check comments, as puzzle was easy.

#10

Hey, @Grasshopper_Ben. What is the additional code? Please explain it.

#11

Hey there, the additional code is just an array of objects, which we import as 'groceries'. It looks kinda like this:

let groceries = [
    {name: 'Grasshopper Gumdrops', price: 4},
    {name: 'Bug Juice', price: 8}
];
#12

what is the different betwen arrow function and regular function

2 Likes