0

I am trying to create a dynamically sized, empty 2D grid using arrays that can have a percentage of one value at specific co-ordinates, and the remainder another value, all assigned post-generation. I have found a suitable solution, but wanted to gain some clarification on why the original implementation didn't work as intended.

The code that works:

const height = 5;
const width = 5;
const percentage = 0.2;    // control percentage of certain value

// grid construction
const grid = new Array(height).fill().map(element => new Array(width));

// grid population
for (let y = 0; y < height; y++) {
  for (let x = 0; x < width; x++) {
    const probability = Math.random();
    grid[y][x] = probability > percentage ? 'x' : 'o';
  }
}

console.log(grid);

/* Example Output:
[
  ['x', 'x', 'x', 'o', 'x'],
  ['o', 'o', 'x', 'x', 'x'],
  ['x', 'x', 'x', 'x', 'x'],
  ['x', 'x', 'x', 'x', 'x'],
  ['x', 'x', 'o', 'x', 'o']
]
*/

The issue arises when I change the 'grid construction' block:

const height = 5;
const width = 5;
const percentage = 0.2;    // control percentage of certain value

// grid construction (doesn't work as intended)
const row = new Array(width).fill();
const grid = new Array(height).fill(row);

// grid population
for (let y = 0; y < height; y++) {
  for (let x = 0; x < width; x++) {
    const probability = Math.random();
    grid[y][x] = probability > percentage ? 'x' : 'o';
  }
}

console.log(grid);

/* Example Output:
[
  ['x', 'x', 'x', 'o', 'x'],
  ['x', 'x', 'x', 'o', 'x'],
  ['x', 'x', 'x', 'o', 'x'],
  ['x', 'x', 'x', 'o', 'x'],
  ['x', 'x', 'x', 'o', 'x']
]
*/

I think I understand why the first code block gives the desired result, but I can't for the life of me work out what is going wrong in the second example.

I would really appreciate some clarification on what is going on here.

Cheers :)

Deamun
  • 1
  • 1
  • 3
    `fill(row)` fills the array with references to the same row. Mapping creates a new array with new instances or arrays. – Heretic Monkey Jul 18 '22 at 16:01
  • https://stackoverflow.com/questions/37949813/array-fillarray-creates-copies-by-references-not-by-value – epascarello Jul 18 '22 at 16:04
  • that makes so much sense, thank you so much for the response. Super obvious in hindsight :) – Deamun Jul 18 '22 at 16:17
  • The working code should be fixed to just fill both dimensions in the loop. myArray.fill() fills with undefined. It's a no-op on a new Array. – danh Jul 18 '22 at 16:17

0 Answers0