DEV Community

Cover image for Exploring JavaScript Array Methods with Examples
Suleman Ahmed
Suleman Ahmed

Posted on

Exploring JavaScript Array Methods with Examples

JavaScript arrays are versatile and offer a wide range of built-in methods to manipulate, iterate, and manage data efficiently. Understanding these methods is crucial for effective programming. Let's delve into some commonly used array methods with practical examples.

Array Methods

  • 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');  // returns 3 (new length of array)
console.log(fruits);    // Output: ['apple', 'banana', 'orange']
Enter fullscreen mode Exit fullscreen mode
  • pop(): Removes the last element from an array and returns that element.
let fruits = ['apple', 'banana', 'orange'];
let lastFruit = fruits.pop();  // returns 'orange'
console.log(fruits);           // Output: ['apple', 'banana']
console.log(lastFruit);        // Output: 'orange'
Enter fullscreen mode Exit fullscreen mode
  • shift(): Removes the first element from an array and returns that removed element.
let fruits = ['apple', 'banana', 'orange'];
let firstFruit = fruits.shift();  // returns 'apple'
console.log(fruits);              // Output: ['banana', 'orange']
console.log(firstFruit);          // Output: 'apple'
Enter fullscreen mode Exit fullscreen mode
  • unshift(): Adds one or more elements to the beginning of an array and returns the new length of the array.
let fruits = ['banana', 'orange'];
fruits.unshift('apple');  // returns 3 (new length of array)
console.log(fruits);      // Output: ['apple', 'banana', 'orange']
Enter fullscreen mode Exit fullscreen mode
  • forEach(): Executes a provided function once for each array element.
let numbers = [1, 2, 3];
numbers.forEach(function(num) {
  console.log(num * 2);  // Output: 2, 4, 6
});
Enter fullscreen mode Exit fullscreen mode
  • map(): Creates a new array populated with the results of calling a provided function on every element in the calling array.
let numbers = [1, 2, 3];
let doubled = numbers.map(function(num) {
  return num * 2;
});
console.log(doubled);  // Output: [2, 4, 6]
Enter fullscreen mode Exit fullscreen mode
  • filter(): Creates a new array with all elements that pass the test implemented by the provided function.
let numbers = [1, 2, 3, 4, 5];
let evens = numbers.filter(function(num) {
  return num % 2 === 0;
});
console.log(evens);  // Output: [2, 4]
Enter fullscreen mode Exit fullscreen mode
  • find(): Returns the first element in the array that satisfies the provided testing function.
let numbers = [10, 20, 30, 40, 50];
let found = numbers.find(function(num) {
  return num > 25;
});
console.log(found);  // Output: 30
Enter fullscreen mode Exit fullscreen mode
  • reduce(): 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(acc, current) {
  return acc + current;
}, 0);
console.log(sum);  // Output: 15 (1 + 2 + 3 + 4 + 5)
Enter fullscreen mode Exit fullscreen mode
  • indexOf(): Returns the first index at which a given element can be found in the array, or -1 if it is not present.
let fruits = ['apple', 'banana', 'orange', 'apple'];
let index = fruits.indexOf('apple');  // returns 0
console.log(index);                   // Output: 0
Enter fullscreen mode Exit fullscreen mode
  • lastIndexOf(): Returns the last index at which a given element can be found in the array, or -1 if it is not present.
let fruits = ['apple', 'banana', 'orange', 'apple'];
let lastIndex = fruits.lastIndexOf('apple');  // returns 3
console.log(lastIndex);                      // Output: 3
Enter fullscreen mode Exit fullscreen mode

These array methods are fundamental tools for manipulating data structures in JavaScript efficiently. By mastering these methods, you'll gain a powerful toolkit for handling arrays in various programming scenarios.

Top comments (0)