JavaScript Array Methods Every Beginner Should Know

What Are JavaScript Array Methods?

An array in JavaScript is a list of values, such as numbers, strings, or objects. Array methods are built-in functions that let you add, remove, search, transform, or combine the values in an array without writing that logic yourself.

Take a simple starting array:

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

Every method below works with an array like this one. Knowing which method to reach for is often more useful than memorizing syntax, so this guide groups methods by what they actually do.

Adding and Removing Elements

push() and pop()

array.push(item)   // adds to the end
array.pop()        // removes from the end

numbers.push(60);
// [10, 20, 30, 40, 50, 60]

numbers.pop();
// [10, 20, 30, 40, 50]

push() adds an item to the end of an array; pop() removes the last item. Both change (mutate) the original array, and both are commonly used to manage lists that grow or shrink, like a shopping cart.

shift() and unshift()

array.shift()        // removes from the start
array.unshift(item)  // adds to the start

numbers.shift();
// [20, 30, 40, 50]

numbers.unshift(5);
// [5, 20, 30, 40, 50]

shift() and unshift() work like push() and pop(), but at the beginning of the array instead of the end. They are slightly slower on large arrays because every remaining item has to shift position.

slice() vs splice()

array.slice(start, end)    // copies a portion, does NOT change original
array.splice(start, count) // removes/inserts, DOES change original

numbers.slice(1, 3);
// [20, 30] (original array unchanged)

numbers.splice(1, 2);
// removes 20 and 30 from the original array

This is one of the most common beginner mix-ups. slice() returns a new array and leaves the original untouched, so it's safe to use when you just need a copy. splice() edits the original array directly by removing, replacing, or inserting items, so use it only when you actually want to change the source array.

Searching an Array

includes() and indexOf()

array.includes(value)  // returns true/false
array.indexOf(value)   // returns index, or -1

numbers.includes(30);  // true
numbers.indexOf(30);   // 2
numbers.indexOf(99);   // -1

Use includes() when you only need a yes/no answer. Use indexOf() when you need to know exactly where a value is, for example to remove or update it afterward.

find() and findIndex()

array.find(callback)       // returns the matching value
array.findIndex(callback)  // returns the matching index

numbers.find(n => n > 25);       // 30
numbers.findIndex(n => n > 25);  // 2

find() and findIndex() work with a condition instead of an exact value, which makes them useful for arrays of objects, such as finding a user by ID.

Looping Through an Array

forEach()

array.forEach(callback)

numbers.forEach(n => console.log(n * 2));
// logs 20, 40, 60, 80, 100

forEach() runs a function once for every item in the array. It does not return a new array, so it's best for side effects like logging or updating the page, not for building new data.

map()

array.map(callback)

const doubled = numbers.map(n => n * 2);
// [20, 40, 60, 80, 100]

map() also runs a function on every item, but it returns a brand-new array built from the results, leaving the original array unchanged. Use map() whenever you need a transformed version of your data.

map() vs forEach(): choose map() when you need the transformed values back as a new array; choose forEach() when you just need to perform an action, like printing to the console, for each item.

Filtering and Testing

filter()

array.filter(callback)

const big = numbers.filter(n => n > 25);
// [30, 40, 50]

filter() returns a new array containing only the items that pass a test. It's the standard way to shorten a list based on a condition, such as showing only in-stock products.

filter() vs find(): filter() returns every matching item as a new array, while find() returns only the first matching item and stops searching.

some() and every()

array.some(callback)   // true if ANY item matches
array.every(callback)  // true if ALL items match

numbers.some(n => n > 45);  // true
numbers.every(n => n > 5);  // true

some() checks whether at least one item satisfies a condition; every() checks whether all items do. Both return a single true/false value rather than a new array.

Transforming and Calculating

reduce()

array.reduce((accumulator, current) => { ... }, initialValue)

const total = numbers.reduce((sum, n) => sum + n, 0);
// 150

reduce() combines every item in an array into a single value, such as a total, average, or count. It's more advanced than the other methods, so it's normal to start with map() and filter() first and learn reduce() once those feel comfortable.

sort() and reverse()

array.sort()     // sorts in place
array.reverse()  // reverses in place

const nums = [40, 10, 30];
nums.sort((a, b) => a - b);
// [10, 30, 40]

sort() rearranges elements in place and, for numbers, needs a comparison function like (a, b) => a - b to sort correctly, since it sorts as text by default. reverse() simply flips the current order of the array.

Modern and Useful Methods

join()

array.join(separator)

numbers.join(", ");
// "10, 20, 30, 40, 50"

join() turns an array into a single readable string, which is useful for displaying a list of values on a page.

flat() and flatMap()

array.flat(depth)
array.flatMap(callback)

[1, [2, 3], [4]].flat();
// [1, 2, 3, 4]

flat() flattens nested arrays into a single-level array, while flatMap() maps each item and flattens the result in one step. These are handy when working with arrays of arrays, such as grouped data.

Array Methods Cheat Sheet

Common Beginner Mistakes

• Assuming slice() and splice() do the same thing — only splice() changes the original array.

• Using sort() on numbers without a comparison function, which sorts them as text (e.g., 100 before 20).

• Expecting forEach() to return a new array — it always returns undefined, so use map() instead.

• Using find() when multiple matches are needed — filter() returns all of them, find() returns only the first.

• Forgetting that push(), pop(), splice(), sort(), and reverse() mutate the original array, which can cause unexpected bugs elsewhere in the code.

Which Array Method Should You Use?

If you need to transform every item into something new, use map(). If you need to keep only some items, use filter(). If you need one combined result like a total, use reduce(). If you just need to perform an action for each item, use forEach(). And if you're checking for a single match or a true/false answer, reach for find(), includes(), some(), or every() depending on exactly what you need back.

Frequently Asked Questions

What is the difference between map() and forEach() in JavaScript?

map() returns a new array containing the transformed values, while forEach() runs a function on each item but always returns undefined. Use map() when you need the results back; use forEach() for actions like logging.

What is the difference between slice() and splice()?

slice() copies a portion of an array into a new array and does not change the original. splice() removes, replaces, or inserts items directly in the original array, changing it permanently.

Which JavaScript array method should I use to filter data?

Use filter() when you need every item that matches a condition, returned as a new array. Use find() instead if you only need the first matching item.

Does sort() change the original array in JavaScript?

Yes. sort() rearranges the elements of the original array in place. For numbers, always pass a comparison function like (a, b) => a - b, since sort() compares values as strings by default.

Related Reading

JavaScript Arrays • JavaScript Loops • JavaScript Functions • JavaScript Objects • JavaScript ES6 • JavaScript Arrow Functions • JavaScript DOM Manipulation •JavaScript Interview Questions