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

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?