Can someone please explain how the below code working?
...
articles.map(createArticle).join("\n");
function createArticle(article){
return `
<div class="article">
<h1>${article.news}</h1>
</div>
`
}
I understand how map(); works, I just don't understand where it gets article from as its not being passed as an argument to the createArticle function within map();
The createArticle function is actually being passed 3 arguments: the item in the array, the index of the item and the array.
articles.map(function createArticle(article, i, arr) {
return `
<div class="article">
<h1>${article.news}</h1>
</div>
`
});
Your code is just changing the createArticle function from an anonymous function into a named one.
articles.map(createArticle);
function createArticle(article, i, arr) {
return `
<div class="article">
<h1>${article.news}</h1>
</div>
`
}
Since parameters don't need to be declared in JavaScript, your code doesn't include the i or arr parameters.
articles.map(createArticle);
function createArticle(article) {
return `
<div class="article">
<h1>${article.news}</h1>
</div>
`
}
You can see a full explaination and a polyfill (unnecessary these days, but can be helpful when trying to understand a function) on MDN
From the MDN docs:
mapcalls a providedcallbackfunction once for each element in an array, in order, and constructs a new array from the results.
So, the argument refers to the each and every element; during the iteration.
createArticle is the callback called on each element of the articles array.
As explained in the doc, "callback is invoked with three arguments: the value of the element, the index of the element, and the Array object being traversed."
So here, article is the value of the current element being iterated on.
The function createArticle is passed as an argument to map.
The code for map (which you didn't write, is built into the JavaScript engine, and is not visible in the code you copy/pasted as a consequence of that) calls createArticle (which it has access to because you passed it as an argument). Since that code is calling it (once for each element in the array), it can pass createArticle whatever arguments it likes.
The arguments it passes are documented wherever map is documented, including:
var persons = [
{firstname : "Deepak", lastname: "Patidar"},
{firstname : "Anjular", lastname: "5"},
{firstname : "Java", lastname: "script"}
];
function getFullName(item,index) {
var fullname = [item.firstname,item.lastname].join(" ");
return fullname;
}
function myFunction() {
document.getElementById("demo").innerHTML = persons.map(getFullName);
}
.mapfunction works: it invokes a specified callback for each element of an array, passing this element into that callback as a parameter.function(item, index, array)... of course, in the callback function you can call those arguments what you like, in this casearticleand you don't have to use the 2nd and 3rd, which is the case