Array Methods
Learn the most important built-in array methods in JavaScript for adding, removing, and transforming arrays.
Array Methods
JavaScript arrays come with a powerful set of built-in methods. Instead of writing loops for every common operation — adding items, removing them, searching, sorting — these methods do the work for you in one line.
This topic covers the methods you will use constantly in real JavaScript code.
Adding and Removing Items
push() — add to the end
Adds one or more items to the end of an array. Returns the new length.
const fruits = ["apple", "mango"];
fruits.push("banana");
console.log(fruits); // ["apple", "mango", "banana"]
fruits.push("grape", "orange");
console.log(fruits); // ["apple", "mango", "banana", "grape", "orange"]pop() — remove from the end
Removes the last item and returns it.
const fruits = ["apple", "mango", "banana"];
const removed = fruits.pop();
console.log(removed); // "banana"
console.log(fruits); // ["apple", "mango"]unshift() — add to the beginning
Adds one or more items to the beginning of an array. Returns the new length.
const fruits = ["mango", "banana"];
fruits.unshift("apple");
console.log(fruits); // ["apple", "mango", "banana"]shift() — remove from the beginning
Removes the first item and returns it.
const fruits = ["apple", "mango", "banana"];
const removed = fruits.shift();
console.log(removed); // "apple"
console.log(fruits); // ["mango", "banana"]A quick way to remember these four:
| Method | Where | Action |
|---|---|---|
push() | End | Add |
pop() | End | Remove |
unshift() | Beginning | Add |
shift() | Beginning | Remove |
splice() — Add or Remove Anywhere
splice() is the most flexible method for modifying arrays. It can remove items, insert items, or replace items — at any position.
array.splice(startIndex, deleteCount, ...itemsToAdd)startIndex— where to startdeleteCount— how many items to removeitemsToAdd— optional items to insert at that position
Removing items
const fruits = ["apple", "mango", "banana", "grape"];
const removed = fruits.splice(1, 2); // start at index 1, remove 2 items
console.log(removed); // ["mango", "banana"]
console.log(fruits); // ["apple", "grape"]Inserting items
const fruits = ["apple", "grape"];
fruits.splice(1, 0, "mango", "banana"); // start at 1, remove 0, insert two
console.log(fruits); // ["apple", "mango", "banana", "grape"]Replacing items
const fruits = ["apple", "mango", "banana"];
fruits.splice(1, 1, "orange"); // remove 1 item at index 1, insert "orange"
console.log(fruits); // ["apple", "orange", "banana"]slice() — Copy a Portion
slice() returns a new array containing a portion of the original. It does not modify the original array.
array.slice(startIndex, endIndex)The endIndex is not included — it slices up to but not including that index.
const fruits = ["apple", "mango", "banana", "grape", "orange"];
console.log(fruits.slice(1, 3)); // ["mango", "banana"]
console.log(fruits.slice(2)); // ["banana", "grape", "orange"] — to the end
console.log(fruits.slice(-2)); // ["grape", "orange"] — last two items
console.log(fruits); // original unchangedA common use — copying an entire array:
const copy = fruits.slice();concat() — Merge Arrays
concat() merges two or more arrays into a new array without modifying the originals.
const first = [1, 2, 3];
const second = [4, 5, 6];
const combined = first.concat(second);
console.log(combined); // [1, 2, 3, 4, 5, 6]
console.log(first); // [1, 2, 3] — unchangedYou can concat multiple arrays at once:
const a = [1, 2];
const b = [3, 4];
const c = [5, 6];
console.log(a.concat(b, c)); // [1, 2, 3, 4, 5, 6]In modern JavaScript the spread operator is often preferred for this — covered in the Spread topic.
Searching
indexOf() — find the index of a value
Returns the index of the first match. Returns -1 if not found.
const fruits = ["apple", "mango", "banana", "mango"];
console.log(fruits.indexOf("mango")); // 1 — first occurrence
console.log(fruits.indexOf("grape")); // -1 — not foundlastIndexOf() — find the last occurrence
console.log(fruits.lastIndexOf("mango")); // 3 — last occurrenceincludes() — check if a value exists
Returns true or false. Cleaner than checking if indexOf returns -1.
const fruits = ["apple", "mango", "banana"];
console.log(fruits.includes("mango")); // true
console.log(fruits.includes("grape")); // falseflat() — Flatten Nested Arrays
flat() creates a new array with nested arrays flattened into it.
const nested = [1, [2, 3], [4, [5, 6]]];
console.log(nested.flat()); // [1, 2, 3, 4, [5, 6]] — one level deep
console.log(nested.flat(2)); // [1, 2, 3, 4, 5, 6] — two levels deep
console.log(nested.flat(Infinity)); // flattens no matter how deepjoin() — Convert Array to String
join() joins all items into a single string, separated by whatever you pass in.
const words = ["JavaScript", "is", "awesome"];
console.log(words.join(" ")); // "JavaScript is awesome"
console.log(words.join("-")); // "JavaScript-is-awesome"
console.log(words.join("")); // "JavaScriptisawesome"The opposite of join() is split() which lives on strings — it splits a string into an array.
const sentence = "JavaScript is awesome";
const words = sentence.split(" ");
console.log(words); // ["JavaScript", "is", "awesome"]reverse() — Reverse an Array
reverse() reverses the array in place — it modifies the original.
const numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // [5, 4, 3, 2, 1] — original is modifiedTo reverse without modifying the original, use toReversed() — a newer method:
const numbers = [1, 2, 3, 4, 5];
const reversed = numbers.toReversed();
console.log(reversed); // [5, 4, 3, 2, 1]
console.log(numbers); // [1, 2, 3, 4, 5] — unchangedsort() — Sort an Array
sort() sorts an array in place. By default it converts items to strings and sorts alphabetically.
const fruits = ["banana", "apple", "mango", "grape"];
fruits.sort();
console.log(fruits); // ["apple", "banana", "grape", "mango"]For numbers, the default sort gives wrong results:
const numbers = [10, 1, 5, 100, 25];
numbers.sort();
console.log(numbers); // [1, 10, 100, 25, 5] — wrong, sorted as stringsPass a comparison function for correct numeric sorting:
// Ascending
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 5, 10, 25, 100]
// Descending
numbers.sort((a, b) => b - a);
console.log(numbers); // [100, 25, 10, 5, 1]The comparison function works like this — if it returns a negative number, a comes first. If positive, b comes first. If zero, order stays the same.
Like reverse(), use toSorted() to sort without modifying the original:
const numbers = [10, 1, 5, 100, 25];
const sorted = numbers.toSorted((a, b) => a - b);
console.log(sorted); // [1, 5, 10, 25, 100]
console.log(numbers); // [10, 1, 5, 100, 25] — unchangedfill() — Fill With a Value
fill() fills all or part of an array with a static value.
const arr = [1, 2, 3, 4, 5];
arr.fill(0);
console.log(arr); // [0, 0, 0, 0, 0]
arr.fill(9, 2, 4); // fill with 9 from index 2 to 4
console.log(arr); // [0, 0, 9, 9, 0]Useful for creating arrays prefilled with a default value:
const zeros = new Array(5).fill(0);
console.log(zeros); // [0, 0, 0, 0, 0]A Real Example — Managing a Task List
const tasks = ["Write docs", "Review PR", "Fix bug", "Write tests"];
// Add a new urgent task at the beginning
tasks.unshift("Deploy hotfix");
// Mark the last task as done — remove it
const completed = tasks.pop();
console.log(`Completed: ${completed}`);
// Find and remove "Fix bug"
const index = tasks.indexOf("Fix bug");
if (index !== -1) {
tasks.splice(index, 1);
}
// Sort remaining tasks alphabetically
tasks.sort();
console.log("Remaining tasks:");
console.log(tasks.join("\n"));
// Completed: Write tests
// Remaining tasks:
// Deploy hotfix
// Review PR
// Write docsMethods That Modify vs Methods That Return New
This is an important distinction. Some methods change the original array — others leave it alone and return a new one.
| Modifies original | Returns new array |
|---|---|
push(), pop() | slice() |
shift(), unshift() | concat() |
splice() | flat() |
sort() | toSorted() |
reverse() | toReversed() |
fill() | map(), filter() (next topic) |
When working with data you do not want to accidentally change — use the methods in the right column or make a copy first.
Summary
push()/pop()— add and remove from the endunshift()/shift()— add and remove from the beginningsplice()— add, remove, or replace items anywhereslice()— copy a portion of an array without modifying itconcat()— merge arrays into a new oneindexOf()/includes()— search for valuesflat()— flatten nested arraysjoin()— convert array to a stringsort()/toSorted()— sort itemsreverse()/toReversed()— reverse items- Always be aware of whether a method modifies the original or returns a new array