JavaScript (ES5) Arrays

This was originally posted on my site at https://martyhimmel.me on December 28, 2016. Like a number of others on dev.to, I've decided to move my technical blog posts to this site.

A Quick Recap

First, a quick recap on arrays. Here’s an example array: var animals = ['cat', 'dog', 'hawk', 'wolf', 'elephant'];

And this is how we access those elements:

• animals[0] - cat
• animals[1] - dog
• animals[2] - hawk
• animals[3] - wolf
• animals[4] - elephant
• animals[animals.length - 1] - elephant

There are a few noteworthy things about the way arrays are indexed and accessed in the above example.

1. Arrays are zero indexed. The animals array indexing looks like [0, 1, 2, 3, 4].
2. Getting an element from an array is done by calling the array name followed by square brackets with the index number inside the brackets.
3. arrayName[0] will always get the first element of an array
4. Calling .length (an array method) on an array will give the total number of elements in an array. This is not zero based, but an actual count. animals.length is 5.
5. Because of the difference in the length of an array and the zero based indexing, the last element of an array will always be arrayName.length - 1.
6. To get the last element of an array, arrayName[arrayName.length - 1] can be used.

Now that the basics are out of the way, let's look dive deeper into using, looping over (iterating), and manipulating arrays.

Iteration

Arrays become a lot more useful after you understand loops - they tend to go hand in hand when coding. Consider this example:

var names = ['John', 'Jane', 'Judy', 'Joe', 'Jack', 'Jessie', 'Julie'];
for (var i = 0; i < names.length; i++) {
  console.log(names[i]);
}
// John
// Jane
// Judy
// Joe
// Jack
// Jessie
// Julie

If you really wanted to, you could manually type out each of those (e.g. console.log(names[0]), console.log(names[1]), etc.), but, aside from being tedious work, imagine if you had 100 elements in the array. What about 1000? You get the idea. Not only that, doing it manually requires you to know the number of elements in the array. Most of the time, in real world applications, you won’t know how big the array is, and it may change over time.

Let’s take it one step further and throw conditionals into the mix.

var randomData = ['John', 1234, 'Jane', true];
for (var i = 0; i < randomData.length; i++) {
  if (typeof randomData[i] === 'string') {
    console.log(randomData[i]);
  }
}
// John
// Jane

Granted, this is a contrived example, but hopefully you can see how powerful arrays can be, especially when used with loops and conditionals.

Array Methods

Let’s look at a few built in array methods. Each of these methods will modify the array they’re called on and return a value.

array.pop()

pop removes the last element of an array and returns its value.

var numbers = [1, 2, 3, 5, 8, 13];
var lastNumber = numbers.pop();
console.log(lastNumber); // 13
console.log(numbers); // [1, 2, 3, 5, 8]

array.push(element)

push adds an element to the end of an array and returns the new length.

var numbers = [1, 2, 3, 5, 8, 13];
var newLength = numbers.push(21);
console.log(newLength); // 7
console.log(numbers); // [1, 2, 3, 5, 8, 13, 21]

array.shift()

shift removes the first element of an array and returns its value.

var numbers = [1, 2, 4, 8, 16];
var firstElement = numbers.shift();
console.log(firstElement); // 1
console.log(numbers); // [2, 4, 8, 16]

array.unshift(element)

unshift adds an element to the beginning of an array and returns the new length.

var numbers = [1, 2, 4, 8, 16];
var firstElement = numbers.unshift(0.5);
console.log(firstElement); // 6
console.log(numbers); // [0.5, 1, 2, 4, 8, 16]

Closing Thoughts

Those four array methods are some of the more commonly used built in array methods. Two more, map and reduce are also commonly used with functions. I’ll cover those in a future tutorial on functions. In the meantime, you can check out more array methods at Mozilla’s developer docs for arrays.