Learn how to create, access, and manipulate 2D arrays in JavaScript. Discover practical examples, visualization techniques, and modern ES6 approaches for working with multi-dimensional data.

Kirupa Chinnathambi's blog, simply known as Kirupa, provides tutorials, tips, and insights on web development, animation, and user experience design. With a friendly and accessible writing style, Kirupa covers a wide range of topics, including HTML, CSS, JavaScript, SVG animation, and frontend frameworks like React and Vue.js. Whether you're a beginner learning the basics of web development or an experienced designer seeking advanced techniques, Kirupa's blog offers practical guidance and creative inspiration to help you build engaging and interactive web experiences.

Kirupa

Two-dimensional (2D) arrays in JavaScript are arrays made up of other arrays, allowing for storage of complex, tabular data. Key concepts include creating 2D arrays manually or programmatically, accessing elements using row and column indices, representing data in either row-centric or column-centric formats, and visualizing 2D arrays using console.table for better readability.

Two-Dimensional (2D) Arrays in JavaScript

I prefer this version:
<pre><code class="language-js">(() =&gt; {
 const isFunction = v =&gt; v instanceof Function;
 const formatMatrix = (matrix) =&gt; matrix.map(row =&gt; row.join(&#x27;\t&#x27;)).join(&#x27;\n&#x27;);
 const createMatrix = (rows, cols, fillValue) =&gt;
 Array.from({ length: rows }, (_, rowIndex) =&gt;
 Array.from({ length: cols }, (_, colIndex) =&gt;
 isFunction(fillValue)
 ? fillValue(
 rowIndex * cols + colIndex,
 rowIndex,
 colIndex,
 rows,
 cols
 )
 : fillValue));
 
 console.log(formatMatrix(createMatrix(3, 5, &#x27;x&#x27;)));
 console.log(formatMatrix(createMatrix(2, 4, (i) =&gt; i)));
 console.table(createMatrix(8, 12, (i) =&gt; i));
})();
</code></pre>

2D arrays are really game changers for me in JS game dev because they are table based data structures 👌🏼