JavaScript Array Methods

Arrays are one of the most fundamental data structures in JavaScript, and the language gives you a powerful set of built-in methods to work with them. Once you understand these methods, you will find yourself writing cleaner, more expressive code instead of reaching for manual loops every time you need to process a list of data.

This post covers the most commonly used JavaScript array methods with real examples. Bookmark this one, because you will refer back to it often.

The Core Methods You Need to Know

push() and pop()

These two methods add and remove items from the end of an array. They are the simplest place to start.

const fruits = ["apple", "banana"];

fruits.push("mango");
console.log(fruits); // ["apple", "banana", "mango"]

fruits.pop();
console.log(fruits); // ["apple", "banana"]

shift() and unshift()

These work the same way as push() and pop(), but they operate on the beginning of an array. unshift() adds an item to the front, and shift() removes one.

const fruits = ["apple", "banana"];

fruits.unshift("strawberry");
console.log(fruits); // ["strawberry", "apple", "banana"]

fruits.shift();
console.log(fruits); // ["apple", "banana"]

Transforming Arrays

map()

map() creates a new array by applying a function to every element. The original array is not changed. This is one of the most useful methods you will use day to day.

const prices = [10, 20, 30];
const discounted = prices.map(price => price * 0.9);

console.log(discounted); // [9, 18, 27]

filter()

filter() returns a new array containing only the elements that pass a test you define. Think of it as a sieve for your data.

const scores = [45, 72, 58, 91, 33];
const passing = scores.filter(score => score >= 60);

console.log(passing); // [72, 91]

reduce()

reduce() is the powerhouse of array methods. It processes every element and accumulates a single result. It takes a callback function and an initial value as arguments.

const numbers = [1, 2, 3, 4, 5];
const total = numbers.reduce((accumulator, current) => accumulator + current, 0);

console.log(total); // 15

The accumulator holds the running result, and current is the element being processed on each pass.

Searching Arrays

find() and findIndex()

find() returns the first element that matches your condition. findIndex() returns its position instead of the value. Both return undefined or -1 respectively if no match is found.

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Carol" }
];

const user = users.find(u => u.id === 2);
console.log(user); // { id: 2, name: "Bob" }

const index = users.findIndex(u => u.id === 2);
console.log(index); // 1

includes()

For simple value checks, includes() returns true or false. It is straightforward and readable.

const colors = ["red", "green", "blue"];
console.log(colors.includes("green")); // true
console.log(colors.includes("yellow")); // false

Flattening and Combining

flat() and flatMap()

When you have nested arrays, flat() collapses them into a single level. flatMap() combines a map() and a flat() in one step.

const nested = [1, [2, 3], [4, [5, 6]]];
console.log(nested.flat());    // [1, 2, 3, 4, [5, 6]]
console.log(nested.flat(2));   // [1, 2, 3, 4, 5, 6]

A Quick Reference Summary

• push() / pop(): add or remove from the end
• unshift() / shift(): add or remove from the beginning
• map(): transform every element into a new array
• filter(): keep only elements that pass a test
• reduce(): accumulate all elements into a single value
• find() / findIndex(): locate the first matching element
• includes(): check if a value exists in the array
• flat() / flatMap(): collapse nested arrays

Resources to Go Deeper

• MDN Web Docs: Array - the definitive reference for every array method
• JavaScript.info: Array Methods - beginner-friendly explanations with interactive examples
• freeCodeCamp: JavaScript Algorithms and Data Structures - free hands-on practice

What's Next

Now that you have a solid grasp of array methods, the next logical step is understanding JavaScript Objects. Arrays store ordered lists, but objects let you model structured data with named properties. Knowing how the two work together is a fundamental skill for any JavaScript developer, and that is exactly what we will cover in the next post.