Array methods are built-in functions in JavaScript that allow you to manipulate and work with arrays. There are many array methods available in JavaScript, and some of the most commonly used ones include:
#1. push()
The push() method 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('mango'); // returns 3
console.log(fruits); // ['apple', 'banana', 'mango']#2. pop()
The pop() method removes the last element from an array and returns it.
let fruits = ['apple', 'banana', 'mango']; let last = fruits.pop(); // returns 'mango' console.log(fruits); // ['apple', 'banana']
#3. shift()
The shift() method removes the first element from an array and returns it.
let fruits = ['apple', 'banana', 'mango']; let first = fruits.shift(); // returns 'apple' console.log(fruits); // ['banana', 'mango']
#4. unshift()
The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.
let fruits = ['banana', 'mango'];
fruits.unshift('apple'); // returns 3
console.log(fruits); // ['apple', 'banana', 'mango']#5. slice()
The slice() method returns a shallow copy of a portion of an array into a new array object.
let fruits = ['apple', 'banana', 'mango', 'orange', 'kiwi']; let citrus = fruits.slice(1, 3); // returns ['banana', 'mango'] console.log(fruits); // ['apple', 'banana', 'mango', 'orange', 'kiwi'] console.log(citrus); // ['banana', 'mango']
#6. splice()
The splice() method modifies the contents of an array by removing or replacing existing elements and/or adding new elements.
let fruits = ['apple', 'banana', 'mango', 'orange', 'kiwi']; let removed = fruits.splice(2, 2, 'pear', 'grape'); // returns ['mango', 'orange'] console.log(fruits); // ['apple', 'banana', 'pear', 'grape', 'kiwi'] console.log(removed); // ['mango', 'orange']
#7. sort()
The sort() method sorts the elements of an array in place and returns the sorted array. By default, the sort is ascending.
let fruits = ['mango', 'apple', 'banana']; fruits.sort(); // returns ['apple', 'banana', 'mango'] console.log(fruits); // ['apple', 'banana', 'mango']
#8. reverse()
The reverse() method reverses the order of the elements in an array in place and returns the reversed array.
let fruits = ['apple', 'banana', 'mango']; fruits.reverse(); // returns ['mango', 'banana', 'apple'] console.log(fruits); // ['mango', 'banana', 'apple']
#9. concat()
The concat() method returns a new array that consists of the elements in the original array followed by the elements in the specified arrays.
let fruits = ['apple', 'banana']; let vegetables = ['tomato', 'cucumber']; let items = fruits.concat(vegetables); // returns ['apple', 'banana', 'tomato', 'cucumber'] console.log(fruits); // ['apple', 'banana'] console.log(vegetables); // ['tomato', 'cucumber'] console.log(items); // ['apple', 'banana', 'tomato', 'cucumber']
#10. join()
The join() method returns a string that consists of the elements of an array joined by a specified separator.
let fruits = ['apple', 'banana', 'mango'];
let str = fruits.join(' + '); // returns 'apple + banana + mango'
console.log(str); // 'apple + banana + mango'#11. forEach()
The forEach() method executes a provided function once for each array element.
let fruits = ['apple', 'banana', 'mango'];
fruits.forEach(function(fruit) {
console.log(fruit);
});
// Output:
// apple
// banana
// mango#12. map()
The map() method creates a new array with the results of calling a provided function on every element in the calling array.
let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(function(number) {
return number * 2;
});
console.log(numbers); // [1, 2, 3, 4, 5]
console.log(doubled); // [2, 4, 6, 8, 10]#13. filter()
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evens = numbers.filter(function(number) {
return number % 2 === 0;
});
console.log(numbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(evens); // [2, 4, 6, 8, 10]#14. reduce()
The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
console.log(sum); // 15#15. find()
The find() method 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, 5, 6, 7, 8, 9, 10];
let even = numbers.find(function(number) {
return number % 2 === 0;
});
console.log(even); // 2#16. findIndex()
The findIndex() method 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, 5, 6, 7, 8, 9, 10];
let evenIndex = numbers.findIndex(function(number) {
return number % 2 === 0;
});
console.log(evenIndex); // 1These are just a few of the many array methods available in JavaScript. By using these methods, you can easily manipulate and work with arrays in your code.
Related:
