← Back to JavaScript Course | Chapter 3: Strings, Arrays & Data | Lesson 4 of 6

JS Array Methods

Imagine a warehouse team with specialized workers, one who adds new boxes to the end of a shelf, one who finds a specific box, one who checks every box and reports back a summary, each with one clear job. JavaScript array methods are that specialized team for your data, push adds an item, find locates one, filter narrows a list down, and map transforms every item at once, all without you writing manual loops for common tasks. Real applications, including features across cookiescursor.com, rely heavily on these methods to process lists of tutorials, scores, or user data efficiently and readably.

In this page:

  1. Adding and Removing: push, pop, shift, unshift
  2. splice, slice, concat, and join
  3. indexOf and find
  4. filter and map
  5. reduce, forEach, and sort
Syntax
javascript 
array.push(item);
array.pop();
array.map(item => expression);
array.filter(item => condition);
array.slice(start, end);

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

javascript 
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

javascript 
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

javascript 
// Declare the constant `nums`, set to `[10, 20, 30]`
// Declare the constant `nums`, set to `[10, 20, 30]`
const nums = [10, 20, 30];
// Print `nums.indexOf(20)` to the console
// Print `nums.indexOf(20)` to the console
console.log(nums.indexOf(20));
// Print `nums.find(n => n > 15)` to the console
// Print `nums.find(n => n > 15)` to the console
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

javascript 
// Declare the constant `nums`, set to `[1, 2, 3, 4, 5]`
// Declare the constant `nums`, set to `[1, 2, 3, 4, 5]`
const nums = [1, 2, 3, 4, 5];
// Print `nums.filter(n => n % 2 === 0)` to the console
// Print `nums.filter(n => n % 2 === 0)` to the console
console.log(nums.filter(n => n % 2 === 0));
// Print `nums.map(n => n * 2)` to the console
// Print `nums.map(n => n * 2)` to the console
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

javascript 
// Declare the constant `nums`, set to `[4, 2, 7]`
// Declare the constant `nums`, set to `[4, 2, 7]`
const nums = [4, 2, 7];
// Print `nums.reduce((sum, n) => sum + n, 0)` to the console
// Print `nums.reduce((sum, n) => sum + n, 0)` to the console
console.log(nums.reduce((sum, n) => sum + n, 0));
// Call `nums.forEach(n => console.log(n))`
// Call `nums.forEach(n => console.log(n))`
nums.forEach(n => console.log(n));
// Print `[...nums].sort((a, b) => a - b)` to the console
// Print `[...nums].sort((a, b) => a - b)` to the console
console.log([...nums].sort((a, b) => a - b));
Live Example
Related Topics

JS String Methods · JS DOM Methods · JS Arrays · JS Numbers

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Confusing map(), which returns a new transformed array, with forEach(), which returns nothing and is used only for side effects.
  2. Forgetting that filter() and map() return new arrays, leaving the original array completely unchanged.
  3. Using push() and expecting a new array back, push() modifies the array in place and returns the new length, not the array itself.
Chapter Summary
  • 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.
Browser Support

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:

← Previous Lesson JS Arrays Next Lesson → JS Numbers

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.