How does the map function work?

Question

I’m studying Javascript, learning the functions map(), filter() and reduce(), and found a article in medium, the problem is that I can not understand why this part of the code return undefined. I’ve even tried to put the full code on pythontutor and still nothing to understand.

const students = [
    { name: 'Anna', grade: 6 },
    { name: 'John', grade: 4 },
    { name: 'Maria', grade: 9 }
];

var byName = function(object) {
    return object.name
};
console.log(byName(students));

I expected this :

// Aqui retornaria a quantidade de name's dentro de students.
var byName = function(object) {
  return object.name; 
};

// Aqui retornaria o valor dentro de cada name ("Anna", "John" e "Maria")
var byNames = function(list) {
  return list.map(byName);
};

Answer 1

Map

The function map maps the elements of an array to a new array with the result of a function applied to each element.

Taking the example of the documentation, we can consider an array of numbers and use the map to double each of them as follows:

var numeros = [1, 5, 10, 15];
var dobros = numeros.map(function(x) {
   return x * 2;
}); 

console.log(dobros); //2, 10, 20, 30

We see that the function is called for each element of the array numeros, thus building a new element for the array dobros. This element is always the parameter of the function used, which in the above example is called x, although it may have any other name.

Problem in your code

The problem is that the function byName expects to receive an object that has the property name and that in your example has not, because you passed students which is the whole array:

console.log(byName(students));

To pass a specific student could do so:

console.log(byName(students[0]));

Who would be getting the name of the first student.

Example:

const students = [
    { name: 'Anna', grade: 6 },
    { name: 'John', grade: 4 },
    { name: 'Maria', grade: 9 }
];

var byName = function(object) {
    return object.name
};
console.log(byName(students[0]));

However the objective of this exercise was not even this, as it is mentioned in the article you mentioned, but rather to map the list of students to a list of names through the function map and byName with:

students.map(byName);

That maps from the original array of students, which is an array of objects, to a new one with only the names, using the function byName returns only the name of each element.

Example:

const students = [
    { name: 'Anna', grade: 6 },
    { name: 'John', grade: 4 },
    { name: 'Maria', grade: 9 }
];

var byName = function(object) {
    return object.name
};

console.log(students.map(byName));

Could even create a second function for this mapping of the whole list:

var byNames = function(list) {
    return list.map(byName);
};

And then use it properly:

byNames(students); // ["Anna", "John", "Maria"]

Map with Arrow functions

Another even more simplified way using Arrow Functions of ES6 would be:

students.map(x => x.name);

Which would make it not even necessary to have the function byName

Applying Arrow functions to the initial example of the folds would look like this:

var numeros = [1, 5, 10, 15];
var dobros = numeros.map(x => x * 2); 
console.log(dobros); //2, 10, 20, 30

Example working with the students:

const students = [
    { name: 'Anna', grade: 6 },
    { name: 'John', grade: 4 },
    { name: 'Maria', grade: 9 }
];

//byName agora com arrow function
console.log(students.map(x => x.name));