 # { Array Basics. }

### Objectives

By the end of this chapter, you should be able to:

• Create a JavaScript array
• Access elements in an array
• Modify the values stored in an array
• Use `push` and `unshift` to add elements to an array
• Use `pop` and `shift` to remove elements from an array
• Use `splice` for more advanced array modifications

### Introduction

So far, we've seen five different primitive data types in JavaScript: `string`, `number`, `boolean`, `null`, and `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

```let firstPrime = 2;
let secondPrime = 3;
let thirdPrime = 5;
let fourthPrime = 7;
let 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.

Thankfully, JavaScript provides you with a data type to help in these situations: the array. You can think of an array as simply a list of values.

To write an array in JavaScript, you use square brackets `[]` and comma separate each value in the array. Here are some examples:

```let primes = [2, 3, 5, 7, 11];
let names = ["Alice", "Bob", "Charlie"];
let booleans = [true, false, false, true];
let mixedTypes = [1, "sweet", true, null, NaN, "bye!"];
let woahhh = ["What's up with this? -->", ["Woah", "crazy!"]];
let 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!

At this point, you may be wondering why we didn't mention arrays when we talked about other data types in JavaScript. The reason is that up until now, we've been dealing with primitive data types in JavaScript. But arrays aren't primitives; they're examples of what's called a reference type. We'll talk about reference types in more detail in the next chapter. For now, it's sufficient to note that

```typeof [1, 2, 3]
```

returns `object`. So arrays are a type of object, which we'll talk about in more general terms later.

### Accessing and updating array values

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:

```let 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:

```let 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.

```let 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 `undefined` values.

```let 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.

```let 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 `push`, `unshift` returns the length of the modified array.

```let arr = [1,2,3];
arr.unshift(0); // returns the new length, i.e. 4
arr; // [0,1,2,3]
```

### Removing from arrays

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:

```let 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 `push`, however, `pop` doesn't return the length of the new array; instead, it returns the value that was just removed.

```let 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 `shift()` (like `unshift`, but the opposite)! As with `pop()`, `shift()` returns the removed value.

```let arr = [1,2,3];
arr.shift(); // returns 1
arr; // [2,3]
```

There's also a `delete` keyword in JavaScript, which you might think could be used to delete elements in an array. However, this isn't quite how `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.

```let arr = [5, 4, 3, 2];
delete arr;
arr; // [5, undefined, 3, 2]
```

### Removing/Adding or both with splice

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 `push`, `pop`, `unshift`, and `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:

```let arr = [1,2,3,4];
arr.splice(0,1); // returns 
arr; // [2,3,4]
```
```let arr = [1,2,3,4];
arr.splice(0,1,5); // returns 
arr; // [5,2,3,4]
```
```let arr = ["a","b","c","d"];
arr.splice(1,2,"x","y","z"); // ["b", "c"]
arr; // ["a", "x", "y", "z", "d"]
```

### Exercises

1. Create an array of your favorite foods (call it `favoriteFoods`). Make sure it has at least three elements.
2. Access the second element in `favoriteFoods`.
3. Change the last element in `favoriteFoods` to some other food.
4. Remove the first element in `favoriteFoods` and store it in a variable called `formerFavoriteFood`.
5. Add a favorite food to the back of the `favoriteFoods` array.
6. Add a favorite food to the front of the `favoriteFoods` array.
7. What happens when you try to `pop` from an empty array?
8. In the examples below, use `splice` to convert the first array to the second array:
• `[2, 3, 4, 5]` -> `[2, 4, 5]`
• `["alpha", "gamma", "delta"]` -> `["alpha", "beta", "gamma", "delta"]`
• `[10,-10,-5,-3,2,1]` -> `[10, 9, 8, 7, 6, 5, 4, 3, 2, 1]`

When you're ready, move on to Array Methods