Front End Development topics with a touch of humor

Stuff about arrays

The flexible-orderable data type

October 9, 2020

Arrays are awesome. They are, as the MDN docs say, a "list-type" object, but they are so much more! But how could anything that resembles a list be awesome? Surely, I exaggerate?

Let's compare arrays to other data types.

JavaScript Data Types

Wait, what, where is array? It may seem funny, but in JavaScript arrays are not a data type: they are a subset of objects.

Yet, according to Wikipedia:

            an array type is a data type that represents a collection of elements (values or variables), each selected by one or more indices (identifying keys) that can be computed at run time during program execution

Odd... well, that's JavaScript for you. This is a language that other programmers like to make fun of, but I {}. Get it? I object!

Er, moving on...

Now for the stuff

You may wonder why I use the informal "stuff" about this subject rather than something impressive-sounding like "a full and detailed examination of " or "a deep dive that brushes the metal" or even "a treatise." Stuff, I think, is good because it gives me the freedom to touch on the things I think are interesting.

Anyone can go read the docs, but is that interesting? Docs are simply lists of traits or attributes of a certain topic--basically, docs are arrays.

How do you make an array?

              let arr = [];

This is simply by assigning an array literal to a variable. Voila! We now have brought a baby array into the world.

How can we add items into an array?

              arr[0] = "thing one";
              //["thing one"]
              arr[1] = "thing two";
              //["thing one", "thing two"]
              arr[2] = "thing three";
              //["thing one", "thing two", "thing three"]

The array now has three members, separated by commas, ordered as element 0 and element 1 and element 2. Arrays start counting at 0, a convention which I believe the inventors of computer science created just to confuse people.

Before we go further, I want to tell you about the spread operator, ...(I mean, it looks like "...", not a meaningful pause after the sentence). This is an ES6 development that used to always scare me a bit, but it is so cool and useful that I want to put it right out there.

The spread operator is used when you want to access the elements of the array without the "coating" of the brackets, if you want them individually. This may not sound like a big deal, but if you recall that arrays are objects, you realize that the elements are actually properties of a thing, not drifting free for the convenience of coders. To get at them, you usually have to do a bit of programming.

For example, say you want to put the elements of an array, say arr, into a new array, newArr. Observe:

              let newArr = ["thing zero", "thing four", "thing five"];
              newArr[1] = arr;
              //["thing zero", Array(3), "thing five"]

I told you! Instead of the nice continuous array I was hoping for, I get this weird clump in the middle. The array is nested: an array within an array. You would write it like this:

              [["thing zero", ["thing one", "thing two", "thing three"], "thing five"]]

To actually get a single, non-nested array you would have to use some programming.

            for (let i = 0; i < 3; i++) {
                newArr.splice(i + 1, 0, arr[i]);
            //["thing zero", "thing one", "thing two", "thing three", "thing four", "thing five"]

That's a decent amount of work, plus not as readable as you might want. Conside the alternative that the spread operator gives us.

              newArr.splice(1, 0, ...arr);
              //["thing zero", "thing one", "thing two", "thing three", "thing four", "thing five"]

Nice, huh?

You can also use it when declaring an array. Let's make one more new array.

              let newestArr = [1, 2, ...newArr, 3];
              //[1, 2, "thing zero", "thing one", "thing two", "thing three", "thing four", "thing five", 3]

Boom. So easy.