All Important JavaScript Array methods you need to know

Here are some important JavaScript Array methods you need to know 👇🏼

1. map(callbackFn):

   • map applies a provided function (callback) to each element in an array and returns a new array with the results.
   • Example:

    const fruits = ['🍎', '🍌', '🍇', '🍒'];
    const result = fruits.map((fruit) => fruit + '🍔');
    // Result: ['🍎🍔', '🍌🍔', '🍇🍔', '🍒🍔']
   

   In this example, the callback function concatenates '🍔' to each fruit.

2. filter(callbackFn):

   • filter creates a new array containing all elements that pass a provided test (callback).
   • Example:

    const numbers = [1, 2, 3, 4, 5];
    const result = numbers.filter((number) => number % 2 === 0);
    // Result: [2, 4]
   

   The callback function checks if a number is even and includes it in the result array.

3. find(callbackFn):

   • find returns the first element in the array that satisfies the provided test (callback).
   • Example:

    const fruits = ['🍇', '🍇', '🍏', '🍏'];
    const result = fruits.find((fruit) => fruit === '🍏');
    // Result: '🍏'
   

   The callback function searches for the first occurrence of '🍏' in the array.

4. findIndex(callbackFn):

   • findIndex returns the index of the first element in the array that satisfies the provided test (callback).
   • Example:

    const fruits = ['🍇', '🍇', '🍇', '🍒'];
    const result = fruits.findIndex((fruit) => fruit === '🍒');
    // Result: 3
   

   The callback function finds the index of the first '🍒' in the array.

5. fill(value, start):

   • fill changes all elements in an array to a static value (value) from a starting index (start).
   • Example:

    const numbers = ['🍏','🍏','🍏','🍏'];
    numbers.fill('🍇',1);
    // Result: ['🍏', '🍇', '🍇', '🍇']
   

   It fills all elements from index 1 onward with the value 🍇.

6. some(callbackFn):

   • some checks if at least one element in the array satisfies the provided test (callback) and returns a Boolean.
   • Example:

    const numbers = [1, 2, 3, 4, 5];
    const result = numbers.some((number) => number > 3);
    // Result: true
   

   The callback function checks if at least one number is greater than 3.

7. every(callbackFn):

   • every checks if all elements in the array satisfy the provided test (callback) and returns a Boolean.
   • Example:

    const numbers = [1, 2, 3, 4, 5];
    const result = numbers.every((number) => number > 3);
    // Result: false
   

   The callback function checks if all numbers are greater than 3 (which is not true).

8. reduce(callbackFn, initialValue):

   • reduce applies a function (callback) against an accumulator and each element in the array to reduce it to a single value.
   • Example:

    const numbers = [1, 2, 3, 4, 5];
    const result = numbers.reduce((accumulator, number) => accumulator + number, 0);
    // Result: 15
   

   The callback function accumulates the sum of all numbers with an initial value of 0.

9. includes(searchElement):

   • includes checks if an array includes a certain element (searchElement) and returns a Boolean.
   • Example:

    const colors = ['🟣', '🟣', '🟡', '🟡'];
    const result = colors.includes('🟣');
    // Result: true
   

   It checks if '🟣' is present in the array.

10. indexOf(searchElement):

    • indexOf returns the first index at which a given element (searchElement) is found in the array, or -1 if it's not present.
    • Example:

      const colors = ['🟣', '🟣', '🟡', '🟡'];
      const result = colors.indexOf('🟡');
      // Result: 2
    

    It finds the first occurrence of '🟡' at index 2 in the array.

You find this blog helpful. Please like and share with others.