Commonly Used JavaScript Array Methods

1. push()

Adds one or more elements to the end of an array.

let arr = [1, 2, 3];
arr.push(4); // [1, 2, 3, 4]

2. pop()

Removes the last element from an array and returns it.

let arr = [1, 2, 3];
arr.pop(); // [1, 2]

3. shift()

Removes the first element from an array and returns it.

let arr = [1, 2, 3];
arr.shift(); // [2, 3]

4. unshift()

Adds one or more elements to the beginning of an array.

let arr = [2, 3];
arr.unshift(1); // [1, 2, 3]

5. slice()

Returns a shallow copy of a portion of an array.

let arr = [1, 2, 3, 4];
let sliced = arr.slice(1, 3); // [2, 3]

6. splice()

Changes an array by removing, replacing, or adding elements.

let arr = [1, 2, 3, 4];
arr.splice(1, 2, "a", "b"); // [1, "a", "b", 4]

7. forEach()

Executes a function once for each array element.

let arr = [1, 2, 3];
arr.forEach(num => console.log(num));

8. map()

Creates a new array with the results of calling a function on every element.

let arr = [1, 2, 3];
let doubled = arr.map(num => num * 2); // [2, 4, 6]

9. filter()

Creates a new array with elements that pass a test.

let arr = [1, 2, 3, 4];
let evens = arr.filter(num => num % 2 === 0); // [2, 4]

10. reduce()

Applies a function against an accumulator and each element to reduce it to a single value.

let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, num) => acc + num, 0); // 10

11. find()

Returns the first element that satisfies a condition.

let arr = [1, 2, 3, 4];
let found = arr.find(num => num > 2); // 3

12. findIndex()

Returns the index of the first element that satisfies a condition.

let arr = [1, 2, 3, 4];
let index = arr.findIndex(num => num > 2); // 2

13. includes()

Checks if an array contains a certain value.

let arr = [1, 2, 3];
arr.includes(2); // true

14. some()

Checks if at least one element passes a test.

let arr = [1, 2, 3];
let hasEven = arr.some(num => num % 2 === 0); // true

15. every()

Checks if all elements pass a test.

let arr = [2, 4, 6];
let allEven = arr.every(num => num % 2 === 0); // true

16. sort()

Sorts an array in place.

let arr = [3, 1, 4, 2];
arr.sort(); // [1, 2, 3, 4]

17. reverse()

Reverses an array in place.

let arr = [1, 2, 3];
arr.reverse(); // [3, 2, 1]

18. join()

Joins array elements into a string.

let arr = ["a", "b", "c"];
let str = arr.join("-"); // "a-b-c"

19. concat()

Merges two or more arrays.

let arr1 = [1, 2];
let arr2 = [3, 4];
let combined = arr1.concat(arr2); // [1, 2, 3, 4]

20. flat()

Flattens a nested array.

let arr = [1, [2, [3, 4]]];
let flatArr = arr.flat(2); // [1, 2, 3, 4]

JavaScript Reference Guide

Spread Operator (`...`)

The spread operator allows you to expand elements of an iterable (like an array or object).

Example: Copying an Array


const numbers = [1, 2, 3];
const copiedNumbers = [...numbers];
console.log(copiedNumbers); // Output: [1, 2, 3]

Example: Merging Arrays


const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArray = [...arr1, ...arr2];
console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]

Example: Spreading Objects


const person = { name: "Alice", age: 25 };
const updatedPerson = { ...person, city: "New York" };
console.log(updatedPerson); // Output: { name: "Alice", age: 25, city: "New York" }

Destructuring

Destructuring allows you to extract values from arrays or objects and assign them to variables.

Example: Array Destructuring


const numbers = [10, 20, 30];
const [first, second, third] = numbers;
console.log(first); // Output: 10
console.log(second); // Output: 20

Example: Skipping Values


const values = [100, 200, 300];
const [, secondValue] = values;
console.log(secondValue); // Output: 200

Example: Object Destructuring


const person = { name: "Bob", age: 30, country: "USA" };
const { name, age } = person;
console.log(name); // Output: Bob
console.log(age); // Output: 30

Example: Renaming Variables


const user = { username: "john_doe", email: "john@example.com" };
const { username: userName } = user;
console.log(userName); // Output: john_doe

Array Methods