Essential Array Methods in JavaScript

Array Methods

An array is a data structure that stores a collection of elements, each identified by an index or a key. The elements in an array are stored in contiguous memory locations, and the index or key is used to access a specific element. Arrays are used to store and manipulate collections of data in various programming languages.

Let’s dive into some of these methods and see how they make our lives simple

1. map( )

This method creates a new array with the results of calling a provided function on every element in this array.

const numbers = [1, 2, 3, 4, 5];

// Using map with arrow function to create a new array where each element is squared
const squaredNumbers = numbers.map(num => num ** 2);

// Output
console.log(squaredNumbers);  // Output: [1, 4, 9, 16, 25]

2. filter( )

This method creates a new array with only elements that pass the condition inside the provided function.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Using filter with arrow function to create a new array with only odd numbers
const oddNumbers = numbers.filter(num => num % 2 !== 0);

// Output
console.log(oddNumbers);  // Output: [1, 3, 5, 7, 9]

3. sort( )

This method is used to arrange/sort array elements in ascending or descending order.

// Original array
const fruits = ['banana', 'apple', 'orange', 'grape'];

// Sorting the array in alphabetical order
fruits.sort();

// Output
console.log(fruits);  // Output: ['apple', 'banana', 'grape', 'orange']

// Original array
const numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];

// Sorting the array in ascending numerical order
numbers.sort(function (a, b) {
  return a - b;
});

// Output
console.log(numbers);  // Output: [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

// Sorting the array in descending numerical order
numbers.sort(function (a, b) {
  return b - a;
});

// Output
console.log(numbers);  // Output: [9, 6, 5, 5, 5, 4, 3, 3, 2, 1, 1]

4. forEach( )

This method helps to loop over an array by executing a provided callback function for each element in an array.

// Original array
const fruits = ['apple', 'banana', 'orange', 'grape'];

// Using forEach with arrow function to log each element to the console
fruits.forEach(fruit => console.log(fruit)); 

// Output:
// apple
// banana
// orange
// grape

5. concat( )

This method merges two or more arrays and returns a new array, without changing the existing arrays.

// Arrays to be concatenated
const array1 = [1, 2, 3];
const array2 = ['a', 'b', 'c'];

// Concatenating the arrays
const concatenatedArray = array1.concat(array2);

// Output
console.log(concatenatedArray);  // Output: [1, 2, 3, 'a', 'b', 'c']

6. every( )

This method checks every element in the array that passes the condition, returning true or false as appropriate.

// Array of numbers
const numbers = [1, 2, 3, 4, 5];

// Check if all numbers are greater than 0
const allGreaterThanZero = numbers.every(function (num) {
  return num > 0;
});

// Output
console.log(allGreaterThanZero);  // Output: true

7. some( )

This method checks if at least one element in the array that passes the condition, returning true or false as appropriate.

// Array of numbers
const numbers = [1, 2, 3, 4, 5];

// Check if at least one number is greater than 3
const atLeastOneGreaterThanThree = numbers.some(function (num) {
  return num > 3;
});

// Output
console.log(atLeastOneGreaterThanThree);  // Output: true

8. includes( )

This method checks if an array includes the element that passes the condition, returning true or false as appropriate.

// Array of numbers
const numbers = [1, 2, 3, 4, 5];

// Check if the array includes the number 3
const includesNumberThree = numbers.includes(3);

// Output
console.log(includesNumberThree);  // Output: true

9. join( )

This method returns a new string by concatenating all of the array’s elements separated by the specified separator.

// Array of fruits
const fruits = ['apple', 'banana', 'orange'];

// Joining the array elements into a string with a comma separator
const joinedString = fruits.join();

// Output
console.log(joinedString);  // Output: "apple,banana,orange"

10. reduce( )

This method applies a function against an accumulator and each element in the array to reduce it to a single value.

// Array of numbers
const numbers = [1, 2, 3, 4, 5];

// Using reduce to sum all numbers in the array
const sum = numbers.reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
});

// Output
console.log(sum);  // Output: 15