Populating An Array In JavaScript

Question

JavaScript:

I am trying to populate an array.

var blocks = [];
var blocksCount = 7;
for (var columnIndex = 0; columnIndex < blocksCount; columnIndex++) {
 for (var rowIndex = 0; rowIndex < blocksCount; rowIndex++) {
 blocks[columnIndex][rowIndex] = 'Some Value';
 }
}

The error message says: undefined is not an object!

What do I have to change to make it work?

• Dancrumb: Where were you running this code? Both Chrome and Node 6.9.1 report Cannot set property '0' of undefined.

Answer 1

You have to assign an array to blocks[columnIndex] before you try to assign a value to a property of that array.

• Timo: could you explain why?
• Quentin: @Timo — Because you can't assign something to a property of undefined

Answer 2

blocks[columnIndex] is not defined when you are assigning a value to the rowIndex on it. You cannot assign a value to something that is not defined yet. Hence, define columnIndex as an empty array when it is not defined yet i.e for the first time. You can do like this,

blocks[columnIndex] = blocks[columnIndex] || [];

var blocks = [];
var blocksCount = 7;
for (var columnIndex = 0; columnIndex < blocksCount; columnIndex++) {
 blocks[columnIndex] = blocks[columnIndex] || [];
 for (var rowIndex = 0; rowIndex < blocksCount; rowIndex++) {
 
 blocks[columnIndex][rowIndex] = 'Some Value';
 }
}
console.log(blocks);

• Timo: what is || ??
• Supradeep: It is an OR operator , it means , if the value on the left hand side to || is defined then it will be assigned to blocks[columnIndex] OR its value will be the one on the right side i.e []
• Supradeep: No problem. Happy to help :)

Answer 3

Currently, you do not have a multidimensional array.

var arr = [];
console.log(arr[0]);

Will return undefined and you are attempting to assign new elements at this point.

You can overcome this and create a multidimensional array within your first for loop statement and create a new array within the original blocks array.

 blocks[columnIndex] = [];

You can then assign both values to the multidimensional array.

var blocks = [];
var blocksCount = 7;
 
for (var columnIndex = 0; columnIndex < blocksCount; columnIndex++) {
 blocks[columnIndex] = [];
 for (var rowIndex = 0; rowIndex < blocksCount; rowIndex++) {
 blocks[columnIndex][rowIndex] = 'Some Value';
 console.log(blocks[columnIndex][rowIndex]);
 }
}

https://jsfiddle.net/ybsdL4q7/

Answer 4

You can use the from constructor of an Array to pass a function into the array creation. This means no need for for loops :)

const blockCount = 7;
const block = Array.from({ length: blockCount }, (_, i) => {
 return Array.from({ length: blockCount }, (_, j) => 'Some Value');
});
console.log(block);