DEV Community

Cover image for 8 Must Know Javascript Array Methods
Shoaib Sayyed
Shoaib Sayyed

Posted on • Edited on

8 Must Know Javascript Array Methods

Hi, Dev! Thanks for opening my blog. I hope you are doing well and ready to learn the most used JavaScript Array Methods.

Here are the 8 JavaScript Array Methods you should know.

1. filter()

  • The filter() method returns an array filled with all array elements that satisfies the condition.
  • If no elements satisfies the condition, it returns an empty array.
      let arr = [1, 2, 3, 4, 5, 6];

      // returning items less than 4
      let filteredArr = arr.filter((item) => item < 4);

      console.log(filteredArr); // output: [1, 2, 3]
Enter fullscreen mode Exit fullscreen mode

2. map()

  • The map() method returns a new array with the results of calling a function for every array element.
  • The map() method calls the provided function once for each element in an array, in order.
      let arr = [1, 2, 3, 4, 5, 6];

      // adding one to each array element
      let mappedArr = arr.map((item) => item + 1);

      console.log(mappedArr); // output: [2, 3, 4, 5, 6, 7]
Enter fullscreen mode Exit fullscreen mode

3. find()

  • The find() method returns the value of the first element in an array that satisfies the condition.
  • The find() method executes the function once for each element present in the array.
      let arr = [1, 2, 3, 4, 5, 6];

      // finding element greater than 4
      let resultArr = arr.find((item) => item > 4);

      console.log(resultArr); // output: [5]
Enter fullscreen mode Exit fullscreen mode

4. forEach()

  • The forEach() method calls a function once for each element in an array, in order.
      let arr = [1, 2, 3, 4, 5, 6];

      arr.forEach((item) => {
        console.log(item); // output: 1 2 3 4 5 6
      });
Enter fullscreen mode Exit fullscreen mode

5. some()

  • The some() method checks if any one of the elements in an array satisfies the condition.
  • If satisfied, it returns 'true' otherwise 'false'.
      let arr = [1, 2, 3, 4, 5, 6];

      // checking is any array element equals to 3
      let isThree = arr.some((item) => item === 3);

      console.log(isThree); // output: true

      // checking is any array element equals to 10
      let isTen = arr.some((item) => item === 10);

      console.log(isTen); // output: false
Enter fullscreen mode Exit fullscreen mode

6. every()

  • The every() method checks if all elements in an array satisfies the condition.
  • If satisfied, it returns 'true' otherwise 'false'.
      let arr = [1, 2, 3, 4, 5, 6];

      // all elements are less than 6
      let lessSix = arr.every((item) => item <= 6);

      console.log(lessSix); // output: true

      // all elements are greater than 10
      let greaterTen = arr.every((item) => item > 10);

      console.log(greaterTen); // output: false
Enter fullscreen mode Exit fullscreen mode

7. reduce()

  • The reduce() method reduces the array to a single value.
  • The reduce() method executes a provided function for each value of the array (from left-to-right) and return value is stored in an accumulator.
      let arr = [1, 2, 3, 4, 5, 6];

      // adding all elements of an array
      let sum = arr.reduce((total, value) => total + value);

      console.log(sum); // output: 21
Enter fullscreen mode Exit fullscreen mode

8. includes()

  • The includes() method determines whether an array contains a specified element.
  • If array contains the element, it returns 'true' otherwise 'false'.
      let arr = ["html", "css", "js"];

      // checking is array conatins 'js'
      arr.includes("js"); // output: true

      // checking is array conatins 'react'
      arr.includes("react"); // output: false
Enter fullscreen mode Exit fullscreen mode

Note: All the above array methods does not change the original array.

Top comments (0)