JavaScript Array Methods Guide

Arrays are a core part of JavaScript. They store lists of data. To work with them, you need array methods. These methods help you add, remove, find, and transform data quickly.

This guide covers the most important JavaScript array methods. You will see clear examples. Each method is explained in simple terms. By the end, you will use arrays with confidence.

Why Use Array Methods?

Array methods make your code shorter and cleaner. Instead of writing loops, you call a single method. This improves readability. It also reduces bugs.

For example, imagine you have a list of numbers. You want to double each number. Without a method, you write a for loop. With map, you do it in one line.

Methods also chain together. You can filter, then map, then sort. This creates powerful data pipelines.

Common JavaScript Array Methods

push() and pop()

push() adds an item to the end of an array. pop() removes the last item. These methods change the original array.

Example:

// Create an array
let fruits = ['apple', 'banana'];
console.log('Original:', fruits);

// Add a fruit
fruits.push('orange');
console.log('After push:', fruits);

// Remove the last fruit
let last = fruits.pop();
console.log('Popped fruit:', last);
console.log('After pop:', fruits);

Output:

Original: ['apple', 'banana']
After push: ['apple', 'banana', 'orange']
Popped fruit: orange
After pop: ['apple', 'banana']

shift() and unshift()

shift() removes the first item. unshift() adds an item to the start. These also change the original array.

Example:

let numbers = [10, 20, 30];

// Remove first
let first = numbers.shift();
console.log('Removed:', first);
console.log('After shift:', numbers);

// Add to start
numbers.unshift(5);
console.log('After unshift:', numbers);

Output:

Removed: 10
After shift: [20, 30]
After unshift: [5, 20, 30]

map()

map() creates a new array. It runs a function on each item. The result is a transformed array. The original array stays the same.

Example:

let prices = [10, 20, 30];
// Add tax of 10% to each price
let withTax = prices.map(price => price * 1.1);
console.log('Original prices:', prices);
console.log('Prices with tax:', withTax);

Output:

Original prices: [10, 20, 30]
Prices with tax: [11, 22, 33]

map() is perfect for transforming data. You can convert strings to numbers, objects to strings, and more.

filter()

filter() creates a new array. It keeps only items that pass a test. The test is a function that returns true or false.

Example:

let ages = [15, 22, 18, 30, 12];
// Keep only adults (age >= 18)
let adults = ages.filter(age => age >= 18);
console.log('All ages:', ages);
console.log('Adults:', adults);

Output:

All ages: [15, 22, 18, 30, 12]
Adults: [22, 18, 30]

reduce()

reduce() reduces an array to a single value. It runs a function on each item. It keeps an accumulator. You can sum numbers, concatenate strings, or build objects.

Example:

let scores = [5, 10, 15];
// Sum all scores
let total = scores.reduce((accumulator, current) => accumulator + current, 0);
console.log('Scores:', scores);
console.log('Total:', total);

Output:

Scores: [5, 10, 15]
Total: 30

The second argument to reduce() is the starting value. Here it is 0.

find()

find() returns the first item that passes a test. If no item passes, it returns undefined.

Example:

let users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];
// Find the first user older than 28
let user = users.find(u => u.age > 28);
console.log('Found user:', user);

Output:

Found user: { name: 'Bob', age: 30 }

includes()

includes() checks if an array contains a value. It returns true or false.

Example:

let colors = ['red', 'green', 'blue'];
console.log('Has green?', colors.includes('green'));
console.log('Has yellow?', colors.includes('yellow'));

Output:

Has green? true
Has yellow? false

indexOf()

indexOf() returns the index of an item. If not found, it returns -1.

Example:

let animals = ['cat', 'dog', 'bird'];
let index = animals.indexOf('dog');
console.log('Index of dog:', index);
console.log('Index of fish:', animals.indexOf('fish'));

Output:

Index of dog: 1
Index of fish: -1

slice()

slice() returns a copy of a part of an array. It does not change the original. You give start and end indexes.

Example:

let letters = ['a', 'b', 'c', 'd', 'e'];
// Get items from index 1 to 3 (end not included)
let sliced = letters.slice(1, 4);
console.log('Original:', letters);
console.log('Sliced:', sliced);

Output:

Original: ['a', 'b', 'c', 'd', 'e']
Sliced: ['b', 'c', 'd']

splice()

splice() changes the original array. It can add, remove, or replace items. It returns the removed items.

Example:

let items = ['pen', 'book', 'ruler'];
// Remove 1 item at index 1
let removed = items.splice(1, 1);
console.log('Removed:', removed);
console.log('After splice:', items);

// Add item at index 1
items.splice(1, 0, 'eraser');
console.log('After adding:', items);

Output:

Removed: ['book']
After splice: ['pen', 'ruler']
After adding: ['pen', 'eraser', 'ruler']

sort()

sort() sorts the array. By default, it sorts as strings. For numbers, you need a compare function.

Example:

let nums = [30, 5, 100, 20];
// Default sort (as strings)
let sortedDefault = [...nums].sort();
console.log('Default sort:', sortedDefault);

// Numeric sort (ascending)
let sortedAsc = [...nums].sort((a, b) => a - b);
console.log('Ascending sort:', sortedAsc);

Output:

Default sort: [100, 20, 30, 5]
Ascending sort: [5, 20, 30, 100]

Chaining Methods

You can chain methods together. This makes code compact. For example, you can filter, then map, then sort.

let numbers = [1, 2, 3, 4, 5, 6];
// Get even numbers, double them, then sort descending
let result = numbers
  .filter(n => n % 2 === 0)   // [2, 4, 6]
  .map(n => n * 2)            // [4, 8, 12]
  .sort((a, b) => b - a);     // [12, 8, 4]
console.log('Result:', result);

Output:

Result: [12, 8, 4]

Working with Array Variables

Understanding array variables is key. Arrays are objects. They are passed by reference. This means if you assign an array to a new variable, both point to the same data.

For more details, read our JavaScript Array Variables Guide. It explains copying and spreading arrays.

Common Pitfalls

Beginners often forget that sort() changes the original array. Always make a copy first if needed.

Another mistake is using map() without returning a value. map() expects a return. If you forget, you get undefined items.

Also, filter() does not change the original. It returns a new array. This is good for immutability.

Conclusion

JavaScript array methods are powerful tools. They help you write clean, efficient code. You learned push, pop, map, filter, reduce, and more.

Practice each method with small examples. Chain them to solve real problems. As you get comfortable, explore methods like some, every, and flat.

Remember the JavaScript Array Variables Guide for deeper understanding. Keep coding and experimenting. Arrays are your friends.