DEV Community

Mastering JavaScript: Multiple Ways to Generate a Two-Dimensional Array

yanhaijing on April 13, 2024

I often ask in interviews: Can you generate a two-dimensional array using JavaScript? This question might seem simple, but it actually reveals the ...

Read full post

MD. JAHID HOSSAIN • Apr 13 • Edited

Another way, we can implement method 3 using Array.fill() without map

function create2DArray(m, n) {
    return Array(m).fill(Array(n).fill(0));
}

--UPD:

function create2DArray(m, n) {
    return Array.from({ length: m }, () => Array(n).fill(0));
}

This version of create2DArray uses Array.from to create a new array for each row, ensuring that each row is independent of the others. Now modifying one row won't affect the others.

Jon Randy 🎖️ • Apr 14

This is incorrect. You will create an array of multiple copies of the same array:

// Create a 3x3 array
const myArray = create2DArray(3,3)

// Set 'one' item to 9
myArray[0][1] = 9

// Surprise!
console.log(myArray[0][1])  // 9
console.log(myArray[1][1])  // 9!!
console.log(myArray[2][1])  // 9!!

console.log(myArray[0] === myArray[1]) // true

yanhaijing • Apr 15

Indeed, there is this issue. Thumbs up for you!

MD. JAHID HOSSAIN • Apr 14

Thank you for identifying that @jonrandy

function create2DArray(m, n) {
    return Array.from({ length: m }, () => Array(n).fill(0));
}

const myArray = create2DArray(3, 3);
myArray[0][1] = 9;

console.log(myArray[0][1]);  // 9
console.log(myArray[1][1]);  // 0
console.log(myArray[2][1]);  // 0

console.log(myArray[0] === myArray[1]); // false

console.log(myArray[1] === myArray[2]); // false
// myArray[1] and myArray[2] are different arrays, even if they contain the same values. So, myArray[1] === myArray[2] returns false.

console.log(myArray) // [[0, 9, 0], [0, 0, 0], [0, 0, 0]]

This version of create2DArray uses Array.from to create a new array for each row, ensuring that each row is independent of the others. Now modifying one row won't affect the others.

yanhaijing • Apr 15

This shares a striking resemblance to Method 2 in its ingenuity.

yanhaijing • Apr 14

Thank you for your feedback, this is a better approach.

Jean Jorge Michel • May 14

I prefer try it in a way closer to OO paradigme, creating a function that will represent a matrix in general this give to us a more reusefull project feature.

var matrix = {
    create: function(rows, columns) {
        var newMatrix = [];
        for (var i = 0; i < rows; i++) {
            var row = [];
            for (var j = 0; j < columns; j++) {
                row.push(0); // Zero for default
            }
            newMatrix.push(row);
        }
        return newMatrix;
    },
    set: function(matrix, row, column, value) {
        if (row >= 0 && row < matrix.length && column >= 0 && column < matrix[0].length) {
            matrix[row][column] = value;
        } else {
            console.error("Index out of matrix.");
        }
    },
    get: function(matrix, row, column) {
        if (row >= 0 && row < matrix.length && column >= 0 && column < matrix[0].length) {
            return matrix[row][column];
        } else {
            console.error("Index out of matrix.");
            return undefined;
        }
    }
};

Now we can do:

var m4x4 = matrix.create(4, 4);
matrix.set(m4x4, 0, 0, 1);
console.log(m4x4);
// [[1, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]]

yanhaijing • May 15

good job

Jimmy • Apr 22

One more way :)

function create2DArray(m, n) {
    return [...Array(m)].map(() =>Array(n).fill(0))
}

Hashir Afzal • Apr 13

Nice in depth knowledge of array and js thanks keep it up

yanhaijing • Apr 14

Thank you for your support.

Sharmila kannan • Apr 14

Nice article

yanhaijing • Apr 15

Thank you for your support.

NangeGao • Apr 17

NB. Did you complete the article word by word or translate it using tools?

yanhaijing • Apr 20

Do you have any questions?

NangeGao • Apr 25

Give DaLao a call !!!

yanhaijing • Apr 25

You are the best!