Array Functions
JavaScript provides a wide range of built-in array methods to manipulate and interact with arrays. Here's a list of some of the most commonly used array methods, along with examples.
1. push
Adds one or more elements to the end of an array and returns the new length of the array.
let fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits); // ['apple', 'banana', 'orange']`
2. pop
Removes the last element from an array and returns that element.
let fruits = ["apple", "banana", "orange"];
fruits.pop(); // removes 'orange'
console.log(fruits); // ['apple', 'banana']`
3. shift
Removes the first element from an array and returns that element.
let fruits = ["apple", "banana", "orange"];
f0ruits.shift(); // removes 'apple'
console.log(fruits); // ['banana', 'orange']`
4. unshift
Adds one or more elements to the beginning of an array and returns the new length of the array.
fruits.unshift("apple");
console.log(fruits); // ['apple', 'banana', 'orange']`
5. map
Creates a new array with the results of calling a provided function on every element in the array.
let numbers = [1, 2, 3];
let squared = numbers.map((num) => num * num);
console.log(squared); // [1, 4, 9]`
6. filter
Creates a new array with all elements that pass the test implemented by the provided function.
let numbers = [1, 2, 3, 4];
let evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // [2, 4]`
7. reduce
Applies a function against an accumulator and each element in the array to reduce it to a single value.
let numbers = [1, 2, 3, 4];
let sum = numbers.reduce(
(accumulator, currentValue) => accumulator + currentValue,
0,
);
console.log(sum); // 10`
8. forEach
Executes a provided function once for each array element. Unlike map, it doesn't return a new array.
let fruits = ["apple", "banana", "orange"];
fruits.forEach((fruit) => console.log(fruit));
// apple
// banana
// orange`
9. find
Returns the value of the first element in the array that satisfies the provided testing function. Otherwise, it returns undefined.
let numbers = [1, 2, 3, 4];
let found = numbers.find((num) => num > 2);
console.log(found); // 3`
10. findIndex
Returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1.
let numbers = [1, 2, 3, 4];
let foundIndex = numbers.findIndex((num) => num > 2);
console.log(foundIndex); // 2`
11. includes
Determines whether an array includes a certain element, returning true or false as appropriate.
let fruits = ["apple", "banana", "orange"];
console.log(fruits.includes("banana")); // true
console.log(fruits.includes("grape")); // false`
12. some
Checks if at least one element in the array passes the test implemented by the provided function.
let numbers = [1, 2, 3, 4];
let hasEven = numbers.some((num) => num % 2 === 0);
console.log(hasEven); // true`
13. every
Checks if all elements in the array pass the test implemented by the provided function.
let numbers = [2, 4, 6];
let allEven = numbers.every((num) => num % 2 === 0);
console.log(allEven); // true`
14. concat
Merges two or more arrays into a new array.
let fruits = ["apple", "banana"];
let moreFruits = ["orange", "grape"];
let allFruits = fruits.concat(moreFruits);
console.log(allFruits); // ['apple', 'banana', 'orange', 'grape']`
15. slice
Returns a shallow copy of a portion of an array into a new array, specified by a start and end index.
let fruits = ["apple", "banana", "orange", "grape"];
let sliced = fruits.slice(1, 3);
console.log(sliced); // ['banana', 'orange']`
16. splice
Adds, removes, or replaces elements in an array and returns the removed elements.
let fruits = ["apple", "banana", "orange"];
fruits.splice(1, 1, "grape"); // replaces 'banana' with 'grape'
console.log(fruits); // ['apple', 'grape', 'orange']`
17. join
Joins all elements of an array into a string, separated by a specified separator.
let fruits = ["apple", "banana", "orange"];
let fruitString = fruits.join(", ");
console.log(fruitString); // 'apple, banana, orange'`
18. reverse
Reverses the elements of an array in place.
let fruits = ["apple", "banana", "orange"];
fruits.reverse();
console.log(fruits); // ['orange', 'banana', 'apple']`
19. sort
Sorts the elements of an array in place and returns the array. By default, sorts elements as strings in ascending order.
let numbers = [3, 1, 4, 2];
numbers.sort();
console.log(numbers); // [1, 2, 3, 4]
let fruits = ["apple", "banana", "orange"];
fruits.sort((a, b) => b.localeCompare(a));
console.log(fruits); // ['orange', 'banana', 'apple']`
20. fill
Changes all elements in an array to a static value from a start index to an end index.
let numbers = [1, 2, 3, 4];
numbers.fill(0, 1, 3);
console.log(numbers); // [1, 0, 0, 4]`
21. flat
Flattens nested arrays into a single array, up to a specified depth.
let numbers = [1, [2, 3], [4, [5, 6]]];
let flatNumbers = numbers.flat(2);
console.log(flatNumbers); // [1, 2, 3, 4, 5, 6]`
22. flatMap
Maps each element using a mapping function and flattens the result into a new array.
let words = ["hello world", "goodbye world"];
let flattened = words.flatMap((word) => word.split(" "));
console.log(flattened); // ['hello', 'world', 'goodbye', 'world']`
These are some of the most commonly used array methods in JavaScript, each serving different purposes for manipulating and interacting with arrays efficiently.