var initGrid = function() {

  //creating a grid while initialising it
  var grid = [];

  // declaring each grid element as a Object having three properties
  var gridElement = {
    x: Number,
    y: Number,
    val: Number
  };

  for (var i = 0; i < 10; i++) {
    for (var j = 0; j < 10; j++) {
      gridElement.x = i;
      gridElement.y = j;
      gridElement.val = 0;
      grid.push(gridElement);
    };
  };

  return grid;
};

console.log(initGrid());

var initGrid = function() {

  //creating a grid while initialising it
  var grid = [];

  // declaring each grid element as a Object having three properties
  var gridElement = {
    x: Number,
    y: Number,
    val: Number
  };

  for (var i = 0; i < 10; i++) {
    for (var j = 0; j < 10; j++) {
      gridElement.x = i;
      gridElement.y = j;
      gridElement.val = 0;
      grid.push(gridElement);
    };
  };

  return grid;
};

console.log(initGrid());

when i run this code on console, all Objects of grid Array are having same values for x and y which are 9 and 9....

But i want to create objects having different values acc to loop variables

• javascript
• arrays
• javascript-objects

3 Answers 3

This is because, Object are passed by reference. You will have to create different object in every iteration.

Following is the sample.

var initGrid = function() {

  //creating a grid while initialising it
  var grid = [];

  for (var i = 0; i < 10; i++) {
    for (var j = 0; j < 10; j++) {
      var gridElement = {}
      gridElement.x = i;
      gridElement.y = j;
      gridElement.val = 0;
      grid.push(gridElement);
    };
  };

  return grid;
};

console.log(initGrid());

You're not declaring a gridElement type that way; Javascript doesn't do that, Typescript would (but that's beside the point).

You see the same values because you only ever have one gridElement object, the one you created with

var gridElement = {
  x: Number,
  y: Number,
  val: Number
};

which, for context, initializes an object with properties x, y, and val all pointing to the Number constructor function.

Every loop iteration is mutating this same object, and pushing a reference to that one object onto your grid, so you don't actually have 100 grid elements with x and y equal to 9 - you have 100 references to the same object, where the last values you wrote to x and y were both 9.

As an example, you can create new objects per loop as follows:

for (var i = 0; i < 10; i++) {
  for (var j = 0; j < 10; j++) {
    var newGridElement = {
      x: i,
      y: j,
      val: 0
    };
    grid.push(newGridElement);
    console.log(newGridElement);
  };
};

You can declare a GridElement constructor function and type of your own, but if you really need that, you'll be doing something like defining a Javascript class of your own.

You can use a user-defined object, with a function and an instance with new operator [MDN]. This gives an interface for the data structure.

var initGrid = function () {
    var grid = [];

    function GridElement(x, y, val) {            // user-defined function
        this.x = x;                              // properties
        this.y = y;
        this.val = val;
    };

    for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 10; j++) {
            grid.push(new GridElement(i, j, 0)); // use an instance of GridElement with new
        };
    };

    return grid;
};

document.write('<pre>' + JSON.stringify(initGrid(), 0, 4) + '</pre>');