JavaScript Fundamentals: Arrays

In JavaScript, an array is a list of elements stored in a variable:

var cars = [“Ford”, “Subaru”, “Honda”, “Toyota”];

In the example above, the four makes of cars are stored in the cars variable.

Accessing the elements can be done by referencing the index. The index starts at zero. This means the first element in your array has an index of 0, the second element has an index of 1, the third element has an index of 2, etc. The index is found using brackets [].

Let’s look back at our cars array. If we want to get the value of the 3rd element in the list, we’d just do this:

var cars = [“Ford”, “Subaru”, “Honda”, “Toyota”];
cars[2]; // output: “Honda”

Remember, the index is zero-based!

That’s neat, but I want to make a new array. How do I do that? Well, you have a couple options:

var dogs = [];
var dogs = new Array();

Both of these examples are acceptable. I personally prefer using the brackets [] and this is probably the most common way you’ll come across. The examples above create empty arrays, but you can include elements at the same time you create the array if you’d like:

var colors = [“red”, “green”, “blue”]; // Creates a new array with three elements in it

Great! So is there anything we can do with an array?

As a matter of fact, there are methods that allow you to manipulate arrays. Here are a few examples of some common array methods:

  • concat() — joins 2 arrays and returns a new array:
var arrayOne = [“Joe”, “Stanley”, “Roger”];
var arrayTwo = [“Emily”, “Lauren”, “Sara”];
var arrayThree = arrayOne.concat(arrayTwo);
arrayThree; // output: [“Joe”, “Stanley”, “Roger”, “Emily”, “Lauren”, “Sara”]
  • reverse() — reverses the array so the last element becomes the first element, the first element becomes the last element, etc.:
var cars = [“Ford”, “Subaru”, “Honda”, “Toyota”];
cars.reverse(); // output: [“Toyota”, “Honda”, “Subaru”, “Ford”]
  • pop() — removes the last element of an array and returns that element:
var myArray = [“Emily”, “Lauren”, “Sara”];
myArray.pop(); // output: “Sara”
The result of myArray is now [“Emily”, “Lauren”]
  • push() — adds an element to the end of an array and returns the new length of the array:
var people = [“Joe”, “Stanley”, “Roger”];
people.push(“Fred”); // output: 4
The result of people is now [“Joe”, “Stanley”, “Roger”, “Fred”] (the new element is added to the end of the array)
  • shift() — removes the first element and returns that element:
var cars = [“Ford”, “Subaru”, “Honda”, “Toyota”];
cars.shift(); // output: “Ford”
The result of cars is now [“Subaru”, “Honda”, “Toyota”]
  • unshift() — adds an element to the front of an array and returns the new length of the array:
var friends = [“Emily”, “Lauren”, “Sara”];
friends(“Claire”); // output: 4
The result of friends is now [“Claire”, “Emily”, “Lauren”, “Sara”]
  • sort() — sorts an array alphabetically or numerically, in ascending or descending order. For strings, the default sorting method is alphabetical in ascending order. However, to order numbers correctly, you’ll want to use the compare function. Here’s why:

Without the compare function:

var example = [32, 5, 100, 25];
example.sort();

You would expect to have the array sorted numerically in ascending order to give you [5, 25, 32, 100] right? Wrong!

JavaScript looks at the first number and sorts 1 before 2, 2 before 3, etc. So this would actually output:

[100, 25, 32, 5]

So let’s see what happens when you use the compare function:

var example = [32, 5, 100, 25];
example.sort(function(a,b) {return a-b});
The result is [5, 25, 32, 100]

Yes! This is what we wanted. So what happened here? The compare function compares two values and returns a positive, negative, or zero value. The value returned will determine where it’s placed in order.

For example: when comparing 32 with 5, the function calculates 32 – 5 and returns 27 (a positive value). Since it’s positive, 32 will be sorted higher than 5. However, when comparing 5 with 100, the function calculates 5 – 100 and returns -95 (a negative value) so 5 will be sorted lower than 100.

To return the values in descending order, switch how ‘a’ & ‘b’ are returned:

example.sort(function(a,b) {return b-a});

The last thing I’m going to discuss today is JavaScript’s length property which tells you how many elements are in an array:

var cars = [“Ford”, “Subaru”, “Honda”, “Toyota”]
cars.length; // output: 4

Thanks for reading!

This was a very basic run-down about arrays since I wanted to review some fundamentals. If you think someone else may benefit from reading, please like and share!

I’m on twitter! Cheers!