DEV Community

_Khojiakbar_
_Khojiakbar_

Posted on • Edited on

Array high order methods

High-order array methods in JavaScript are methods that operate on arrays and typically take other functions as arguments. These methods allow for powerful and concise ways to manipulate and analyze data within arrays. Here’s a broad explanation of some of the most commonly used high-order array methods:

1. map()

Purpose: Creates a new array populated with the results of calling a provided function on every element in the calling array.

  • return does not work.
  • Can work like forEach().
  • Conditionals does not work.

Usage: Transforming data by applying a function to each element.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2); // doubled is [2, 4, 6, 8]
Enter fullscreen mode Exit fullscreen mode

2. filter()

Purpose: Creates a new array with all elements that pass the test implemented by the provided function.

  • forEach and map integration
  • no modification

Usage: Filtering out elements based on a condition.

const numbers = [1, 2, 3, 4];
const evens = numbers.filter(num => num % 2 === 0); // evens is [2, 4]
Enter fullscreen mode Exit fullscreen mode

3. reduce()

Purpose: Executes a reducer function (that you provide) on each element of the array, resulting in a single output value.
Usage: Summing up values, calculating averages, or accumulating a value based on array elements.
Structure let nArr = array.reduce(()=>{}, 0)

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // sum is 10
Enter fullscreen mode Exit fullscreen mode

4. forEach()

Purpose: Executes a provided function once for each array element.
Usage: Performing an action on each element, often used instead of a for loop for iteration.
return x

! return does not work

const numbers = [1, 2, 3, 4];
numbers.forEach(num => console.log(num)); // Logs 1, 2, 3, 4 to the console
Enter fullscreen mode Exit fullscreen mode

5. find()

Purpose: Returns the value of the first element in the array that satisfies the provided testing function.
Usage: Finding a single element that matches a condition.

  • Looks like filter()
  • Conditionals does not work.
const numbers = [1, 2, 3, 4];
const found = numbers.find(num => num > 2); // found is 3
Enter fullscreen mode Exit fullscreen mode

6. findIndex()

Purpose: Returns the index of the first element in the array that satisfies the provided testing function.
Usage: Finding the index of a single element that matches a condition.

const numbers = [1, 2, 3, 4];
const index = numbers.findIndex(num => num > 2); // index is 2
Enter fullscreen mode Exit fullscreen mode

7. some()

Purpose: Tests whether at least one element in the array passes the test implemented by the provided function.
Usage: Checking if any elements meet a condition.

const numbers = [1, 2, 3, 4];
const hasEven = numbers.some(num => num % 2 === 0); // hasEven is true
Enter fullscreen mode Exit fullscreen mode

8. every()

Purpose: Tests whether all elements in the array pass the test implemented by the provided function.
Usage: Checking if all elements meet a condition.

const numbers = [1, 2, 3, 4];
const allEven = numbers.every(num => num % 2 === 0); // allEven is false
Enter fullscreen mode Exit fullscreen mode

9. sort()

Purpose: Sorts the elements of an array in place and returns the sorted array.
Usage: Sorting elements based on specified criteria.

const numbers = [4, 2, 3, 1];
numbers.sort(); // numbers is now [1, 2, 3, 4]

const words = ['apple', 'banana', 'cherry'];
words.sort((a, b) => a.localeCompare(b)); // words is now ['apple', 'banana', 'cherry']
words.sort()
Enter fullscreen mode Exit fullscreen mode

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more