I have an array of arrays, and I want to map over it and just return the values of arrays, but when I map over it and log the result, it's just an array and I don't know how to map over my array and use it in other places.

 const arr = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
  ];

  const arrMap = arr.map((it) => it.map((itm) => itm));
  console.log(arrMap);


//what I expected 1,2,3,4,5,6 , ...
//what I got [Array(3), Array(3), Array(3)]

Actually, I need the values for using them in somewhere else, but I don't know what to do. I also used function for this but when I return the values and log them It's undefined:

  const arr = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
  ];

  
  const arrMap = (arr) => {
    arr.forEach((element) => {
      console.log(element);
//In here, everything works fine
      return element;
    });
  };
  console.log(arrMap);

//what I got undefined

I have an array of arrays, and I want to map over it and just return the values of arrays, but when I map over it and log the result, it's just an array and I don't know how to map over my array and use it in other places.

 const arr = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
  ];

  const arrMap = arr.map((it) => it.map((itm) => itm));
  console.log(arrMap);


//what I expected 1,2,3,4,5,6 , ...
//what I got [Array(3), Array(3), Array(3)]

Actually, I need the values for using them in somewhere else, but I don't know what to do. I also used function for this but when I return the values and log them It's undefined:

  const arr = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
  ];

  
  const arrMap = (arr) => {
    arr.forEach((element) => {
      console.log(element);
//In here, everything works fine
      return element;
    });
  };
  console.log(arrMap);

//what I got undefined

• javascript

Share Improve this question Follow edited Oct 17, 2021 at 12:47 Andy 63.6k1313 gold badges7171 silver badges9898 bronze badges asked Oct 17, 2021 at 12:40 zara esmaeilizara esmaeili 1111 silver badge22 bronze badges 3

• You get undefined because console.log doesn't return anything. Your arrMap is a function, try calling it: console.log(arrMap(arr)); – MikeM Commented Oct 17, 2021 at 12:54
• @MikeM what would expect that to return? – Andy Commented Oct 17, 2021 at 12:56
• @Andy Undefined, but it will at least log the elements. Clearly, the function needs to be called. – MikeM Commented Oct 17, 2021 at 12:58

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Use flatMap -

const arr = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

const arrMap = arr.flatMap(m => m);
console.log(arrMap);

Why it won't work : map() is supposed to run on each element of an array and return a transformed array of the same length. You have three elements in your input array and will always get three elements in your mapped array.

Your expectations can be met by tweaking your code with forEach() if you want. With forEach() there is nothing returned and you will have to start with a separate array variable. Below code uses ...

const arr = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
  ];

  let arrMap = [];
  arr.forEach((it) => arrMap.push(...it));
  console.log(arrMap);

But flatMap() is already there:

 const arr = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
  ];
  
  let ans = arr.flatMap(x => x);
  console.log(ans);

Use flat if you just want to flatten the array:

const arr = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

console.log(arr.flat());

Use flatMap if you want to do something with each element before the array gets flattened.

const arr = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

const arrMap = arr.flatMap((el) => {
  el.forEach((n) => console.log(n));
  return el;
});

console.log(arrMap);

forEach doesn't return anything it's like a for loop but for array only. Since you have double array you should flat it by using flatMap

  const arr = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
  ];
  const arrMap = arr.flatMap((it) => it);
  console.log(arrMap);