JavaScript Passing in a function to map();

Question

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();

This is how `.map` function works: it invokes a specified callback for each element of an array, passing this element into that callback as a parameter. — raina77ow, Jun 15 '18 at 09:20
article is the content of each item in the array, articles ... the callback "signature" is `function(item, index, array)` ... of course, in the callback function you can call those arguments what you like, in this case `article` and you don't have to use the 2nd and 3rd, which is the case — Jaromanda X, Jun 15 '18 at 09:20
I don't get it ... you understand how map works ... but you don't actually understand how map works, because you don't know how the callback function is called - [documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Syntax) may help — Jaromanda X, Jun 15 '18 at 09:21
@Ollie Basically map is passing an object of articles to createArticle method that readout the news and join will concatenating the new with new line I have added a simple example below it will help to understand. — Deepak Patidar, Jun 15 '18 at 09:24

score 2 · Accepted Answer · answered Jun 15 '18 at 09:22

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

Thank you, this was very helpful – Ollie2619 Jun 15 '18 at 09:28 — Ollie2619, Jun 15 '18 at 09:28

score 0 · Answer 2 · answered Jun 15 '18 at 09:22

0

From the MDN docs:

map calls a provided callback function 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.

answered Jun 15 '18 at 09:22

vahdet

6,357
9
51
106

score 0 · Answer 3 · answered Jun 15 '18 at 09:22

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.

score 0 · Answer 4 · answered Jun 15 '18 at 09:23

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:

MDN
Ecma

score -1 · Answer 5 · answered Jun 15 '18 at 09:27

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);
}

JavaScript Passing in a function to map();

5 Answers5