Introduction

Arrays are a fundamental part of JavaScript, allowing developers to store and manipulate collections of data efficiently. Whether you're adding, removing, or transforming elements, understanding how JavaScript array methods work is crucial for writing effective code.

In this beginner-friendly guide, we'll cover everything you need to know about JavaScript array methods. We'll start with a quick overview of each method in a tabular form and then dive deep into explanations and examples. By the end of this tutorial, you'll not only understand how to use these methods but also how they affect the original array.

scroll to top ↑

JavaScript Array Methods: Cheatsheet

Here’s a quick reference table of JavaScript array methods and their purposes:

Understanding Array Mutability

Before diving into each method, it's important to understand how manipulating arrays can affect the original array.

In JavaScript, arrays are mutable, which means that methods like push(), pop(), shift(), unshift(), splice(), reverse(), and sort() will modify the original array. On the other hand, methods like slice(), concat(), map(), filter(), and reduce() return new arrays or values, leaving the original array unchanged.

Let’s explore this with examples.

1. push() Method

The push() method adds one or more elements to the end of an array and returns the new length of the array.

Example:

let fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits); // Output: ["apple", "banana", "orange"]

Effect on Original Array: The fruits array is modified by adding "orange" to the end.

2. pop() Method

The pop() method removes the last element from an array and returns that element.

Example:

let fruits = ["apple", "banana", "orange"];
let lastFruit = fruits.pop();
console.log(lastFruit); // Output: "orange"
console.log(fruits); // Output: ["apple", "banana"]

Effect on Original Array: The last element, "orange," is removed from the fruits array.

3. shift() Method

The shift() method removes the first element from an array and returns that element.

Example:

let fruits = ["apple", "banana", "orange"];
let firstFruit = fruits.shift();
console.log(firstFruit); // Output: "apple"
console.log(fruits); // Output: ["banana", "orange"]

Effect on Original Array: The first element, "apple," is removed from the fruits array.

4. unshift() Method

The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

Example:

let fruits = ["banana", "orange"];
fruits.unshift("apple");
console.log(fruits); // Output: ["apple", "banana", "orange"]

Effect on Original Array: The fruits array is modified by adding "apple" to the beginning.

5. slice() Method

The slice() method returns a shallow copy of a portion of an array into a new array object.

Example:

let fruits = ["apple", "banana", "orange", "mango"];
let citrus = fruits.slice(1, 3);
console.log(citrus); // Output: ["banana", "orange"]
console.log(fruits); // Output: ["apple", "banana", "orange", "mango"]

Effect on Original Array: The original fruits array remains unchanged.

6. splice() Method

The splice() method changes the contents of an array by removing, replacing, or adding elements.

Example:

let fruits = ["apple", "banana", "orange"];
fruits.splice(1, 1, "mango");
console.log(fruits); // Output: ["apple", "mango", "orange"]

Effect on Original Array: The fruits array is modified by replacing "banana" with "mango".

7. concat() Method

The concat() method merges two or more arrays into a new array.

Example:

let fruits = ["apple", "banana"];
let citrus = ["orange", "lemon"];
let allFruits = fruits.concat(citrus);
console.log(allFruits); // Output: ["apple", "banana", "orange", "lemon"]
console.log(fruits); // Output: ["apple", "banana"]

Effect on Original Array: The original fruits array remains unchanged.

8. join() Method

The join() method joins all elements of an array into a string.

Example:

let fruits = ["apple", "banana", "orange"];
let fruitString = fruits.join(", ");
console.log(fruitString); // Output: "apple, banana, orange"

Effect on Original Array: The original fruits array remains unchanged.

9. reverse() Method

The reverse() method reverses the order of the elements in an array.

Example:

let fruits = ["apple", "banana", "orange"];
fruits.reverse();
console.log(fruits); // Output: ["orange", "banana", "apple"]

Effect on Original Array: The fruits array is modified by reversing its elements.

10. sort() Method

The sort() method sorts the elements of an array in place and returns the sorted array.

Example:

let fruits = ["banana", "apple", "orange"];
fruits.sort();
console.log(fruits); // Output: ["apple", "banana", "orange"]

Effect on Original Array: The fruits array is sorted alphabetically.

11. map() Method

The map() method creates a new array populated with the results of calling a function on every element.

Example:

let numbers = [1, 2, 3, 4];
let doubled = numbers.map(x => x * 2);
console.log(doubled); // Output: [2, 4, 6, 8]

Effect on Original Array: The original numbers array remains unchanged.

12. filter() Method

The filter() method creates a new array with all elements that pass the test implemented by a function.

Example:

let numbers = [1, 2, 3, 4];
let evens = numbers.filter(x => x % 2 === 0);
console.log(evens); // Output: [2, 4]

Effect on Original Array: The original numbers array remains unchanged.

13. reduce() Method

The reduce() method executes a reducer function on each element of the array, resulting in a single output value.

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 10

Effect on Original Array: The original numbers array remains unchanged.

14. forEach() Method

The forEach() method executes a function once for each array element.

Example:

let fruits = ["apple", "banana", "orange"];
fruits.forEach(fruit => console.log(fruit));
// Output:
// apple
// banana
// orange

Effect on Original Array: The original fruits array remains unchanged.

15. find() Method

The find() method returns the value of the first element that satisfies the provided testing function.

Example:

let numbers = [1, 2, 3, 4];
let firstEven = numbers.find(x => x % 2 === 0);
console.log(firstEven); // Output: 2

Effect on Original Array: The original numbers array remains unchanged.

16. findIndex() Method

The findIndex() method returns the index of the first element that satisfies the provided testing function.

Example:

let numbers = [1, 2, 3, 4];
let firstEvenIndex = numbers.findIndex(x => x % 2 === 0);
console.log(firstEvenIndex); // Output: 1

Effect on Original Array: The original numbers array remains unchanged.

17. includes() Method

The includes() method determines whether an array includes a certain element.

Example:

let fruits = ["apple", "banana", "orange"];
let hasApple = fruits.includes("apple");
console.log(hasApple); // Output: true

Effect on Original Array: The original fruits array remains unchanged.

18. indexOf() Method

The indexOf() method returns the first index at which a given element can be found.

Example:

let fruits = ["apple", "banana", "orange"];
let indexOfBanana = fruits.indexOf("banana");
console.log(indexOfBanana); // Output: 1

Effect on Original Array: The original fruits array remains unchanged.

19. lastIndexOf() Method

The lastIndexOf() method returns the last index at which a given element can be found.

Example:

let fruits = ["apple", "banana", "orange", "banana"];
let lastIndexOfBanana = fruits.lastIndexOf("banana");
console.log(lastIndexOfBanana); // Output: 3

Effect on Original Array: The original fruits array remains unchanged.

scroll to bottom ↓

Feel free to bookmark this guide and refer back to it whenever you're working with arrays in JavaScript. 

Happy coding! 🚀