Follow the Map explainer

The aim of this puzzle: Complete the arrow function so that it takes an item and returns its price.

Walkthrough of the solution: The groceries variable is an array of objects. Each object has a .name and .price property. To get an array with just the names, .map() and an arrow function are used. .map() is similar to .forEach() except it creates a new array instead of changing the original array.

To get an array of just the price values, we want to .map() each item to its price. We can make an arrow function that does that. It will use item as an input parameter between its parentheses (). Then inside the curly brackets {}, it should return item.price.

That whole arrow function is the argument of the .map() method. The .map() will run each element of the groceries array through that function and then return a new array of all the results. That new array gets stored inside of the prices variable so we can log it to the console.

Sample code solution:
(Tap below to reveal)

import { groceries } from 'grasshopper.store';

let names = groceries.map((item) => {
  return item.name;
});
let prices = groceries.map((item) => {
  return item.price;
});

console.log('Names: ' + names);
console.log('Prices: ' + prices);

JavaScript Concepts: Code Block (arrow function), console.log(), .map()
Additional Code (hidden code that runs before the puzzle’s code):

let groceries = [
    {name: 'Grasshopper Gumdrops', price: 4},
    {name: 'Bug Juice', price: 8},
    {name: 'NaN-grain Bread', price: 15},
    {name: 'Bookworms', price: 16},
    {name: 'Nulled Cider', price: 23},
    {name: 'pop() Corn', price: 42}
];
1 Like

Hi,
When I went to add ITEM between the parentheses, it wasn’t coming up as an option (see screenshot). Only after getting an error was I allowed to manually type it in, rather than the usual button selection.

This is Roscoe McKinley I am.

Hi can someone give me a practical example of the difference between .map, .foreach and loops?
Especially this part sounds similar to a loop to me:

Thank you

1 Like

Hey there, great question!

You’ve definitely caught on that these methods are often used in place of loops. For example, take a look at the following 2 blocks of code:

let nums = [1, 2, 3, 4];
let doubledNums = [];
for (let num of nums) {
    doubledNums.push(num * 2);
}
let nums = [1, 2, 3, 4];
let doubledNums = nums.map(num => num * 2);

Both code blocks do the exact same thing, but using .map() means you can do it in 2 lines, without sacrificing readability (in fact, I’d argue that it looks even more readable than a for loop).

Hope this explains things! Let me know if you have any questions.
Ben

2 Likes

It’s more readable indeed!

And I guess .forEach makes it simpler when it comes to callback functions, because it avoids the for (let num of numbers) part.

Thanks!

Michele

How would you differentiate the => from having = in its place?

Hi, the code isn’t causing me any trouble but for some reason, the editor won’t let me enter the Item argument in the parenthesis when calling the groceries.map() function. When I try to add it it comes up with a red box telling me to “Tap again to edit it”. I’ve tried tapping again and again and it still won’t allow me to add it. I’m getting frustrated and can’t move on.

Good question. The bit of code you’re looking at is an arrow function, which is kind of a shortcut for writing functions. For example:

function double(num) {
    return num * 2
}
// can be rewritten as
let double = num => num * 2

If there’s just one parameter, you can leave out the parentheses, but if you have 2 or more, you’ll need them, like this:

let add = (num1, num2) => num1 + num2

Another unique thing is that if the arrow function is on one line, then return is automatically added:

let double = num => num * 2
// is the same as:
let double = num => {
    return num * 2;
}

This is called “implicit return”.

In this puzzle, num => num * 2 is the callback function for .map(). This means that each number in the array gets stored in the parameter num, and the function then returns num * 2.

Hope this clears things up. Let me know if you have questions.

1 Like

Thanks, I think that is clear enough for now. => is just a different, tidier, more powerful syntax for creating a function. But at the end of the day, you can still call it in the same way, e.g. double(3) or whatever.