JavaScript Simplified · One concept, one day, one project · Day 11 of 32

Array Methods

The built-in tools that add, remove and search items in a list. You upgrade your shopping list so it can grow and shrink.

By the end of today you can

Add and remove items at the end with push and pop
Add and remove items at the start with unshift and shift
Check whether a value is in a list with includes
Build a shopping list that changes

An array method is a built-in function that does something to an array. Today you learn five that cover almost everything a simple list needs: add, remove, and check.

1. Adding and Removing at the End

push adds an item to the end. pop removes the last item. These two are the workhorses: most lists grow and shrink at the end.

What this code doespush("oil") makes the list three items. pop() removes "oil" again, back to two. You change the list without touching indexes by hand.

app.js

const list = ["rice", "beans"];

list.push("oil");   // add to the end
console.log(list);

list.pop();         // remove the last
console.log(list);

OUTPUT   TERMINAL

➜ webbo3 node app.js
[ 'rice', 'beans', 'oil' ]
[ 'rice', 'beans' ]

2. Adding and Removing at the Start

unshift adds an item to the start. shift removes the first item. Everything after it slides down a place.

What this code doesunshift("Ada") puts Ada first. shift() removes whoever is first. Think of a queue: people join the back (push) and leave the front (shift).

app.js

const queue = ["Bayo", "Chi"];

queue.unshift("Ada"); // add to the front
console.log(queue);

queue.shift();        // remove the front
console.log(queue);

OUTPUT   TERMINAL

➜ webbo3 node app.js
[ 'Ada', 'Bayo', 'Chi' ]
[ 'Bayo', 'Chi' ]

Method	What it does	Which end
`push()`	Add an item	end
`pop()`	Remove an item	end
`unshift()`	Add an item	start
`shift()`	Remove an item	start

3. Checking if a Value is There

includes asks whether a value is in the array, and answers true or false. Perfect for "do we already have this?"

What this code doescart.includes("oil") is true, cart.includes("sugar") is false. A clean way to avoid adding something twice.

app.js

const cart = ["rice", "oil", "salt"];

console.log(cart.includes("oil"));   // is oil in the cart?
console.log(cart.includes("sugar")); // is sugar in the cart?

OUTPUT   TERMINAL

➜ webbo3 node app.js
true
false

Today’s Mini Project

🛒 Dynamic Shopping List

Start with a short list, then add and remove items, and refuse to add something that is already there. This is how a real cart behaves.

What this code doesincludes stops a duplicate, push/pop work the end, unshift works the front. Five methods, one living list.

app.js

const shopping = ["rice", "beans"];

// add oil, but only if it is not already on the list
if (!shopping.includes("oil")) {
  shopping.push("oil");
}
console.log("After adding oil: " + shopping);

// remove whatever is last
shopping.pop();
console.log("After removing the last: " + shopping);

// add to the front
shopping.unshift("milk");
console.log("After adding milk to the front: " + shopping);

OUTPUT   TERMINAL

➜ webbo3 node app.js
After adding oil: rice,beans,oil
After removing the last: rice,beans
After adding milk to the front: milk,rice,beans

Challenge (15 minutes)

Before adding "milk", check with includes that it is not already there, and print "Already have milk" if it is. Expected: running it twice does not add milk twice.

Try This

Make an array of three songs. push a fourth, then shift to remove the first. Print the list after each change.

Expected: four songs, then three, with the first one gone.

Picture This

A to-do list, a cart, a chat, a queue: all of them are an array growing and shrinking with exactly these methods. You now have the moves a real list needs.

Checkpoint

What is the difference between push and unshift?

push adds an item to the end of the array; unshift adds one to the start. pop and shift remove from the end and start.

What does includes return?

A boolean: true if the value is in the array, false if not. It is ideal for checking whether something is already in a list before adding it.

Why check includes before push?

To avoid adding the same value twice. If the value is already there, you skip the push, so the list has no duplicates.

Tick Before You Move On

☐ I can add and remove at the end with push and pop
☐ I can add and remove at the start with unshift and shift
☐ I can check membership with includes
☐ I built the Dynamic Shopping List

Quick Recap

Array methods are built-in tools that act on a list. push/pop add and remove at the end; unshift/shift at the start. includes checks whether a value is in the array. Together they let a list grow, shrink and stay free of duplicates.

Next: Day 12. A list of plain values is useful, but real things have several named details at once. Tomorrow you learn objects, for representing a whole thing.

Array Methods

1. Adding and Removing at the End

2. Adding and Removing at the Start

3. Checking if a Value is There

Today’s Mini Project

Checkpoint

Learn this with a real instructor