By the end of this chapter, you should be able to:
unshiftto add elements to an array
shiftto remove elements from an array
splicefor more advanced array modifications
undefined. We've also seen how to store these values inside of variables.
Sometimes, however, you need a more complex data structure when building your application. For example, maybe you need a list of restaurant names so that you can display each one to a user when she's looking for a place to eat nearby. Or maybe you're doing some math and want to maintain a list of prime numbers. It would be pretty annoying to have to write
var firstPrime = 2; var secondPrime = 3; var thirdPrime = 5; var fourthPrime = 7; var fifthPrime = 11;
This is fine if you know how many primes you need at the outset, but what if you didn't know how many values you needed to store? Or what if you did know how many values you needed, but the number was quite large? Writing out a variable for each one can quickly become unmanageable.
 and comma separate each value in the array. Here are some examples:
var primes = [2, 3, 5, 7, 11]; var names = ["Alice", "Bob", "Charlie"]; var booleans = [true, false, false, true]; var mixedTypes = [1, "sweet", true, null, NaN, "bye!"]; var woahhh = ["What's up with this? -->", ["Woah", "crazy!"]]; var emptyArray = ;
You can put anything you want inside of an array: numbers (as in
primes), strings (as in
names), booleans (as in
booleans), and other primitive types are all fair game. You can also have multiple different types inside of an array: just because the first element in an array is a number doesn't mean that every subsequent element needs to be a number too. For example,
mixedTypes has many different types inside of it. You can even store arrays inside of other arrays, as in the
woahhh array above!
typeof [1, 2, 3]
object. So arrays are a type of object, which we'll talk about in more general terms later.
To access an element in an array, we specify the name of the array followed by sqare brackets brackets and the position (also called the index) of the element we're trying to access. Arrays are zero-indexed, which means that the first element is accessed at index 0. Let's look at an example:
var arr = [5,3,10]; arr; // should equal 5 arr; // should equal 3 arr; // should equal 10 arr; // should be undefined -- remember, arrays are zero-indexed! arr[1+1]; // the same as arr, which is 10 arr[arr.length-1]; // shorthand for the last element of an array, in this case 10
To update a value in an array, we can simply assign an element at a given index to a new value:
var arr = [5, 3, 10]; arr = -1000; arr = "dope"; arr; // should be [-1000, 3, "dope"]
There are a number of ways you can add elements to an array.
One way is by setting a value at a new index in the array.
var arr = [1,2,3]; arr = 4; arr; // [1,2,3,4]
Be careful with this approach, though -- you can add an element at any index, and any elements that don't have values in them will be filled with
var arr = [1,2,3]; arr = "whoa"; arr; // [1, 2, 3, undefined, undefined, "woah"]
If you want to add to the end of an array, a better approach is to use the
push function - this function returns the new length (the number of elements) of the array.
var arr = [3, 2, 5]; arr.push(7); // returns the new length, i.e. 4 arr; // [3, 2, 5, 7]
On the other hand, if you want to add to the beginning of an array, you can use the
unshift function. As with
unshift returns the length of the modified array.
var arr = [1,2,3]; arr.unshift(0); // returns the new length, i.e. 4 arr; // [0,1,2,3]
We've seen how we can add elements from arrays. But what about removing elements?
One (not common) way to remove elements is to manually set the length of the array to a number smaller than its current length. For example:
var arr = [1,2,3]; arr.length = 2; // returns the new length arr; // [1,2]
A more common way to remove elements from the back of an array is to use
pop(). This function works in sort of the opposite way as
push, by removing items one by one from the back of the array. Unlike
pop doesn't return the length of the new array; instead, it returns the value that was just removed.
var arr = [1,2,3]; arr.pop(); // returns 3 arr; // [1,2]
If you want to remove an element from the front of an array, you should
unshift, but the opposite)! As with
shift() returns the removed value.
var arr = [1,2,3]; arr.shift(); // returns 1 arr; // [2,3]
There's also a
delete works with arrays. When you use this keyword, the value at the index where you delete will simply be replaced by
undefined. This usually isn't what you want, which is why you won't often see people use
delete on arrays. It's more common to see this word used with objects, which we'll talk more about in the next unit.
var arr = [5, 4, 3, 2]; delete arr; arr; // [5, undefined, 3, 2]
One of the more powerful array methods is
splice, which allows you to either add to an array or remove elements or even do both! You can think of
splice as a powerful generalization of
shift all in one!
The splice method accepts at least two arguments. The first argument is the starting index, indicating where values will be removed or added. The second parameter is the number of values to remove. Optionally, you can pass in an unlimited number of additional arguments; these correspond to values you'd like to add to the array. The splice method always returns an array of the removed elements. Here are some examples:
var arr = [1,2,3,4]; arr.splice(0,1); // returns  arr; // [2,3,4]
var arr = [1,2,3,4]; arr.splice(0,1,5); // returns  arr; // [5,2,3,4]
var arr = ["a","b","c","d"]; arr.splice(1,2,"x","y","z"); // ["b", "c"] arr; // ["a", "x", "y", "z", "d"]
favoriteFoods). Make sure it has at least three elements.
favoriteFoodsto some other food.
favoriteFoodsand store it in a variable called
popfrom an empty array?
spliceto convert the first array to the second array:
[2, 3, 4, 5]->
[2, 4, 5]
["alpha", "gamma", "delta"]->
["alpha", "beta", "gamma", "delta"]
[10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
When you're ready, move on to Array Methods