JavaScript Array Functions Cheatsheet

Arrays are fundamental building blocks in JavaScript, and mastering array methods can significantly improve your coding efficiency. In this comprehensive guide, we’ll explore the most useful array functions with practical examples that you can start using in your projects today.

Contents

Adding and Removing Elements

Let’s start with the basics of manipulating array contents. These methods are the foundation of array operations in JavaScript.

push() and pop()

The push() method adds elements to the end of an array, while pop() removes the last element.

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

// Adding elements
fruits.push('orange');  // Returns 3 (new length)
console.log(fruits);    // ['apple', 'banana', 'orange']

// Removing elements
const lastFruit = fruits.pop();  // Returns 'orange'
console.log(fruits);            // ['apple', 'banana']

unshift() and shift()

Similar to push and pop, but these methods work from the beginning of the array.

const numbers = [2, 3];

// Adding to the start
numbers.unshift(1);     // Returns 3 (new length)
console.log(numbers);   // [1, 2, 3]

// Removing from the start
const firstNumber = numbers.shift();  // Returns 1
console.log(numbers);                // [2, 3]

Transforming Arrays

These methods help you create new arrays based on existing ones, which is essential for functional programming.

map()

The map() method creates a new array by transforming each element through a function.

const prices = [10, 20, 30];
const withTax = prices.map(price => price * 1.2);
console.log(withTax);  // [12, 24, 36]

filter()

Use filter() to create a new array containing only elements that pass a test condition.

const scores = [75, 48, 95, 60, 85];
const passingScores = scores.filter(score => score >= 60);
console.log(passingScores);  // [75, 95, 60, 85]

reduce()

The reduce() method is powerful for combining all array elements into a single value.

const transactions = [100, -50, 25, -15, 40];
const balance = transactions.reduce((sum, transaction) => sum + transaction, 0);
console.log(balance);  // 100

Searching and Sorting

These methods help you find elements and organize your arrays.

find() and findIndex()

The find() method returns the first element that matches a condition, while findIndex() returns its index.

const users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' }
];

const jane = users.find(user => user.name === 'Jane');
console.log(jane);  // { id: 2, name: 'Jane' }

const janeIndex = users.findIndex(user => user.name === 'Jane');
console.log(janeIndex);  // 1

sort()

The sort() method arranges array elements in place. Remember to provide a comparison function for numbers!

const fruits = ['banana', 'apple', 'orange'];
fruits.sort();
console.log(fruits);  // ['apple', 'banana', 'orange']

const numbers = [23, 5, 100, 56, 9];
numbers.sort((a, b) => a - b);
console.log(numbers);  // [5, 9, 23, 56, 100]

Array Inspection Methods

These methods help you examine array contents without modifying them.

includes() and some()

Use includes() for simple value checking, and some() for more complex conditions.

const numbers = [1, 2, 3, 4, 5];

console.log(numbers.includes(3));  // true

const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven);  // true

every()

Check if all elements satisfy a condition.

const ages = [19, 21, 25, 18];
const allAdults = ages.every(age => age >= 18);
console.log(allAdults);  // true

Slicing and Combining Arrays

These methods help you work with portions of arrays or combine multiple arrays.

slice() and splice()

slice() creates a new array from a portion of an existing array, while splice() modifies the original array.

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];

// slice() - doesn't modify original array
const spring = months.slice(2, 4);
console.log(spring);  // ['Mar', 'Apr']

// splice() - modifies original array
months.splice(1, 2, 'February');
console.log(months);  // ['Jan', 'February', 'Apr', 'May']

concat() and spread operator

Both methods can combine arrays, but the spread operator is often more readable.

const arr1 = [1, 2];
const arr2 = [3, 4];

// Using concat
const combined1 = arr1.concat(arr2);

// Using spread operator
const combined2 = [...arr1, ...arr2];

console.log(combined1);  // [1, 2, 3, 4]
console.log(combined2);  // [1, 2, 3, 4]

Best Practices and Performance Tips

  1. Always consider whether you need to modify the original array or create a new one
  2. Use map(), filter(), and reduce() for functional programming approaches
  3. Remember that sort() modifies the original array – make a copy first if needed
  4. For large arrays, consider using for loops instead of array methods for better performance
  5. Use includes() for simple value checking instead of indexOf() !== -1

Conclusion

JavaScript array methods are powerful tools that can make your code more readable and maintainable. By understanding and using these methods effectively, you can write more elegant and efficient code. Remember to consider the performance implications when working with large datasets, and choose the most appropriate method for your specific use case.

Feel free to bookmark this cheatsheet and refer back to it whenever you need a quick refresher on JavaScript array methods!