Nested arrays — JS: Arrays

A value in an array can be anything, including another array. You can create an array in an array like this:

const arr1 = [[3]];
arr1.length; // 1

const arr2 = [1, [3, 2], [3, [4]]];
arr2.length; // 3

Each element, which is an array, is treated as a single unit. This can be seen from the size of the second array. JavaScript syntax allows you to place the elements of a created array line by line, let's rewrite the creation of the second array for clarity:

const arr2 = [
  1,        // first element (number)
  [3, 2],   // second element (array)
  [3, [4]], // third element (array)
];
arr2.length; // 3

Nesting is not limited in any way. You can create an array of arrays of arrays and so on.

Accessing nested arrays looks a bit unusual, though logical:

const arr1 = [[3]];
arr1[0][0]; // 3

const arr2 = [1, [3, 2], [3, [4]]];
arr2[2][1][0]; // 4

You may not always be able to see exactly how to get to the right element when you're not used to it, but it's just a matter of practice:

const arr2 = [
  1,
  [3, 2],
  [3, [4]],
];

arr2[2];       // [3, [4]]
arr2[2][1];    // [4]
arr2[2][1][0]; // 4

Changing and adding arrays to an array:

const arr1 = [[3]];
arr1[0] = [2, 10];
arr1.push([3, 4, 5]);

// [[2, 10], [3, 4, 5]]

Nested arrays can be modified directly by simply accessing the desired element:

const arr1 = [[3]];
arr1[0][0] = 5;
// [[5]]

The same goes for adding a new item:

const arr1 = [[3]];
arr1[0].push(10);
// [[3, 10]]

So, what do we need nested arrays for? There are quite a few such examples, such as mathematical concepts like matrices, and representations of game boards. Remember tic-tac-toe? This is a similar case:

Let's look at a problem like this. If given a tic-tac-toe board. You need to write a function that checks if there is at least one cross or zero on this field, depending on what you are asked to check.

// Initializing the field
const field = [
  [null, null, null],
  [null, null, null],
  [null, null, null],
];

// Making a move:
field[1][2] = 'x';
// [
//     [null, null, null],
//     [null, null, 'x'],
//     [null, null, null],
// ]

Now let's implement a function that performs the check:

const didPlayerMove = (field, symbol) => {
  // Traverse the field Each element is a line on the playing field
  for (const row of field) {
    // includes method checks if an element is present in the array,
    if (row.includes(symbol)) { // If it's present, it means we found what we were looking for
      return true;
    }
  }

  // If the field was searched, but nothing was found,
  // then there were no moves
  return false;
}

Let's check it out:

didPlayerMove(field, 'x'); // true
didPlayerMove(field, 'o'); // false

Recommended materials

1. Documentation on `includes` method