What is JavaScript 2D Array and How to Create It

There is no built-in two-dimensional array in JavaScript. Instead, JavaScript supports 2D arrays through jagged arrays – an array of arrays. Jagged arrays are essentially multiple arrays jagged together to form a multidimensional array.

How to create a 2D array in JavaScript

To create a two-dimensional array in JavaScript, we must create an array of arrays. To declare a 2D array, you use the same syntax as declaring a one-dimensional array.

Syntax of 1D Array

let data = [];

To declare the 2D array, use the following syntax.

Syntax of 2D Array

let data = [
  [],
  [],
  []
];

In the above code, we defined an empty 2D array.

Let’s define a 2D array with some values.

let data = [
  ['Millie', 15],
  ['Finn', 17],
  ['Dustin', 17]
];

console.log(data);

Output

[ [ 'Millie', 15 ], [ 'Finn', 17 ], [ 'Dustin', 17 ] ]

In the above data array, the first dimension represents the actor’s name, and the second one shows the age of each actor.

The console.table() method displays the tabular data as a table. The table() function takes one mandatory argument data, which must be the array or an object, and one additional optional parameter column.

It logs data as a table. Each item in the array (or enumerable property if data is the object) will be the row in a table. We can use the console.table() method to display the above output.

let data = [
  ['Millie', 15],
  ['Finn', 17],
  ['Dustin', 17]
];

console.table(data);

Output

┌─────────┬──────────┬────┐
│ (index) │    0     │ 1  │
├─────────┼──────────┼────┤
│    0    │ 'Millie' │ 15 │
│    1    │  'Finn'  │ 17 │
│    2    │ 'Dustin' │ 17 │
└─────────┴──────────┴────┘

Note that the (index) column is for the illustration that indicates the indices of the inner array.

Accessing 2D Array in JavaScript

To access an element of the 2D array, you first use square brackets to access an item of the outer array that returns an inner array and then use another square bracket to access the element of the internal array.

let data = [
 ['Millie', 15],
 ['Finn', 17],
 ['Dustin', 17]
];

console.log('The age of Millie is:', data[0][1]);

Output

The age of Millie is: 15

Adding elements to the 2D array

To add elements to the 2D array, use the Array methods, such as the array push() method.

let data = [
  ['Millie', 15],
  ['Finn', 17],
  ['Dustin', 17]
];

data.push(['Sadie', 15], ['Caleb', 18]);
console.log(data);

Output

[
  [ 'Millie', 15 ],
  [ 'Finn', 17 ],
  [ 'Dustin', 17 ],
  [ 'Sadie', 15 ],
  [ 'Caleb', 18 ]
]

In this example, we already have a 2D array with three elements. Using the push() method, we are adding two more elements to the array, and from the above output, you can see that we have added two items successfully to the 2D array.

To insert an element in the middle of the array, use the JavaScript array splice() method. The following code inserts an element in the second position of the data array and displays it in tabular format.

Output

┌─────────┬──────────┬────┐
│ (index) │    0     │ 1  │
├─────────┼──────────┼────┤
│    0    │ 'Millie' │ 15 │
│    1    │ 'Sadie'  │ 15 │
│    2    │  'Finn'  │ 17 │
│    3    │ 'Dustin' │ 17 │
└─────────┴──────────┴────┘

You can see that it has added a new element at position 1.

Adding a dynamic property to the 2D array

The following example calculates the percentage of each character’s age based on 80 years span and appends the percentage to the inner array.

let data = [
  ['Millie', 15],
  ['Finn', 17],
  ['Dustin', 17]
];

data.forEach(age => {
  let percentage = ((age[1] / 80) * 100).toFixed();
  age[2] = percentage + '%';
});

console.table(data);

Output

┌─────────┬──────────┬────┬───────┐
│ (index) │    0     │ 1  │   2   │
├─────────┼──────────┼────┼───────┤
│    0    │ 'Millie' │ 15 │ '19%' │
│    1    │  'Finn'  │ 17 │ '21%' │
│    2    │ 'Dustin' │ 17 │ '21%' │
└─────────┴──────────┴────┴───────┘

To append a new property in a 2D array, we used the array forEach() method to iterate the inner array one by one and add the percentage to the array. When we see the table, it will become a table column.

Removing elements from the JavaScript 2D array

To remove an item from a 2D array, you can use the array pop() or array splice() method.

let data = [
 ['Millie', 15],
 ['Finn', 17],
 ['Dustin', 17]
];

data.pop();

console.table(data);

Output

┌─────────┬──────────┬────┐
│ (index) │    0     │ 1  │
├─────────┼──────────┼────┤
│    0    │ 'Millie' │ 15 │
│    1    │  'Finn'  │ 17 │
└─────────┴──────────┴────┘

Iterating 2D array

To iterate the 2D array in JavaScript, use the forEach() method twice.

let data = [
  ['Millie', 15],
  ['Finn', 17],
  ['Dustin', 17]
];

data.forEach(arr => {
  arr.forEach(d => console.log(d));
});

Output

Millie
15
Finn
17
Dustin
17

So, if you want to iterate each element of the 2D or multiple dimensional arrays, you have to use the forEach() method two times because it is the arrays inside an array.

Conclusion

The two-dimensional array in JavaScript is a collection of elements that share a common name, and they are organized as a matrix in the form of rows and columns. The two-dimensional array is an array of arrays, so we create an array of one-dimensional array objects.