Multiple Methods for Creating Empty Matrices in JavaScript and Their Core Principles

Introduction

In programming practice, creating empty matrices (or two-dimensional arrays) is a common task, especially in fields such as data processing, algorithm implementation, and game development. This article uses the example of creating a 9x9 empty matrix to explore multiple implementation methods in JavaScript and analyze their underlying core principles in depth.

Traditional Loop-Based Methods

The most straightforward and widely compatible approach is to use nested loops. For instance, to create a 9x9 matrix with each element initialized to undefined:

var matrix = [];
for(var i = 0; i < 9; i++) {
    matrix[i] = new Array(9);
}

This method is simple and clear: the outer loop initializes rows, and the inner part uses new Array(9) to create nine elements per row, with default values of undefined. It is compatible with all JavaScript environments, including older browsers.

Optimized Variants of Loop Methods

Another variant explicitly sets each element's value, which, though slightly more verbose, enhances readability:

var matrix = [];
for(var i = 0; i < 9; i++) {
    matrix[i] = [];
    for(var j = 0; j < 9; j++) {
        matrix[i][j] = undefined;
    }
}

Here, the inner loop assigns undefined to each element explicitly, emphasizing the initial state. While it may be marginally less performant than the previous method, it is more reliable when precise control over initialization values is required.

Modern API Methods: Array.fill() and Array.from()

With the introduction of ECMAScript 6, Array.fill() and Array.from() offer more concise syntax. For example, using Array.fill():

Array(9).fill().map(() => Array(9).fill())

This approach first creates an array of length 9, fills it with undefined using fill() to enable map, and then creates new arrays for each row. However, note that Array(9).fill(Array(9)) creates rows that share references, so modifying one row affects others; thus, it is not recommended for independent matrices.

An example using Array.from():

Array.from(Array(9), () => Array.from(Array(9)))

This leverages the mapping capability of Array.from() to generate independent rows directly. These methods are code-efficient but require attention as they are not supported in Internet Explorer and may need polyfills.

Key Differences Between Pass-by-Reference and Pass-by-Value

In matrix creation, pass-by-reference issues are a common pitfall. For example:

Array(3).fill(Array(3).fill(0))

This creates a 3x3 matrix, but all rows reference the same array object, causing changes in one row to propagate to others. To avoid this, use map to ensure each row is independent:

Array(3).fill(null).map(() => Array(3).fill(0))

Here, fill(null) provides initial values for map to operate on, generating independent row arrays and ensuring pass-by-value.

Other Practical Methods

Beyond the above methods, utility functions like partitioning can be used:

function partition(a, n) {
  return a.length ? [a.splice(0, n)].concat(partition(a, n)) : [];
}
partition(Array(81), 9)

This recursively splits a one-dimensional array into a two-dimensional matrix, suitable for specific scenarios. Additionally, a loop method utilizing the length return of push:

var a = [], b;
while (a.push(b = []) < 9) while (b.push(null) < 9);

This method may offer better performance but has lower code readability.

Performance and Compatibility Considerations

Loop-based methods generally offer stable performance and compatibility with all browsers, making them suitable for general scenarios. Modern API methods provide more elegant syntax in supported environments but require consideration of polyfill costs. In practical applications, selection should be based on project needs: for projects requiring broad compatibility, loop methods are recommended; for modern front-end applications, Array.from() or Array.fill() combined with map can be prioritized.

Conclusion

Creating empty matrices in JavaScript can be achieved through multiple approaches, from traditional loops to modern APIs, each with its strengths and weaknesses. The key is to balance compatibility, performance, and code readability based on the application context. Understanding the differences between pass-by-reference and pass-by-value is central to avoiding errors. Through the analysis in this article, developers can make informed choices and write robust code.