In this article, we are going to learn about Declare two-dimensional empty array by using JavaScript. A two-dimensional array is also known as a 2D array. It is a data structure in JavaScript that can hold values in rows and columns form. It is an array of arrays. Each element in a 2D array is accessible using two indices, and it is represented as an array[rowIndex][columnIndex].

There are several methods that can be used to add elements to Declare an empty two-dimensional array in JavaScript, which are listed below:

We will explore all the above methods along with their basic implementation with the help of examples.

Approach 1: Using a Loop

In this approach, we are using nested loops to iterate over the rows and columns of the 2D array and initialize each element to a specific value as null or undefined.

Example: In this example, the Empty2DArray function generates a 2D array with the specified number of rows (3) and columns (4) filled with null values. The arr1 is the resulting array.

function Empty2DArray(rows, cols) {
    const array = [];
    for (let i = 0; i < rows; i++) {
        array[i] = [];
        for (let j = 0; j < cols; j++) {
            array[i][j] = null;
        }
    }
    return array;
}

const arr1 = Empty2DArray(3, 4);
console.log(arr1);

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

Approach 2: Using the Array() Constructor

JavaScript provides the Array() constructor, which allows us to create an array of a specific length. We can use this constructor to create a 2D array by initializing each element as an empty array.

function createEmpty2DArray(rows, cols) {
    return Array.from({ length: rows }, () => Array(cols).fill(null));
};

Example: In this example, the Empty2DArray function uses Array.from() method to create a 2D array with 3 rows and 5 columns, initializing all elements to null. The arr2 holds the result.

function Empty2DArray(rows, cols) {
    return Array.from({ length: rows },
        () => Array(cols).fill(null));
}

let arr2 = Empty2DArray(3, 5);
console.log(arr2);

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

Approach 3: Using Array.from() with a Mapping Function

Using Array.from() with a mapping function, the code creates a two-dimensional array by specifying the number of rows and columns. Each cell is initialized using the mapping function to fill the array with a specified initial value.

Example

let rows = 3;
let cols = 4;
let initialValue = undefined;

let arr = Array.from({ length: rows }, () => Array(cols).fill(initialValue));

// Example usage
console.log(arr); 

[
  [ undefined, undefined, undefined, undefined ],
  [ undefined, undefined, undefined, undefined ],
  [ undefined, undefined, undefined, undefined ]
]