Arrays: Lists of Data

Arrays: Lists of Data

Earlier in this class we looked at primitive data types. That is, data types that are considered basic building blocks.

In this lesson, we'll take a look at a data type that is built using primitive data types and that is an array. Arrays are a list of a data type that can then be stored in a single variable.


When you want to handle a collection of the same data type, you'll want to create an array.

Here's how to create one.

    var drinks = ["water", "juice", "milk", "soda"];

Just like that, you've created a new array with four elements in them, and initiated the value of drinks with it.


Now that you've put data inside the array, how do you retrieve it? If you specify the index, you can get the value at that index back.

Because Javascript is zero-based (it starts counting from 0 instead of 1), water is actually at position 0 in the array, not 1.

So, if you wanted to get back the first element in the array, it would be like this:


You can take this a step further and iterate over the entire array using a for loop.

    var drinks = ["water", "juice", "milk", "soda"];

    for (var i = 0; i < drinks.length; i++) {

We are initializing the value of i to be 0, and then looping until that value is equal to the number of elements in the array, in this case, 4.

As the value goes from 0 to 1, to 2, and then to 3, the values at each of those indexes is being printed.



After you have initialized an array, you can modify the values at an index pretty easily. Say you want to replace milk with coffee, it is as simple as this:

    var drinks = ["water", "juice", "milk", "soda"];

    drinks[2] = "coffee";

    ["water", "juice", "coffee", "soda"]

All you need to do is provide the index you want to reassign and then set it equal to your new value.


JavaScript has a bunch of built-in methods we can use with our arrays to make common tasks simple and painless. Let's go over the most popular ones.


You can sort you array by calling the sort method on it.

    var drinks = ["water", "juice", "milk", "soda"];

    var sortedDrinks = drinks.sort();

    ["juice", "milk", "soda", "water"]

In the case of strings, it will sort the items alphabetically. With numbers, they will be sorted numerically.


With push, you can easily add new items to the end of your array. Just call push on your array with the new item you want to add.

    var drinks = ["water", "juice", "milk", "soda"];

    drinks.push("tea"); // add "tea" to the end of this array

    ["water", "juice", "milk", "soda", "tea"]


Pop is the opposite of push. Call pop on your array to remove the last item in your array.

    var drinks = ["water", "juice", "milk", "soda"];

    drinks.pop(); // remove the last item in this array

    ["water", "juice", "milk"]


The shift method removes the first element of an array and then returns that element to you.

    var chocolates = ["Snickers", "Kit-Kat", "Twix"];

    var snack = chocolates.shift();

    ["Kit-Kat", "Twix"]


The unshift method adds elements to the beginning of the array and returns the new array's length to you.

    var chocolates = ["Snickers", "Kit-Kat", "Twix"];

    var newLength = chocolates.unshift("Milky Way", "3 Musketeers");

    ["Milky Way", "3 Musketeers", "Snickers", "Kit-Kat", "Twix"]


You can create a new array by concatenating two existing arrays. All you need to do is call concat on one array, with the second array being the parameter.

    var healthyDrinks = ["water", "milk"];
    var unhealthyDrinks = ["juice", "soda"];

    var allDrinks = healthyDrinks.concat(unhealthyDrinks);
    ["water", "milk", "juice", "soda"]


Using slice, you can return a brand new array containing elements from a slice of the original array. It's pretty simple to use, simply provide the method with the starting and ending indexes and it will do the rest.

    var colors = ["purple", "red", "white", "blue", "gold"];

    var slice = colors.slice(1, 4);
    ["red", "white", "blue"]

If you only provide one parameter, it will use that number as the starting point, and copy the rest of the array.

    var colors = ["purple", "red", "white", "blue", "gold"];

    var slice = colors.slice(3);
    ["blue", "gold"]

Finally, if you provide a negative index, it will just start from the end and go backwards.

    var colors = ["purple", "red", "white", "blue", "gold"];

    var slice = colors.slice(-3);
    ["white", "blue", "gold"]


If you don't want to return a new array, you can use splice.

    var foods = ["burger", "pizza", "donut", "bread", "pasta"];

    ["burger", "pizza"]

If you provide a second parameter, you can specify the number of elements to remove from the array starting from that index.

    var foods = ["burger", "pizza", "donut", "bread", "pasta"];

    foods.splice(2, 1);
    ["burger", "pizza", "bread", "pasta"]


The map function creates a new array from an existing one after calling a function on every element. Consider this scenario:

    var names = ["Bill", "Kelly", "John"];

    var intros = {
    	return "My name is " + name;

    ["My name is Bill", "My name is Kelly", "My name is John"]

It took every element from the names array, prepended every string element with My name is and the result was a new array with three brand new strings.

This function does not alter the original array.


The filter method is useful for, well, filtering out elements you don't want from an array to form a new one.

    var numbers = [1, 2, 3, 4, 5, 6, 7, 8];

    var odd = numbers.filter(function(number) {
        return number % 2 == 1;

    [1, 3, 5, 7]

Essentially, your filter function simply needs to return true or false. Only elements that cause the function to return true end up moving on to the new array, and the rest are filtered out.


The reduce method tends to be hard to understand at first, but can be really useful once you know to use it. Basically reduce goes over every element and collects some information about each element, and then finally returns the result.

A simple way to demonstrate reduce is to use it to sum up all the numbers in an array.

    var numbers = [1, 2, 3, 4, 5, 6, 7, 8];

    var total = numbers.reduce(function(total, number) {
        return total + number;


Instead of adding the numbers together, you can do anything you'd like and reduce will return the final result for you.

Arrays are pretty cool as they make it easier to work with multiple pieces of data at the same time, but in our next lesson, we'll discuss objects!