DEV Community

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

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
Collapse
 
jahid6597 profile image
MD. JAHID HOSSAIN • • 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));
}
Enter fullscreen mode Exit fullscreen mode

--UPD:

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

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.

Collapse
 
jonrandy profile image
Jon Randy 🎖️ •

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
Enter fullscreen mode Exit fullscreen mode
Collapse
 
yanhaijing profile image
yanhaijing •

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

Collapse
 
jahid6597 profile image
MD. JAHID HOSSAIN •

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]]
Enter fullscreen mode Exit fullscreen mode

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.

Thread Thread
 
yanhaijing profile image
yanhaijing •

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

Collapse
 
yanhaijing profile image
yanhaijing •

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

Collapse
 
jean_jorgemichel_8048416 profile image
Jean Jorge Michel •

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;
        }
    }
};
Enter fullscreen mode Exit fullscreen mode

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]]
Enter fullscreen mode Exit fullscreen mode
Collapse
 
yanhaijing profile image
yanhaijing •

good job

Collapse
 
jimzzzz profile image
Jimmy •

One more way :)

function create2DArray(m, n) {
    return [...Array(m)].map(() =>Array(n).fill(0))
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
hashirdev profile image
Hashir Afzal •

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

Collapse
 
yanhaijing profile image
yanhaijing •

Thank you for your support.

Collapse
 
sharmi2020 profile image
Sharmila kannan •

Nice article

Collapse
 
yanhaijing profile image
yanhaijing •

Thank you for your support.

Collapse
 
greenteaisgreat profile image
Nathan G Bornstein •

Just to add one more way to do it (using one of the tips I learned from this article!):

[...Array(n)].map(x => []);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
nangegao profile image
NangeGao •

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

Collapse
 
yanhaijing profile image
yanhaijing •

Do you have any questions?

Collapse
 
nangegao profile image
NangeGao •

Give DaLao a call !!!

Thread Thread
 
yanhaijing profile image
yanhaijing •

You are the best!