Populating a 2D array in Javascript with random numbers

Question

I'm trying to populate a 2D array in javascript with random numbers. Although each column in the array is random, each row is identical which is not what I want (see image below). I want both rows and columns to be random.

http://eeldesigns.com/image.jpg

cols = 5;
rows = 10;

front = new Array(cols).fill(new Array(rows));

// Loop through Initial array to randomly place cells
for(var x = 0; x < cols; x++){
  for(var y = 0; y < rows; y++){
    front[x][y] = Math.floor(Math.random()*5);
  }
}
console.table(front) ;

Possible duplicate of [Array.prototype.fill() with object passes reference and not new instance](https://stackoverflow.com/questions/35578478/array-prototype-fill-with-object-passes-reference-and-not-new-instance) — Sebastian Simon, Feb 04 '19 at 20:04
`.fill(new Array(rows))` creates a single array instance and assigns it to each column. So when you think you modify only one you actually modify all of them. It's as if you were doing this: https://jsfiddle.net/ejqc4z8x/ — Alexey Lebedev, Feb 04 '19 at 20:18

Code Maniac · Answer 1 · 2019-02-04T20:27:15.160

2

One way of doing this using map

let op = new Array(10)
         .fill(0)
         .map(e=>(new Array(5)
         .fill(0)
         .map(e=> Math.floor(Math.random() * 5))))

console.log(op)

edited Feb 04 '19 at 20:27

answered Feb 04 '19 at 20:08

Code Maniac

37,143
5
39
60

2

thanks for the tip - I wasn't familiar with maps and their usage. – Ismail Feb 04 '19 at 20:19
@Ismail always happy to help :) you can read about map on given link in answer. – Code Maniac Feb 04 '19 at 20:27

Scott Sauyet · Accepted Answer · 2019-02-04T20:33:56.923

1

The trouble is that you're not initializing the row. It's easily fixed:

cols = 5;
rows = 10;

front = new Array(cols)// .fill(new Array(rows));

// Loop through Initial array to randomly place cells
for(var x = 0; x < cols; x++){
  front[x] = [];  // ***** Added this line *****
  for(var y = 0; y < rows; y++){
    front[x][y] = Math.floor(Math.random()*5);
  }
}
console.table(front) ; // browser console only, not StackOverflow's

Update

This is a cleaner version, somewhat similar to the one from Code Maniac, but simplified a bit:

const randomTable = (rows, cols) => Array.from(
  {length: rows}, 
  () => Array.from({length: cols}, () => Math.floor(Math.random() * 5))
)

console.table(randomTable(10, 5)) // browser console only, not StackOverflow's

edited Feb 04 '19 at 20:33

answered Feb 04 '19 at 20:15

Scott Sauyet

49,207
4
49
103

1

Thanks this was exactly what I was looking for. – Ismail Feb 04 '19 at 20:18
Just a quick question - does not the 'new Array()' initalise the row? – Ismail Feb 04 '19 at 20:22
1

Note that although this shows where you went wrong, the answer from Code Maniac is a better solution. – Scott Sauyet Feb 04 '19 at 20:23
1

No, and I should have commented that out before. You're passing one value to `fill`, which is used to fill all the rows with the same empty array. That's one reason the other answer is cleaner. – Scott Sauyet Feb 04 '19 at 20:25
Added a cleaner version. – Scott Sauyet Feb 04 '19 at 20:34

score 0 · Answer 3 · answered Jul 05 '20 at 22:15

This can be accomplished using a combination of Array.prototype.fill() and Array.prototype.map():

new Array(rows).fill([]).map(x => Array(columns).fill(0).map(x => x + Math.floor(Math.random() * (max - min)) + min));

For example, we can create a 100 by 964 column array full of random numbers between 900 and 1000 using the following:

new Array(100).fill([]).map(x => Array(964).fill(0).map(x => x + Math.floor(Math.random() * (1000 - 900)) + 900));

Populating a 2D array in Javascript with random numbers

3 Answers3

Update

Linked

Related