Manipulating 2D Arrays in React

Hey, you’re here! Let’s get started, 2D Arrays come in handy when we want to map out a grid or board. In my case, I used a 2D array to describe what the pixels will look like in our app.

So how do we get here? Starting from the top, you can always get a basic array using this:

const myArray = [ ‘a’, ‘b’, ‘c’ ]

However what if you needed to make a new array before you know what goes in it? I come from a Java background, so I’ve always done something like ‘int[] myArray = new int[3].’ Javascript can also initialize an array but it looks slightly different:

const myArray = Array(3)

This will give you an empty array: (3) [ empty x 3 ]

But in order to get an array we can start working with, we need to start with:

Producing an array: [ 0, 0, 0 ]

You might ask yourself, why can’t we use “Array(3).map(element => 0)” after all, don’t we love using all the convenient array methods such as forEach, map, and filter. Well, we can’t. If you want, the details of it is described in this article below, written by Mr. Reisner. To summarize what he wrote, the array constructor, Array(num) is empty, and until we attach a .fill() onto the end of it, the array remains [ empty ]

Here's Why Mapping a Constructed Array Doesn't Work in JavaScript

So if we want to initialize an array, we’ve got to use .fill() in order to provide some starting values and if we want to add additional information or specific instructions, we can use .map() to get there. Okay, so now we’ve established that, we’ll see map being used here:

And this will return: [ 0, 1, 2 ]

Now, there’s nothing stopping us from making a 2 layered or 2D array! Which is written

That’s certainly a mouthful of characters; it barely fits the width of this screen! This will return to us a 3x3 array of zeroes

Now the tricky part, is how do we iterate over this array? To give you context, the syntax of the array method .map() requires two inputs; element, and index in its parameters. This means that if you want to use the index, you must include the first parameter even if you don’t necessarily need it. This would look something like

myArray.map((element, index) => index)

But since we’re initializing an array in Javascript, this looks like

Array(3).fill().map((element,index) => index)

and this would give us:

In order for us to get the rest of the rows, we will have to say

and closer up…

Yeah, Javascript is a bit extra

If you’re still here, I’m proud of you for sticking through with it

Let’s break this snippet down. First taking a look at Array(3).fill().map(~) , we might recognize that this segment is what previously gave us [ 0, 1, 2 ]. The moment we write the arrow function inside of .map() we are instructing our machine to do something for each element in [ 0, 1, 2 ] or in other words, each ‘row.’

Now, in short, the arrow function written inside the first .map(~) or (element,index) => {Array(3).fill().map()} will create an array of [ 0, 1, 2 ] so that means [ 0, 1, 2 ] will be created three times! In addition, the rule that we wrote 3*index + index2 is an expression that makes sure that each row will increment each index by 1

Thus, our array is created below: