Arrays and Array Methods

---

Arrays

While arrays may just seem like lists, they also have a series of built-in methods that make it really efficient to interact with them. Much of the external data that we'll end up consuming with web applications will come in for the form of arrays that need to be looped over. Some code will need to run on each or specific items within the array.

Selecting Items in an Array

To access items within in an array, we use something called bracket notation.

1const colors = [`red`, `green`, `blue`];
2
3colors[0]; // would return `red`
4colors[2]; // would return `blue`

Within the square brackets, we place the index of the item we want to select within the array. In CS, we begin counting with 0, so the first item in the array has an index of 0. An array of three items last item's index would be 2 as in the example above.

By isolating a specific item in the array, we can use it in functions.

1// A function that transforms text to uppercase
2function screamString(text) {
3  let scream = `I love ${text}`;
4  return scream.toUpperCase();
5}
6
7const colors = [`red`, `green`, `blue`];
8
9screamString(colors[0]); // would return `I LOVE RED`

A slightly more complex example with an array of objects.

1// A function that welcomes a student to class
2function welcomeToClass(student) {
3  let welcomeMsg = `Welcome to class, ${student.name}!`;
4  return welcomeMsg;
5}
6
7// An array of students
8const roster = [
9  {
10    name: `Bart`,
11    age: 9,
12  },
13  {
14    name: `Lisa`,
15    age: 8,
16  },
17  {
18    name: `Maggie`,
19    age: 2,
20  },
21];
22
23welcomeToClass(roster[1]); // would return `Welcome to class, Lisa!`

Array Methods

Arrays also have methods that make it easy to loop over and run the same code on all or particular items within them. This is helpful when we have a large array and need to do the same thing to many or all items within it.

Map

What if we wanted to do the same thing on every item within the array? Mapping, or iterating over every item in the array, will be our go-to method.

1// A function that welcomes a student to class
2function welcomeToClass(student) {
3  let welcomeMsg = `Welcome to class, ${student.name}!`;
4  return welcomeMsg;
5}
6
7// An array of students
8const roster = [
9  {
10    name: `Bart`,
11    age: 9,
12  },
13  {
14    name: `Lisa`,
15    age: 8,
16  },
17  {
18    name: `Maggie`,
19    age: 2,
20  },
21];
22
23roster.map((student) => welcomeToClass(student));
24// returns ["Welcome to class, Bart!", "Welcome to class, Lisa!", "Welcome to class, Maggie!"]

Filter

What if we only wanted to return certain items in the array? How about only if the student's name is Bart? This is where filter comes in hand; it loops over the array and only returns values that match our condition.

1// An array of students
2const roster = [
3  {
4    name: `Bart`,
5    age: 9,
6  },
7  {
8    name: `Lisa`,
9    age: 8,
10  },
11  {
12    name: `Maggie`,
13    age: 2,
14  },
15];
16
17roster.filter((student) => student.name == `Bart`);

Arrays IRL

In our next lesson, we'll start looking at the DOM and how we can interact and manipulate it with JavaScript. Arrays make up a huge portion of the data that we'll be consuming, interacting with, and manipulating for the remainder of this course. As such, take some time with these assignments to get more confident traversing and working with them.

---

Previous and Next Lessons: