Lesson Weekend

Until now, we've always dealt with one piece of information at a time: one number, one string, one element on a page. But often, we need to group things together. For example, what if we wanted to have a list of the months of the year? We'd use an array, which is just a list of things grouped together. An array looks like this:

> var months = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "november", "december"];

Here are some more arrays for you to try in the JavaScript console:

  • [2, 5, 7, 3423, 85, 65]
  • ["e", "p", "i", "c", "o", "d", "u", "s"]
  • ["word", 45, "blah", 123]

You can put variables and expressions in your arrays, or even other arrays:

> var variable = "I'm a variable!";
> var things = [variable, "I'm not a variable!"];
> things;
["I'm a variable!", "I'm not a variable!"]

> var numbers = [62, 62 / 2];
> numbers;
[62, 31]

> var confusingAssortmentOfThings = ["string", 123, ["another string", 456], 321, "yet another string"];
> confusingAssortmentOfThings;
["string", 123, Array[2], 321, "yet another string"]

(That Array[2] just means that this element of the confusingAssortmentOfThings array is itself an array containing 2 elements. More on this later.)

Just like numbers and strings, arrays have methods. Here are a couple for you to start with:

> var fruits = ["apple", "orange", "passion fruit", "kiwi"];
> fruits.pop();
"kiwi"
> fruits;
["apple", "orange", "passion fruit"]
> var numbers = [1, 2, 3];
> numbers.reverse();
[3,2,1]
> numbers;
[3,2,1]

Note that both the pop() and reverse() methods change the array on which they're called. The pop() method removes the last item from the array AND returns it. The reverse() method reverses the order of items in the array and returns that reversed array.

You can also add elements to an array, or combine two arrays:

> var greetings = [];
> greetings.push('hi');
> greetings.push('hello');
> greetings;
["hi", "hello"]

> greetings.concat(['hola', 'buenos dias']);
["hi", "hello", "hola", "buenos dias"]

Note that while push() adds an element to an array, the concat() method doesn't actually change the original array, but rather returns a new array that combines the two. The greetings array still only contains the 2 elements pushed on to it:

> greetings;
["hi", "hello"]

If you want to access an element from an array, the syntax is a bit different from anything we've seen before:

> var letters = ['e', 'p', 'i', 'c', 'o', 'd', 'u', 's'];
> letters[0]
"e"
> letters[4]
"o"

Just like with strings, we count array elements starting with zero. So the zeroth element of the array is 'e', and the fourth element is 'o'.

Note that it is conventional for array variable names to be plural, thereby making it clear that the variable refers to a collection of things rather than a single thing. Following this convention will help with debugging your own code as well as making your code clearer for others.

Check out the MDN documentation for Mutator and Accessor methods, and experiment using these methods on your own.

Terminology


  • Array: A list of things grouped together

Examples


Arrays can have just about anything as elements, even other arrays:

["string", 123, true, ["another string", 456], 321, 52 / 3]

Methods


Common array methods:

  • pop(): Remove the last element.
  • push(): Add an element to the end.
  • concat(): Combine with another array.
  • reverse(): Reverses an array. The first array element becomes the last and the last becomes the first.

Access elements using square brackets:

var letters = ['a', 'b', 'c'];
letters[0] // returns 'a'

Start counting elements at 0.

Add elements using square brackets:

var letters = ['a','b','c'];
letters[3]='d';  //makes the letters array ['a','b','c','d']

Update elements using square brackets:

var letters = ['a','b','c','d'];
letters[2] = 'x';  //updates the letters array to ['a','b','x','d']

Tips


  • It is conventional that array names be plural.