Creating Empty 2D Array in JavaScript

In programming, a 2D array also refers to a matrix that provides a structured way to organize and manipulate data in rows and columns. That means you can declare rows and columns first to initialize either an empty array or an array with some values.

The 2D array can be represented as matrices, tables, images, or gameboards, depending on the task you are working on. It provides an intermediate structure to hold the values of a program and create awesome things with it. It looks like this:

But why do you need an empty 2D array in the first place? An empty 2D array provides a flexible way to organize, store, and process values.

Here are five different ways to create a 2D empty array in JavaScript:

1. Using Array.from() and length property
2. Using Array Constructor and Array.fill() method
3. Using Nested loops
4. Using Array.map() with Spread Operator
5. Assigning [[], []]

Method 1: Using Array.from() and length property

The most efficient, elegant, concise, and one-liner way is to use Array.from() with length property. 

const twoD_arr = Array.from({ length: 3 }, () => Array.from({ length: 3 }, () => null));

console.log(twoD_arr);

# [ [ null, null, null ], [ null, null, null ], [ null, null, null ] ]

The outer Array.from() method creates an array with 3 rows. For each row, we are providing the value “null”.

The inner Array.from() method creates an array with 3 columns. For each row, we are providing the value “null”. We leveraged Array.from() method to create an array of specific length(3) and fill the values(null) to emptying it.

Method 2: Using Array Constructor and Array.fill() method

Basically, we will create an outer array of three rows, and then for each row, we will render three “null” values, and that will make a two-dimensional empty array.

const rows = 3
const columns = 4

const two_dim_arr = Array.from({ length: rows }, () => Array(columns).fill(null));

console.log(two_dim_arr);

// [
//     [ null, null, null, null ],
//     [ null, null, null, null ],
//     [ null, null, null, null ]
// ]

Method 3: Nested loops

It is a programmatic way of using two for loops, one for rows and one for columns, and assigning “null” values to empty the array. Since we need to create a two-dimensional array, we nest one for loop inside a for loop.

const rows = 3
const columns = 3

const two_dim_arr = []

for (let i = 0; i < rows; i++) {
    two_dim_arr[i] = [];
    for (let j = 0; j < columns; j++) {
        two_dim_arr[i][j] = null;
    }
}

console.log(two_dim_arr)

// [ [ null, null, null ], 
//  [ null, null, null ], 
//  [ null, null, null ] ]

Method 4: Using Array.map() with Spread Operator

If you want to avoid shared references and ensure each row is a unique array, use the combination of Array.map() and Spread operator.

const rows = 3
const columns = 4

const rowTemplate = Array(columns).fill(null);
const twoD_arr = Array(rows).fill(null).map(() => [...rowTemplate]);

console.log(twoD_arr)

// [
//     [ null, null, null, null ],
//     [ null, null, null, null ],
//     [ null, null, null, null ]
//   ]

Here, the Array.map() function clones the rows dynamically.

Method 5: Assigning [[], []]

If you are looking for a fixed-size empty array and not a dynamically sized one, use the “[ [], [] ]” syntax.

Here, we are clearly instructing in hardcoded that we are only looking for two rows. If you need a different size, you would have to manually add or remove elements.

If you are demonstrating a 2×2 matrix for quick experiments or proofs of concept, you can definitely use this approach; otherwise, I would advise you not to use it.

const arr_2d = [[], []];
console.log(arr_2d);

// [ [], [] ]

That’s all!