JS Array Methods
In this page:
Adding and Removing: push, pop, shift, unshift
push() adds an element to the end of an array, pop() removes the last element, unshift() adds an element to the beginning, and shift() removes the first element, all modifying the original array directly.
Note: push() and pop() are generally faster than unshift() and shift(), since adding or removing from the end avoids reindexing every other element.
Warning: pop() and shift() both return the removed element, not the modified array, which can be surprising if you expected the array itself back.
Example: Adding and Removing: push, pop, shift, unshift
const list = [2, 3];
list.push(4);
list.unshift(1);
console.log(list); // [1, 2, 3, 4]
list.pop();
list.shift();
console.log(list); // [2, 3]splice, slice, concat, and join
splice() adds or removes elements at any position and modifies the array in place, slice() extracts a portion without modifying the original, concat() combines arrays into a new one, and join() converts an array into a single string.
Note: Use slice() when you need a copy or portion without touching the original, and splice() specifically when you want to modify the array itself.
Warning: splice()'s arguments are easy to misremember, the second argument is how many elements to remove, not an end index like slice().
Example: splice, slice, concat, and join
const nums = [1, 2, 3, 4];
console.log(nums.slice(1, 3)); // [2, 3], original untouched
nums.splice(1, 1, "x");
console.log(nums); // [1, "x", 3, 4]
console.log([1, 2].concat([3, 4]));
console.log(nums.join("-"));indexOf and find
indexOf() returns the position of the first matching element or -1 if it's not found, while find() returns the first element that satisfies a given test function, or undefined if none match.
Note: Use indexOf() for simple value matches, and find() when your search condition is more complex than a simple equality check.
Warning: indexOf() checks for exact matches, it cannot find an object by one of its properties, find() is required for that kind of search.
Example: indexOf and find
const nums = [10, 20, 30];
console.log(nums.indexOf(20));
console.log(nums.find(n => n > 15));filter and map
filter() creates a new array containing only elements that pass a given test, while map() creates a new array where every element has been transformed by a given function, both leave the original array untouched.
Note: filter() and map() are often chained together, filtering a list down first and then transforming what remains, all in one readable expression.
Warning: Both filter() and map() always return a new array, even if it's empty, they never modify the original array in place.
Example: filter and map
const nums = [1, 2, 3, 4, 5];
console.log(nums.filter(n => n % 2 === 0));
console.log(nums.map(n => n * 2));reduce, forEach, and sort
reduce() combines every element of an array into a single accumulated value, forEach() runs a function once for each element purely for side effects without returning anything useful, and sort() reorders an array's elements, by default treating them as strings unless given a custom compare function.
Note: For numeric sorting, always pass a compare function to sort(), like (a, b) => a - b, otherwise numbers sort incorrectly as text.
Warning: sort() modifies the original array in place, unlike filter and map, which is easy to forget when you only meant to preview a sorted order.
Example: reduce, forEach, and sort
const nums = [4, 2, 7];
console.log(nums.reduce((sum, n) => sum + n, 0));
nums.forEach(n => console.log(n));
console.log([...nums].sort((a, b) => a - b));- Confusing map(), which returns a new transformed array, with forEach(), which returns nothing and is used only for side effects.
- Forgetting that filter() and map() return new arrays, leaving the original array completely unchanged.
- Using push() and expecting a new array back, push() modifies the array in place and returns the new length, not the array itself.
- push, pop, shift, and unshift add or remove elements from the beginning or end of an array.
- filter, find, and map create new arrays or values based on a condition or transformation applied to each element.
- reduce combines every element into a single value, and forEach runs a function once for each element without returning anything.
All standard array methods covered here are supported in every modern browser and are considered a stable, foundational part of JavaScript.
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: