Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript One Solution

M Khan
M Khan
7,024 Points

Can you pls explain the map parameter used in line 45?

here is the line.

const body = document.querySelector('body').innerHTML = planets.map(planet => createPlanet(planet)).join('');

2 Answers

Hi,

I've split the line in 2 to have it make more sense. But I still haven't figured this one out either.

const newarray = planets.map(planet => createPlanetHTML(planet)).join('');
const planetoutput = document.querySelector('body').innerHTML = newarray;
  1. .map is being used as a method on the planets array of objects planets[{planetobjarrayelement1},{planetobjarrayelement2}].

Basically it will run a called anonymous function with the argument planet. Within that anonymous function another function is called, which is createPlanetHTML(planet), and run it for every element of the planets array ( {planetobjarrayelement1},{planetobjarrayelement2}).

There is a fat arrow function used as an argument for the .map method call. It lets you replace the traditional function (argument) {...} syntax.

Traditional function

function (argument) {...} 

ES6 Syntax Fat Arrow function

(argument) => {...}

It uses a single argument. All it does is return a value hence there are no parentheses or swirly brackets.

Shortened version of fat arrow function with single argument and only returning a value

planet => createPlanetHTML(planet)

Basically browsers wil recognize that 'planet' is the argument for an anonymous function by looking at the '=>'. It would look like this in the traditional syntax.

function (planet) {
createPlanetHTML(planet);
}
  1. the .map method will keep track of the results of each successive anonymous function call and store those results in a newly returned array.

  2. The newly returned array is stored in the const newarray. The newly returned array contains one element that consists of all joined elements from the planets array of objects into a string. (it ends with a .join method >> planets.map().join();) Const planetoutput outputs the newarray element (which is a string) in the body of the index.html file.

I still don't really get what is going on in the fat arrow function and why there is an anonymous fat arrow function calling the other CreatePlanetHTML function.

Any insight is greatly appreciated.

p.s. I also noticed that there is a .join method called with argument (''). I noticed when i removed the '' it will become a ,. Why is this happening?

How would this look if we would use a for loop to iterate through the array and call the createPlanetHTML function for each array element?

So what's happening is:

const body = document.querySelector('body').innerHTML = planets.map(planet => createPlanet(planet)).join('');

The planets.map() call will take the planets array which contains two objects representing Mars and Saturn and call a function on each of them in turn. The function called on them is the argument passed to the map function: planet => createPlanet(planet). The values returned from each of the calls (the HTML string for the planet card) are stored into a new array which gets returned from map. The returned array is joined on an empty string forming one big HTML string representing the two planets. This string is applied to the body of the document through the querySelector and also assigned to the body constant.

Hi Daniel! This is one of the clearest explanations I have seen on this. Out of curiosity and because I am not sure if this is something that just is always this way or is just for this example, I see that inside the planets.map, 'planet' is the argument for the anonymous arrow function and the argument being passed into the function it is calling, createPlanet. Where did both planet arguments come from? It seems the name can be anything after changing it but both need to be the same. Hopefully my question made sense. Thanks for any help that you can provide!

Hi Matthew. The planets array has the map function (all arrays have a map function) which, when called executes the function argument (in this case createPlanet()) with each of the elements in the array. Our planets array has 2 elements (Mars and Saturn). We want to make two calls of the createPlanet() function, one with Mars and one with Saturn. To do that we must specify what to pass to the createPlanet() function. We specify a variable name for the element whose turn it is. As you suspected, it could be any name like p or element. In this case we chose planet. When calling the function createPlanet(), we have to pass that argument so we call createPlanet(planet). If we chose p as our variable name, we would call createPlanet(p). If for some reason we had to modify the element, we could do so before or during the function call. For example, if the array held elements "Mars" and "Saturn" but our createPlanet function needed the lowercase "mars" and "saturn", then we could do createPlanet(planet.toLowerCase()).