Understanding Arrays

There is a very short list of programming structures you have to learn to be reasonably comfortable in most modern object-oriented languages. Arrays are one of them.

If a variable is a bucket that can hold one thing, an array is a superbucket that can hold many things.

Variable

Variable.

Array

Array.

The language you use determines what an array can hold. Certain languages will only let you put the same type of thing in your array superbucket – “this superbucket holds only screws”, or “this superbucket holds only issues of Playboy from 1972-1981”. Actionscript 3 lets you mix it up, putting anything you want in your array – including other arrays!

Many arrays

An AS3 array can hold many arrays, which can each hold many things …

Many many arrays

… and you can nest things even deeper, creating an array that holds many arrays, which in turn hold many arrays.

Creating an Array of Your Own

Let’s start simply. To get an instance (copy) of AS3’s built-in Array class that you can play around with, use the new keyword:

var myArray:Array = new Array();

This line of code means that we want to reserve a place in the computer’s memory to store something. The name of that thing is myArray. The type of that thing is an Array. We’re setting the value of that thing using the = operator. We use the new keyword to get a copy of the Array class, and specifying Array() is how we do it, building our new Array instance from the Array class’s constructor function. The semi-colon is like a period ending the statement.

Be sure to check out our Understanding Classes tutorials to learn more about constructor functions.

Once we’re done, we have an instance (copy) of the Array class called myArray that we can mess with.

Filling the Superbucket

Now that we’ve declared our array, let’s define it by adding some elements to it. We’ll throw in a few strings, which are datatypes surrounded by quotation marks.

myArray = ["wookie", "ewok", "sarlac"];

We use those square brackets a lot when working with arrays.

Now the array instance has three elements in it. They’re all string literals, but they could be a mix of things – numbers, ints (whole numbers), booleans (these are like lightswitches – on or off), or other arrays.

Peering Into the Superbucket

In order to find out what’s in our array, we use the name of the array followed by two square brackets, and the number of the element we want to know more about. A semi-colon ends the line, like so:

myArray[2];

Just typing that up won’t do anything, though. The Actionscript interpreter figures out the answer, and keeps it to itself. We need to use the built-in trace function to get Flash to report the value to us in the Output window.

trace(myArray[2]);

The answer is “sarlac”. Surprised? Arrays are zero-based, which means you start counting from zero. So element 0 is “wookie”, element 1 is “ewok”, and element 2 is “sarlac”.

Changing the Contents

If we wanted to put something at the end of this array, we could just be direct about it:

myArray[3] = "taun taun";

Now the array is four elements long: “wookie”, “ewok”, “sarlac”, “taun taun”. In fact, if we just trace out the name of the array, that’s what the Output window will report to us. Give it a try:

trace(myArray);

We can knock an element out and replace it with something else just as directly:

myArray[0] = "hutt";

By directly accessing element 0, we’ve knocked out “wookie” and replaced it with “hutt”. Poor wookie.

The Array Class and its Toys

The Array class gives us a bunch of goodies to play with. Like any class, it has methods (things that it does) and properties (things that it is or has).

Many of the Array class’s methods (things that it does) help us to put new things into the array at specific points, and pull things out of the array. Here are a few examples:

Array.pop(); removes the last element from the array
Array.push(); adds an element to the end of the array
Array.shift(); removes the first element and shifts everything back by one
Array.unshift(); adds an element to the beginning of the array and shifts everything ahead
Array.splice(); lets you specify an index point and a length so you can laser-cut elements out of an array and, if you wish, replace the removed elements with new ones. It’s like open-heart surgery for arrays.

One of the most commonly-used properties (things that it is/has) of an array is length, which just reports how many elements are in your array. So far, myArray.length is 4. You can see this by tracing out your array’s length property:

trace(myArray.length);

Notice that no round brackets are required. You need to use those round brackets for methods, not properties.

Using the Toys

So if we wanted to add a Gungan to our array (for some ungodly reason), we could use the Array class’s push method, like so:

myArray.push("gungan");

