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); // 1
These 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: