SEBR0116

JavaScript Arrays

Lesson Overview

Objectives

• Learn about JavaScript Arrays
• Do some practice with JavaScript Arrays

Lesson Instructions

Arrays

Unfortunately, strings and numbers are not enough for most programming purposes. What is needed are collections of data that we can use efficiently: Arrays.

Arrays are great for:

• Storing data
• Enumerating data, i.e. using an index to find them
• Quickly reordering data

Arrays, ultimately, are a data structure that is similar in concept to a list. Each item in an array is called an element, and the collection can contain data of the same or different types. In JavaScript, they can dynamically grow and shrink in size.

let friends = ['Moe', 'Larry', 'Curly'];
=> ['Moe', 'Larry', 'Curly']

Items in an array are stored in sequential order, and indexed starting at 0 and ending at length - 1.

// First friend
let firstFriend = friends[0];
 => 'Moe'
// Get the last friend
let lastFriend = friends[2]
=> 'Curly'

We can even use strings like arrays:

let friend = "bobby bottleservice";
// pick out first character
friend[0]
//=> 'b'
friend.length
//=> 19

Working with Arrays

![Length](https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2F3o7btOtfwq4iFqCxb2%2Fgiphy.gif&f=1&nofb=1)

### Length method

The `length` method works in an interesting way in Javascript. It is always one more than the highest index in the array.

So `array.length` isn't necessarily the number of items in the array. Consider the following:

```javascript
let a = ['dog', 'cat', 'hen'];
a[100] = 'fox';
a.length; // 101

Remember: the length of the array is one more than the highest index.

Getting data from an array

If you query a non-existent array index, you get undefined:

let a = ['dog', 'cat', 'hen'];

a[90];
=> undefined

Array Helper Methods

Arrays come with a number of methods. Here's a list of some popular helpers:

Note: You might want to demonstrate a few of these.

• a.toString() - Returns a string with the toString() of each element separated by commas.

• a.pop() - Removes and returns the last item.

• a.push(item1, ..., itemN) - Push adds one or more items to the end.

• a.reverse() - Reverse the array.

• a.shift() - Removes and returns the first item.

• a.unshift(item) - Prepends items to the start of the array.

Like scales on the guitar, or spices in a kitchen, the more Array Methods you are familiar with, the more you will be able to do with your code. Don't give yourself a headache trying to memorize all of them. With practice and repetition you will see the uses and abilities of each, and how best to find them to use.

Lesson Recap

In this lesson, we learned all about JavaScript arrays and how they are used to store data. We also touched on array methods and how they can be used to affect that data!

Resources

• Array Methods