Chaining methods on array display as undefined

Question

const array = new Array(9).fill([]).forEach(function(value, index, arr) {
    arr[index] = Array(9).fill(0);
    console.log(index, arr[index]); // This line report properly by creating 
}); // new array.
console.log(array); // Reported as underdefined.

However, if redefine as below, it works as expected.

const array = new Array(9).fill([]);
array.forEach( function(value,index,arr){
   arr[index] = Array(9).fill(0);
   console.log(index,arr[index]);   
});                                  

console.log(array);

I would like to define multiple dimensional arrays within one line used as this state command.

But what is the problem for scenario 1 where bounded forEach methods array definitions work fine?

If your intent is to modify the contents of the array, you may want to use `Array#map` instead, which returns the new array https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map — user184994, Dec 19 '17 at 08:43
**Note:** Array.fill will create the value first and copy same value in all items. So in this code `new Array(9).fill([])`, all 9 items will point to same array — Rajesh, Dec 19 '17 at 08:45
@gurvinder372 bit of a technical question. Does foreach return `undefined` or does foreach not return anyting and therefore assigning nothing to a variable is undefined? — apokryfos, Dec 19 '17 at 08:45
@apokryfos this may be a stupid question but is `return undefined` different from not returning? — Rajesh, Dec 19 '17 at 08:46
@apokryfos as per spec http://www.ecma-international.org/ecma-262/6.0/#sec-array.prototype.foreach ... it returns `undefined` ... And it is almost equivalent to not having a `return` statement. — gurvinder372, Dec 19 '17 at 08:47
@Rajesh I don't think there's any practical difference. But I would expect a difference in how you express intent when writing code i.e. if someone else sees your code and sees `return undefined;` then they'd reasonably assume that they can work with that but if you don't return anything they can reasonably assume that they should not work with any return value — apokryfos, Dec 19 '17 at 08:51

gurvinder372 · Accepted Answer · 2017-12-19T08:50:13.900

4

But what is the problem for scenario 1 where bounded forEach methods array defnitions works fine.

Problem is forEach returns undefined

I woule like to define multiple dimensional arrays within one line used as this.state command.

You can use map for the same

var output = new Array(9).fill([]).map( function(value,index,arr){
   return Array(9).fill(0);  //return the inner array
});

Or as @bergi suggested, you can use Array.from as well

var output = Array.from(Array(9)).map( function(value,index,arr){
   return Array(9).fill(0); 
});

edited Dec 19 '17 at 08:50

answered Dec 19 '17 at 08:44

gurvinder372

66,980
10
72
94

1

Or instead of `fill`+`map`, just use `Array.from` – Bergi Dec 19 '17 at 08:47
@Bergi Is that (edit in my answer) what you meant? – gurvinder372 Dec 19 '17 at 08:50
1

@gurvinder372 No, I meant without `map`, like in Rajesh's comment. – Bergi Dec 19 '17 at 08:52
@Rajesh Please add *yours* as an answer, it is more sleek and shorter. +1 – gurvinder372 Dec 19 '17 at 08:53
Thanks ALL, the forEach explanation describes the root caue. It's a good idea to use map or from as altertanatives. And it is not as convenient as other languages to initialize multi-dimensional arrays in Javascrpt. – Il Kim Dec 20 '17 at 09:37

score 1 · Answer 2 · answered Dec 19 '17 at 08:59

As other answers have already mentioned Array.forEach returns undefined or does not return anything, you cannot use it.

As an alternate approach, you can use Array.from.

Following is a sample:

var output = Array.from({
  length: 9
}, () => {
  return Array.from({
    length: 9
  }, () => 0)
});

console.log(output)

Also, one more issue with your code is, you are using an object in Array.fill. What array.fill does is, it will create the value to be filled first and then fill it in all items.

var output = new Array(9).fill([]);
output[0].push(1);
console.log(output)

In you check the output, it says /**ref:2**/, but if you check in console, you will notice that all items will have item 1. So you should avoid using objects with Array.fill.

score 0 · Answer 3 · answered Dec 19 '17 at 08:46

You want to generate array of 9 arrays filled with 0 and return it to variable.

You can achieve this using map method.

const array = 
  new Array(9)
      .fill([])
      .map(function(){
        return Array(9).fill(0);
       });     
       
console.log(array);

p.s. no value, index and etc needed to pass to map methods argument in Your case

score 0 · Answer 4 · answered Dec 19 '17 at 08:47

Array.prototype.forEach returns undefined. Just call the forEach like below.

const array = new Array(9).fill([])
array.forEach( function(value,index,arr){
   arr[index] = Array(9).fill(0);
});
// [
//   [0, 0, 0, ...],
//   ...
// ]

Using map would be another choice, but I don't vote for it because it creates yet another array in memory.

Chaining methods on array display as undefined

4 Answers4