How to Map() a subarray or nested array

hello everyone again,

I am really confused on how to use a subarray of numbers or strings. Practicing, I don’t have any problems using map() method because in my understanding replaces or is a simpler form of a for loop.

Look at for example the following array:

var scores = [2, 7, 13, 47, 55, 77];
scores.map(function(numeros){
return numeros * 3;
})

This returns a new array array of [ 6, 21, 39, 141, 165, 231 ]

But when I use an array with subarrays, the map() method seems doesn’t loop through the whole array and their sub indexes.
var scores = [[2, 7], [13, 47], [55, 77]];
scores.map(function(numeros){
return numeros * 3;
})

What would be an effective way to map through a nested array using map()

1 Like

The map method would not loop through the whole array because the index of the array
you are looping through is also an array.
In this case numeros is an array…and you cannot multiply an array as a whole by 3…
you can concactenate the array… then loop through and multiply by 3.
or you could do a double map…that is do a map on numeros too

scores.map(numeros=>
numeros.map(val=> val * 3)
)

An idea that comes to mind is to map through each subarray.

var scores = [[2, 7], [13, 47], [55, 77]];
scores.map(function(subarray) {
  return subarray.map(function(number) {
    return number * 3;
  })
})

Note that this only works when you know that you have an array of arrays. For arrays with irregular nesting, you can use a mapper function that checks first if the argument is an array or a number:

var scores = [1, [2, 7, [8, 10]], [13, 47], [55, 77]];
// it's important for this function to have a name so we can refer to itself in the function body
scores.map(function mapper(s) {
  if (Array.isArray(s)) {
    return s.map(mapper);
  }
  else {
    return s * 3;
  }
})
// [ 3, [ 6, 21, [ 24, 30 ] ], [ 39, 141 ], [ 165, 231 ] ]
5 Likes

hi kaytbode,

“The map method would not loop through the whole array because the index of the array
you are looping through is also an array.”

That means scores = [2, 7, 13, 47, 55, 77] is treated as an array with individual indexes, while scores = [[2, 7], [13, 47], [55, 77]] their indexes are not defined to map?

exactly.
the contents of a subarray is not available to the outside map function…
therefore a need to run a separate map to iterate through the individual subarray

hi kevcomedia,

let me see if I understand by block:

var scores = [[2, 7], [13, 47], [55, 77]];
scores.map(function(subarray) {//this block will map  [2,7], [13, 47], [55,77] as in their own arrays individually?
  return subarray.map(function(number) {//this will iterate each index of the above array?
    return number * 3;
  })
})

You know I was also thinking of such situation, what do you mean specifically by “mapper”, is mapper a given prototype method given already by javascript?

NO…the mapper function is the one you created

1 Like

It’s just what I call to the callback function that you pass to .map().