JavaScript Array of Arrays

An array of arrays also known as a multidimensional array is simply an array that contains other arrays as its element. This structure allows you to store and organize data in a tabular format or a nested structure, making it easier to work with complex data in your applications.

let mat = [
    [1, 2, 3], // First sub-array
    [4, 5, 6], // Second sub-array
    [7, 8, 9]  // Third sub-array
];

console.log(mat[0][1]);

2

• The outer array contains three inner arrays.
• Each inner array has its own set of numbers.

Accessing Elements in an Array of Arrays

To access an element inside an array of arrays, you need to specify two indices:

• The first index refers to the array (or row).
• The second index refers to the element within that array (or column).

let mat = [
    [1, 2, 3], // First array
    [4, 5, 6], // Second array
    [7, 8, 9]  // Third array
];

// Accessing the element at the second row, third column
console.log(mat[1][2]);

6

In this case, mat[1][2] refers to the element in the second sub-array ([4, 5, 6]) at the third position (which is 6).

Modifying Elements in an Array of Arrays

Just like regular arrays, you can modify the elements inside an array of arrays using their indices.

let mat = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

// Changing the element at the first row, second column to 10
mat[0][1] = 10;

console.log(mat);

[ [ 1, 10, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ] ]

Here, we modify the value at index [0][1], changing 2 to 10.

Looping Through an Array of Arrays

You can use loops (like for, forEach, or map) to iterate through an array of arrays and access each individual element.

let mat = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

// Using nested loops to access each element
for (let i = 0; i < mat.length; i++) {
    for (let j = 0; j < mat[i].length; j++) {
        console.log(mat[i][j]);
    }
}

1
2
3
4
5
6
7
8
9

Array of Arrays: Practical Uses

1. Representing a Matrix

An array of arrays is commonly used to represent a matrix (a grid of rows and columns). For example, a 3x3 matrix of numbers could be represented like this:

let mat = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

This is ideal for operations such as matrix multiplication or performing transformations in graphics programming.

2. Storing Tables or Grids

In web development, an array of arrays can represent data in a tabular format, where each row is an array containing the columns:

let table = [
    ["Name", "Age", "City"],
    ["Amit", 25, "Delhi"],
    ["Rohit", 30, "Chennai"],
    ["Pankaj", 35, "Amritsar"]
  ];

This could be useful when dealing with dynamic tables or grids of data, such as in spreadsheets or dashboards.

3. Storing Grouped Data

An array of arrays is also useful for organizing grouped data, such as storing lists of items in different categories:

let mat = [
    ["Apple", "Banana", "Cherry"], // Fruits
    ["Carrot", "Lettuce", "Spinach"], // Vegetables
    ["Chicken", "Beef", "Pork"] // Meats
];

Here, each sub-array represents a group of related items.

Flattening an Array of Arrays

Sometimes, you might want to convert a nested array into a single array. This is known as flattening the array. JavaScript provides a convenient method flat() to achieve this.

let mat = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

// Flattening the array of arrays
let flatA = mat.flat();

console.log(flatA);

[
  1, 2, 3, 4, 5,
  6, 7, 8, 9
]

The flat() method combines all elements into a single array.

Array of Different Sizes

In JavaScript, arrays can have different sizes, meaning they can hold any number of elements. You can add or remove items from an array, and its size will change accordingly.

// Array of arrays with different sizes
let arrOfArr = [
    [1, 2, 3],       // Array of size 3
    [4, 5],          // Array of size 2
    [6, 7, 8, 9],    // Array of size 4
    [10]             // Array of size 1
];

// Accessing individual arrays
console.log(arrOfArr[0]);
console.log(arrOfArr[1]);
console.log(arrOfArr[2]);
console.log(arrOfArr[3]); 

[ 1, 2, 3 ]
[ 4, 5 ]
[ 6, 7, 8, 9 ]
[ 10 ]

Array of different types

This code creates a 2D array where each sub-array contains different types of data, such as strings, numbers, mixed types, and objects. You can access specific elements by referencing their row and column indices.

let mergedArray = [
    [ "apple", "banana", "cherry" ], // Array of strings
    [ 10, 20, 30, 40 ], // Array of numbers
    [42, "hello", true, 3.14], // Array of mixed types (numbers, strings, booleans)
    [{name : "Alice", age : 25}, {name : "Bob", age : 30}] // Array of objects
];

// Accessing elements from each sub-array
console.log(mergedArray[0][1]);
console.log(mergedArray[1][2]);
console.log(mergedArray[2][3]);
console.log(mergedArray[3][1].name);

banana
30
3.14
Bob