Working With Arrays

Now that you know how to store a list of data inside an array, it is time to learn how to work with that list.

In this lesson, you will practice how to read specific items, add new items, and remove items you no longer need.

Quick review: reading by index

Items in an array are numbered starting from 0. This number is called the item's index.

You can read a specific item by placing its index number inside square brackets.

const favoriteFoods = ["pizza", "tacos", "sushi"];

console.log(favoriteFoods[0]);
console.log(favoriteFoods[1]);

In this example, favoriteFoods[0] reads the first item, and favoriteFoods[1] reads the second item.

Adding an item with push()

You can use push() to add a new item to the end of an array.

push() changes the original array by updating its contents.

const inventory = ["sword", "shield", "health potion"];

inventory.push("magic ring");

console.log(inventory);

Removing the last item with pop()

The pop() method removes the last item from an array.

It also returns the item that was removed.

Like push(), pop() changes the original array.

const todoList = ["buy groceries", "wash dishes", "pay bills"];

todoList.pop();

console.log(todoList);

Now let's look at the beginning of an array.

Adding an item with unshift()

You can use unshift() to add a new item to the beginning of an array.

const queue = ["second", "third"];

queue.unshift("first");

console.log(queue);

Removing the first item with shift()

You can use shift() to remove the first item from an array.

It also returns the item that was removed.

const tasks = ["wake up", "eat breakfast", "study JavaScript"];

tasks.shift();

console.log(tasks);

Code walkthrough

Here is the basic pattern:

• array[index] reads one item by position.
• push() adds an item to the end.
• pop() removes the last item.
• unshift() adds an item to the beginning.
• shift() removes the first item.
• All four methods change the original array.

When you click Run, you will see the updated arrays in the Output section.

Mini task

Look at the tasks code block above.

Before you click Run, what do you think will happen if you add one more tasks.shift(); line under the existing one?

Try it in the code editor above and check your guess.

Short quiz

Question 1: Which method adds an item to the end of an array?

• A) pop()
• B) push()

Question 2: Which method removes the first item from an array?

• A) shift()
• B) unshift()

Question 3: If you have an array called shoppingList, how do you access the first item?

• A) shoppingList[1]
• B) shoppingList[0]

Answers: 1. B, 2. A, 3. B

Small challenge

Now it is your turn to practice.

1. Create an array called backpack containing "water" and "map".
2. Use push() to add "flashlight" to the end.
3. Use unshift() to add "snack" to the beginning.
4. Use pop() to remove the last item.
5. Use shift() to remove the first item.
6. Use console.log() to print your backpack array.

// put your code below

console.log()

Summary

• Read items by position using square brackets, like items[0].
• push() adds an item to the end of an array.
• pop() removes the last item from an array.
• unshift() adds an item to the beginning of an array.
• shift() removes the first item from an array.
• push(), pop(), unshift(), and shift() change the original array.