Why is Array.apply() setup resulting in an undefined index?

Question

In a constructor, I'm creating a two dimensional array like so:

this.grid = Array.apply(null, Array(3)).map((el, i) => {
      return Array.apply(null, Array(3)).map((el, i) => {
        return {
          key1: null,
          key2: null
        };
      });
    });

After i console.log(this.grid) I get a two-dimensional array with the objects and null properties. however if I try to console.log(JSON.stringify(this.grid[0][1])) there's an undefined error on [1]

class Grid {
  constructor() {
    this.grid = Array.apply(null, Array(3)).map((el, i) => {
      return Array.apply(null, Array(3)).map((el, i) => {
        return {
          key1: null,
          key2: null
        };
      });
    });
  }
}
// used in another external class with require() and instantiated like:
let grid = new Grid();

console.log(grid);
console.log(JSON.stringify(grid[0][1]))

I understand some differences between constructing arrays with the constructor, and using Array.apply(). Maybe I'm using apply() incorrectly?

I've attempted constructing this array in multiple ways. from a nested for-loop where .push()ing the same objects to the second dimension and then each row the grid.

this.grid = []
    for(let i = 0; i < 3; ++i){
      let row = []
      for( let j =0; j< 3; ++j) {
        let obj = {
          key1: "property",
          key2: "property"
        }
        row.push(obj);
      }
      this.grid.push(row);
    }

class Grid {
  constructor() {
    this.grid = [];
    for (let i = 0; i < 3; ++i) {
      let row = [];
      for (let j = 0; j < 3; ++j) {
        let obj = {
          key1: null,
          key2: null
        };
        row.push(obj);
      }
      this.grid.push(row);
    }
  }
 }
 // used in another external class file with a require() and instantiation like so:
 let grid = new Grid();
console.log(JSON.stringify(grid[0][1]));

I expect the log to show the object at those respective indices. However, JSON.stringify(this.grid[0][1]) is still:

TypeError: Cannot read property '1' of undefined

edited. the example now in the snippet (run in a browser console) reproduces the results noted in the question. — Jim
– Jim, Commented Jun 1, 2019 at 23:11

CertainPerformance · Accepted Answer · 2019-06-01 23:13:25Z

The variable named grid has a property named grid, which is the outer array containing the inner arrays. So, to reference the inner arrays, access grid.grid. Otherwise, just referencing grid gives you the instance, not the outer array.

class Grid {
  constructor() {
    this.grid = Array.apply(null, Array(3)).map((el, i) => {
      return Array.apply(null, Array(3)).map((el, i) => {
        return {
          key1: null,
          key2: null
        };
      });
    });
  }
}
// used in another external class with require() and instantiated like:
let grid = new Grid();

console.log(JSON.stringify(grid.grid[0][1]))

It might be clearer if the instance had a method on it, like printGrid which printed the grid. Then, it would make sense that you would call grid.printGrid to print the grid, and you would reference grid.grid to get to the outer array (and grid itself is clearly just the instance).

To reduce this sort of confusion, you might consider using a different property name, like outerArray (or a different class name).

class Grid {
  constructor() {
    this.outerArray = Array.apply(null, Array(3)).map((el, i) => {
      return Array.apply(null, Array(3)).map((el, i) => {
        return {
          key1: null,
          key2: null
        };
      });
    });
  }
}
const gridInstance = new Grid();

console.log(JSON.stringify(gridInstance.outerArray[0][1]))

Collectives™ on Stack Overflow

Why is Array.apply() setup resulting in an undefined index?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related