Home ยป JavaScript ยป What are Array Methods in JavaScript?

What are Array Methods in JavaScript?

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:

  1. Check if an Array is Empty in JavaScript
  2. Empty All Elements of Array in JavaScript