JavaScript Array Methods

In the previous lesson, we learned how to create arrays and read their values. Now let’s learn the built-in array methods that let us add items, remove items, and search through an array.

🧰 What are Array Methods?

Array methods are functions that come built into every array. We call them with a dot after the array name, like numbers.push(5). They save us from writing the same logic by hand every time we want to change or inspect an array.

Here are the most common ones, with what each does and a quick example.

➕ Adding and Removing Items

Four methods handle the ends of an array. We use push and pop to work with the end, and unshift and shift to work with the start.

const fruits = ["apple", "banana"];

fruits.push("cherry"); // add to the end
console.log(fruits); // ["apple", "banana", "cherry"]

fruits.pop(); // remove from the end
console.log(fruits); // ["apple", "banana"]

fruits.unshift("mango"); // add to the start
console.log(fruits); // ["mango", "apple", "banana"]

fruits.shift(); // remove from the start
console.log(fruits); // ["apple", "banana"]

Let’s walk through how each method reshapes the same fruits array:

• fruits.push("cherry") tacks "cherry" onto the end, giving us three items.
• fruits.pop() strips off that last item again, leaving the original two.
• fruits.unshift("mango") slides "mango" in at the front, so it becomes the first item.
• fruits.shift() removes that first item, returning us to ["apple", "banana"].

The push and unshift methods return the new length of the array, while pop and shift return the item they removed.

const colors = ["red", "green"];

const removed = colors.pop();
console.log(removed); // "green"  → the item that was removed

Here colors.pop() removes "green" and hands it back, so the removed variable now holds the item we just took off the end.

🔍 Searching an Array

To find out whether an item is in an array, we use indexOf or includes. They answer slightly different questions.

The indexOf method tells us the position of an item, and returns -1 when the item is not found.

const animals = ["cat", "dog", "fish"];

console.log(animals.indexOf("dog")); // 1
console.log(animals.indexOf("bird")); // -1  → not found

These two lines show both outcomes:

• animals.indexOf("dog") returns 1 because "dog" sits at index 1 (counting from 0).
• animals.indexOf("bird") returns -1 because "bird" is not in the array at all.

The includes method is simpler when we only want a yes or no answer. It returns a boolean, true or false.

const animals = ["cat", "dog", "fish"];

console.log(animals.includes("dog")); // true
console.log(animals.includes("bird")); // false

The result is a plain yes-or-no answer:

• animals.includes("dog") returns true because "dog" is in the array.
• animals.includes("bird") returns false because "bird" is missing.

✂️ slice vs splice

These two look alike but behave very differently. The slice method copies a section of the array into a brand new array and leaves the original untouched. The splice method changes the original array by removing or adding items.

const numbers = [10, 20, 30, 40];

// slice copies — original stays the same
const part = numbers.slice(1, 3);
console.log(part); // [20, 30]
console.log(numbers); // [10, 20, 30, 40]

// splice changes the original
numbers.splice(1, 1); // remove 1 item at index 1
console.log(numbers); // [10, 30, 40]

Let’s compare what each call does to numbers:

• numbers.slice(1, 3) copies the items from index 1 up to (but not including) index 3, returning [20, 30] as a new array.
• Logging numbers right after proves slice left the original [10, 20, 30, 40] untouched.
• numbers.splice(1, 1) removes 1 item starting at index 1, deleting 20 directly from the original.
• The final log shows numbers is now [10, 30, 40], because splice edited it in place.

🔗 Turning an Array into a String

The join method takes every item and glues them together into a single string. We choose the separator that goes between items.

const words = ["learn", "to", "code"];

console.log(words.join(" ")); // "learn to code"
console.log(words.join("-")); // "learn-to-code"

The separator we pass in decides what sits between the items:

• words.join(" ") puts a space between each item, producing "learn to code".
• words.join("-") uses a hyphen instead, producing "learn-to-code".

This is handy for building a sentence or a path from a list of pieces.

🔁 Methods That Change vs Methods That Return

This is the most important idea to hold onto. Some methods change the original array, and others leave it alone and hand back a new value. Mixing these up is a common source of bugs.

📝 A Practical Example: A To-Do List

Let’s put these methods together to manage a simple to-do list. We start with a few tasks, add and remove some, and check what is on the list.

const todos = ["wash dishes", "buy groceries"];

// Add a new task to the end
todos.push("walk the dog");
console.log(todos); // ["wash dishes", "buy groceries", "walk the dog"]

// Add an urgent task to the front
todos.unshift("call the dentist");
console.log(todos);
// ["call the dentist", "wash dishes", "buy groceries", "walk the dog"]

// Finish the first task and remove it
const done = todos.shift();
console.log(done); // "call the dentist"

// Check if a task is on the list
console.log(todos.includes("buy groceries")); // true

// Remove a specific task by finding its position
const index = todos.indexOf("buy groceries");
todos.splice(index, 1);
console.log(todos); // ["wash dishes", "walk the dog"]

// Show the list as one readable string
console.log(todos.join(", ")); // "wash dishes, walk the dog"

Let’s follow the to-do list step by step:

• todos.push("walk the dog") adds a new task to the end of the list.
• todos.unshift("call the dentist") puts an urgent task at the very front.
• todos.shift() removes that first task and stores it in done, since shift returns the removed item.
• todos.includes("buy groceries") returns true, confirming the task is still on the list.
• todos.indexOf("buy groceries") finds the task’s position, then todos.splice(index, 1) removes one item at that position.
• todos.join(", ") glues the remaining tasks into one readable string.

With just these methods, we can add, remove, search, and display the items in any list.

⚠️ Common Mistakes to Avoid

Here is the difference between the right and wrong existence check:

const names = ["Alex", "Sam"];

// ❌ Wrong — misses the first item at index 0
if (names.indexOf("Alex") > 0) {
  console.log("found");
}

// ✅ Correct
if (names.includes("Alex")) {
  console.log("found");
}

Let’s see why one check fails and the other works:

• "Alex" sits at index 0, so names.indexOf("Alex") returns 0, and 0 > 0 is false — the wrong check skips the item.
• names.includes("Alex") returns true no matter the position, so the correct check always finds the item.

🔧 Try It Yourself!

🧩 What You’ve Learned

• ✅ push, pop, unshift, and shift add and remove items at the ends
• ✅ indexOf returns a position (or -1), and includes returns true or false
• ✅ slice copies part of an array, while splice edits the array in place
• ✅ join turns an array into a single string
• ✅ push, pop, shift, unshift, and splice mutate the array; slice, join, includes, and indexOf return a new value

🚀 What’s Next?

Now that we can add, remove, and search, let’s learn the most useful iteration method for transforming an array. Let’s continue to The map() Method.