All Important JavaScript Array methods you need to know
Tags: javascript, webdev, programming, beginners
Published: 2023-09-01 11:28:01

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:
     ```javascript
     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:
     ```javascript
     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:
     ```javascript
     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:
     ```javascript
     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:
     ```javascript
     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:
     ```javascript
     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:
     ```javascript
     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:
     ```javascript
     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:
     ```javascript
     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:
      ```javascript
      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.