Array Methods

By the end of this lesson, you will be able to add, remove, and transform JavaScript array elements using common array methods.

What it is

An array method is a function that operates on an array instance, such as list.push(4) or list.pop(). Think of an array as a row of boxes with numbered positions. Some methods change the boxes in place, while others return a new array or a single value.

Key terms: mutating methods change the original array; non-mutating methods leave it unchanged. Common methods include push, pop, shift, unshift, splice, slice, map, filter, reduce, and forEach.

Why it matters

• Add items to the end or start of a list without manual index math.
• Remove items from either end or by position.
• Transform data, such as converting strings to uppercase or extracting matching records.
• Summarize arrays into a single value, such as a total or average.
• Write clearer code than many manual for loops.

Syntax or steps

For adding and removing, call the method on the array:

list.push(value);    // add to end
list.pop();          // remove from end
list.unshift(value); // add to start
list.shift();        // remove from start

For transforming, pass a callback function:

const result = list.map(item => item * 2);

Steps: choose whether you need to change the original array or create a new one, call the method, and store the returned value if needed.

Example

const tasks = ["email", "call"];

tasks.push("review");
const last = tasks.pop();
const first = tasks.shift();
tasks.unshift("plan");

const upper = tasks.map(task => task.toUpperCase());
const long = tasks.filter(task => task.length > 3);
const totalLength = tasks.reduce((sum, task) => sum + task.length, 0);

console.log(tasks);
console.log(upper);
console.log(long);
console.log(totalLength);

Explanation: push adds "review", then pop removes it and stores it in last. shift removes "email", and unshift adds "plan" to the start. map returns a new array with uppercase strings. filter returns only tasks longer than three characters. reduce adds each task length to produce a total.

Common mistakes

• Assuming map or filter changes the original array. They return new arrays; assign the result if you need it.
• Calling pop or shift on an empty array. They return undefined, which can cause errors later.
• Confusing splice with slice. splice mutates the array; slice returns a copy.
• Forgetting to return the accumulator in reduce, such as writing (sum, item) => { sum + item; } instead of (sum, item) => sum + item.

When to use it

Use mutating methods when you are managing a live list, such as a shopping cart. Use non-mutating methods when you want to derive a new view without changing the source data.

Practice

Guided exercise: start with const nums = [1, 2, 3];. Add 4, remove the last item, then create a new array where each number is squared.

const nums = [1, 2, 3];
nums.push(4);
nums.pop();
const squares = nums.map(n => n * n);
console.log(squares);

Expected output: [1, 4, 9].

Challenge: remove the first item from nums and return the remaining items as a string joined by commas. Hint: use shift and join.

Quick check

Question: Which method returns a new array with only items that pass a test?

Answer: filter.

Summary

Array methods give JavaScript a consistent way to add, remove, and transform list data. Choose mutating methods when the original array should change, and non-mutating methods when you need a new result. This keeps code shorter, clearer, and easier to reason about.