Understanding code snippet

In this example code from W3Schools, i don’t see where getFullName() is being called along with it’s (item,index) arguments. Am i missing something?

var persons = [
    {firstname : "Malcom", lastname: "Reynolds"},
    {firstname : "Kaylee", lastname: "Frye"},
    {firstname : "Jayne", lastname: "Cobb"}
];


function getFullName(item,index) {
    var fullname = [item.firstname,item.lastname].join(" ");
    return fullname;
}

function myFunction() {
    document.getElementById("demo").innerHTML = persons.map(getFullName);
}

.map() method takes in a function as an argument, and only the name of it. The method assigns the arguments to getFullName() function by itself. So basically it applies the input function on each element in the associated array.

In this example, the .map() method would work like this:

return getFullName(persons[0])
return getFullName(persons[1])
return getFullName(persons[2])

the index argument is irrelevant

.map() is a really cool method but hard to understand at first. It’s used in a lot of web frameworks such as React and in Data Science, e.g Google MapReduce.

@hjh17 So, bascially what you are saying is defining the getFullName function as getFullName(item) is just as legitimate? What does the item parameter equate to?

The map method of the array prototype is a transformer, it looks into each element of an array and after processing each item, returns a new array with the elements transformed by a function that you define.

In this example, each item of the array is an object, and semantically speaking, a person.

The function that you pass to the map method takes 3 parameters (2 of them are optional):

1- The item that’s being currently processed (absolutely necessary)
2- The index (numerical position starting from 0) of said item
3- The array that is being iterated (most of the time you don’t need this)

You can pass it with a name after having declared it elsewhere or as an anonymous or named function inside the map parameters, IE:

arr.map(function(item, idx, arr) {
  // ...
}); // Valid

arr.map(function myFunction(item, idx, arr) {
  // ...
}); // Also valid and preferred for debuggin purposes

function myFunction(item, idx, arr) {
  // ...
} // We declared the function outside

arr.map(myFunction); // Valid as well

Think of the function (or callback) as the modifier or processor, think of it as a machine that inputs something and outputs something different after processing the input. For example if you have an array of numbers and you want a new array of said numbers but squared, then you write a function that accepts each number and multiplies them by themselves like:

numbers.map(function(number) { return number * number; });

Now back to this example, each item is an object, inside the function you assemble a string that consists of the firstname and lastname properties of such object, then returns it. After that you insert it into an HTML element to see how it looks like.

2 Likes

@mickey005 yes exactly ! The item parameter is just some object which you put in as an argument. In this example you only deal with the persons object. You could have another object e.g. var actors = { firstname: "Tom", lastname: "Cruise", ... } and apply the same function on that object as well. item parameter gets replaced by the variables name.

I don’t know why they put the second parameter there, index. It’s never used.

1 Like