CODEWITHSUNDEEP
javascriptes6-map
Ollie2619
Ollie2619

Reputation: 1295

JavaScript Passing in a function to map();

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

Upvotes: 2

Views: 2709

Answers (5)

Deepak Patidar
Deepak Patidar

Reputation: 394

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

Upvotes: -1

Quentin
Quentin

Reputation: 943568

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:

Upvotes: 1

James Long
James Long

Reputation: 4736

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

Upvotes: 3

nioKi
nioKi

Reputation: 1289

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.

Upvotes: 1

vahdet
vahdet

Reputation: 6729

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.

Upvotes: 1

Related Questions