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.