Javascript 2D Array Issue Changing Specific Element Changes Column

Question

When I go to change the value of lets say terrain[2][3], it will change the whole column rather than just that specific coordinate. The first function creates the Array while the second function defines the terrain of 1's and 2's.

var ArrayMaker = function(cols, rows, con1, con2) {


var array = []
  for (var i = 0; i < cols; i++){
    array[i] = con1
    for (var j = 0; j< rows; j++){
      array[i][j] = con2
    }
  }
  return array
}

var setup = function() {
  var terrain = ArrayMaker(height/50, width/50, [], 1)

  var nLakes = Math.floor(Math.random() * 6)
  for (var i = 0; i < nLakes; i++){
    var x = Math.floor(Math.random() * (terrain.length + 1))
    var y = Math.floor(Math.random() * (terrain[1].length + 1))
    console.log(x + " " + y)
    terrain[x][y] = 2

  }
  console.log(terrain)
}

Output that I receive when running the executed code. As you can see the columns itself are being repeated and I have tried changing them outside the function to get the same effect. I'm new to Javascript itself and I may just be defining the 2D array wrong.

18 25
14 23

(20) [Array(38), Array(38), Array(38), Array(38), Array(38), Array(38), Array(38), Array(38), Array(38), Array(38), Array(38), Array(38), Array(38), Array(38), Array(38), Array(38), Array(38), Array(38), Array(38), Array(38)]
0
:
(38) [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
1
:
(38) [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
2
:
(38) [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
3
:
(38) [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
4
:
(38) [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
5
:
(38) [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
6
:
(38) [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
7
:
(38) [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
8
:
(38) [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
9
:
(38) [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
10
:
(38) [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
11
:
(38) [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
12
:
(38) [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
13
:
(38) [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
14
:
(38) [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
15
:
(38) [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
16
:
(38) [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
17
:
(38) [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
18
:
(38) [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
19
:
(38) [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
length
:
20
__proto__
:
Array(0)

trincot · Accepted Answer · 2019-01-19 17:28:45Z

1

This is because your initialisation code assigns the same con1 array (which initially is []) to all rows of your new array. So you actually only have one row with several references to it:

for (var i = 0; i < cols; i++){
  array[i] = con1
  /* ... */
}

Change this using slice to:

for (var i = 0; i < cols; i++){
  array[i] = con1.slice(); // Now it is a separate copy
  /* ... */
}

edited Jan 19, 2019 at 17:28

answered Jan 19, 2019 at 17:21

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Webber Over a year ago

Thank you this fixed the issue, can you explain the splice() function, I don't understand how it worked and fixed the issue. I'll mark your comment as an answer as soon as it lets me.

trincot Over a year ago

slice will create a new array from a given array, by copying each value from the given array. slice allows to specify arguments to only copy part of the array, but without arguments, it copies the whole array. The same can be achieved with spread syntax: array[i] = [...con1]; or with array[i] = Array.from(con1);. Choose whichever you find easiest.

Gowri Over a year ago

pls refer this to learn about slice MDN Slice. you can also use [].concat(con1) to copy an array

Collectives™ on Stack Overflow

Javascript 2D Array Issue Changing Specific Element Changes Column

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related