Now, myArray.length is 5 – “hutt”, “ewok”, “sarlac”, “taun taun”, “gungan”. Let’s get the wookie back at the beginning of the list by using the unshift method:

myArray.unshift("wookie");

Now, myArray.length is 6. Here’s what myArray looks like: “wookie”, “hutt”, “ewok”, “sarlac”, “taun taun”, “gungan”.

Performing Open-Heart Surgery on an Array

Finally, we’ll decide to get the ewok out of there using our surgical splice method. Splice wants to know where we want to start cutting, how many elements we want to remove, and which elements (if any) we want to insert into the array. Let’s keep it simple, and kill off the ewok for now.

Ewok

Yub nub! (Translation: “tell my wife i love her.”)

The ewok is sitting at index 2, if we count from the beginning starting at zero. So we tell the splice method that we want to start hacking and slashing at index 2, for a total of 1 elements:

myArray.splice(2,1);

Now when we trace the array, the ewok is gone: “wookie”, “hutt”, “sarlac”, “taun taun”, “gungan”. (Note that when you actually trace out your array, the Output window leaves out the string quotation marks … i’ve left them in here to remind us that we’re working with strings, not variable names.)

What if we wanted to remove the hutt and the sarlac? We’d tell the splice command to start at index 1, which is where the hutt is, and remove two elements, like this:

myArray.splice(1,2);

That means “start at element 1, and remove two elements.” So our array is now “wookie”, “taun taun”, “gungan”.

Finally, we’ll use splice to get rid of that taun taun, and throw some invasive Star Trek races into the mix:

myArray.splice(1,1,"vulcan", "klingon", "tribble");

Now, we trace out the array and we get “wookie”, “vulcan”, “klingon”, “tribble”, “gungan”. That’s because we told splice to start at index 1 (which is where taun taun was), remove one element (namely, taun taun), and insert those three other species/races at the incision point. The transplant was a success, doctor!

How Does This Help Me Build Games?

Admittedly, this all seems pretty pointless when you don’t have a real-world code example. But arrays don’t really come to life until you learn one of the other basic programming elements: loops. In the next tutorial, Understanding Loops, we’ll break down the basic structure. Then in Understanding Loops with Arrays, we’ll see how they play together. Finally, i’ll throw you a few real-world code examples of how i use loops and arrays to code different pieces of my games that you can learn to use in your own projects.

For more Flash AS3 Tutorials and a pile of other useful stuff, check out our Flash and Actionscript 911 feature.

9 thoughts on “Understanding Arrays

  1. Carl Schooff

    this is an excellent intro to arrays. I will definitely be recommending this article and your 911s to my readers.
    love your sense of humor “if we wanted to add a Gungan to our array (for some ungodly reason)” lol.

    Carl

    Reply
    1. Ryan Henson Creighton

      In the interest of giving the people what they want, my next article will feature 35% more gungan jokes. Tell your friends.

      Reply
  2. Troy Gilbert

    Great intro (love the pics). I generally encourage developers to use the direct syntax for initializing arrays: var myArray:Array = [ ]; instead of new Array(); it’s *slightly* faster (no class lookup), but I generally find it more expressive. new Array(size) is useful if you want to pre-specify a size, though a Vector is probably a better choice there.

    Reply
  3. Arthur

    I had a great time reading this Ryan! Since I’m in the process of getting my own game working, this was very insightful to my code. I understand the theory, but still the actual practice is a bit confusing.(I haven’t used any of the Array methods yet, just the length property) I’m really looking forward to your next tutorial on loops and example code!

    Reply
  4. Pingback: untoldentertainment.com » Understanding Loops

  5. William karunia

    Thanks, learned a lot from this post! i really appreciate this! arrays were one of the things that are very hard for me to understand and now, it’s all clear and easy! now i can really work on some systems in my game that cannot be done without arrays, again, Thank you!

    Reply

Leave a Reply to Ryan Henson Creighton Cancel reply

Your email address will not be published. Required fields are marked *