JavaScript provides a powerful set of methods for working with arrays. These methods allow you to manipulate arrays in various ways, such as adding, removing, and transforming elements. This guide will cover some of the most commonly used array methods, including examples to illustrate their functionality.
1. push()
The push() method adds one or more elements to the end of an array and returns the new length of the array.
const fruits = ['apple', 'banana'];
fruits.push('orange');
console.log(fruits); // ['apple', 'banana', 'orange']
2. pop()
The pop() method removes the last element from an array and returns that element. This method changes the length of the array.
const fruits = ['apple', 'banana', 'orange'];
const lastFruit = fruits.pop();
console.log(lastFruit); // 'orange'
console.log(fruits); // ['apple', 'banana']
3. shift()
The shift() method removes the first element from an array and returns that element. This method changes the length of the array.
const fruits = ['apple', 'banana', 'orange'];
const firstFruit = fruits.shift();
console.log(firstFruit); // 'apple'
console.log(fruits); // ['banana', 'orange']
4. unshift()
The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.
const fruits = ['banana', 'orange'];
fruits.unshift('apple');
console.log(fruits); // ['apple', 'banana', 'orange']
5. slice()
The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included). The original array will not be modified.
const fruits = ['apple', 'banana', 'orange', 'mango'];
const citrus = fruits.slice(1, 3);
console.log(citrus); // ['banana', 'orange']
6. splice()
The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
const fruits = ['apple', 'banana', 'orange'];
fruits.splice(1, 1, 'kiwi');
console.log(fruits); // ['apple', 'kiwi', 'orange']
7. concat()
The concat() method is used to merge two or more arrays. This method does not change the existing arrays but returns a new array.
const fruits = ['apple', 'banana'];
const moreFruits = ['orange', 'mango'];
const allFruits = fruits.concat(moreFruits);
console.log(allFruits); // ['apple', 'banana', 'orange', 'mango']
8. indexOf()
The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.
const fruits = ['apple', 'banana', 'orange'];
const index = fruits.indexOf('banana');
console.log(index); // 1
9. includes()
The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.
const fruits = ['apple', 'banana', 'orange'];
const hasBanana = fruits.includes('banana');
console.log(hasBanana); // true
10. forEach()
The forEach() method executes a provided function once for each array element.
const fruits = ['apple', 'banana', 'orange'];
fruits.forEach(fruit => console.log(fruit));
// Output:
// 'apple'
// 'banana'
// 'orange'
11. map()
The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
const numbers = [1, 2, 3];
const doubled = numbers.map(number => number * 2);
console.log(doubled); // [2, 4, 6]
12. filter()
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // [2, 4]
13. reduce()
The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((total, number) => total + number, 0);
console.log(sum); // 10
14. find()
The find() method returns the value of the first element in the array that satisfies the provided testing function. Otherwise, it returns undefined.
const numbers = [1, 2, 3, 4];
const firstEven = numbers.find(number => number % 2 === 0);
console.log(firstEven); // 2
15. findIndex()
The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1.
const numbers = [1, 2, 3, 4];
const firstEvenIndex = numbers.findIndex(number => number % 2 === 0);
console.log(firstEvenIndex); // 1
16. sort()
The sort() method sorts the elements of an array in place and returns the sorted array.
const fruits = ['banana', 'apple', 'orange'];
fruits.sort();
console.log(fruits); // ['apple', 'banana', 'orange']
17. reverse()
The reverse() method reverses an array in place. The first array element becomes the last, and the last array element becomes the first.
const fruits = ['banana', 'apple', 'orange'];
fruits.reverse();
console.log(fruits); // ['orange', 'apple', 'banana']
Do you know all the 4 ways to make API calls in JavaScript? Check out my article here to learn more!
