JavaScript Array Methods Cheat Sheet

Introduction

Arrays are one of the most critical structures in JavaScript. Understanding array methods can boost your productivity in web development by allowing you to handle, transform, and manipulate data efficiently. Here’s a comprehensive cheat sheet of the most-used JavaScript array methods, complete with explanations and code examples.

Basic Array Creation

const fruits = ['apple', 'banana', 'cherry'];
const numbers = [1, 2, 3, 4, 5];

Accessing Items

• Access by index: fruits[0]; // 'apple'
• Last item: fruits[fruits.length - 1]; // 'cherry'

Most-Used JavaScript Array Methods

Adding and Removing Items

push() – Adds to end

fruits.push('date'); // ['apple', 'banana', 'cherry', 'date']

pop() – Removes from end

fruits.pop(); // ['apple', 'banana', 'cherry']

unshift() – Adds to start

fruits.unshift('apricot'); // ['apricot', 'apple', ...]

shift() – Removes from start

fruits.shift(); // ['apple', 'banana', 'cherry']

splice() – Add/remove at any index

fruits.splice(1, 1, 'blueberry'); // ['apple', 'blueberry', 'cherry']

slice() – Copy part of array

const firstTwo = fruits.slice(0, 2); // ['apple', 'banana']

Iteration and Transformation

forEach() – Run function for each item

fruits.forEach(fruit => console.log(fruit));

map() – Create new array from function

const upper = fruits.map(fruit => fruit.toUpperCase()); // ['APPLE', ...]

filter() – Filter items by test

const filtered = numbers.filter(num => num > 2); // [3, 4, 5]

reduce() – Accumulate to single value

const sum = numbers.reduce((total, num) => total + num, 0); // 15

find() – Find first matching item

const result = fruits.find(fruit => fruit.startsWith('b')); // 'banana'

some() – Is there at least one match?

fruits.some(fruit => fruit.length > 6); // true

every() – Do all items match a test?

fruits.every(fruit => typeof fruit === 'string'); // true

Other Useful Methods

includes() – Check for presence

fruits.includes('banana'); // true

indexOf() – Find index

fruits.indexOf('cherry'); // 2

join() – Create string

fruits.join(', '); // 'apple, banana, cherry'

concat() – Combine arrays

const all = fruits.concat(['date', 'elderberry']);

reverse() – Invert order

fruits.reverse();

sort() – Sort array

numbers.sort((a, b) => a - b); // [1,2,3,4,5]

flat() – Flatten nested arrays

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

Modern Features (ES2022+)

at() – Access by positive/negative index

fruits.at(-1); // Last item: 'cherry'

toSorted() – Immutable sort

const sorted = numbers.toSorted();

toReversed() – Immutable reverse

const reversed = fruits.toReversed();

findLast() – Find last match from end

numbers.findLast(num => num % 2 === 0); // 4

Quick Reference Table

Method	Description
push()	Add to end
pop()	Remove from end
unshift()	Add to start
shift()	Remove from start
map()	Transform
filter()	Filter items
reduce()	Reduce to value
find()	Find first match
some()	Any match?
every()	All match?
includes()	Check presence
at()	Access by index

Conclusion

This cheat sheet will help you quickly reference and apply the most important JavaScript array methods in your web projects. Mastering these functions empowers you to process, validate, and transform data efficiently for modern web applications.