How to write custome forEach in Javascript?

Priti Jha
2 min readFeb 2, 2024

--

Introduction: JavaScript’s Array.prototype.forEach() is a powerful method used to iterate over elements in an array. However, there might be instances where you want to create a custom forEach function tailored to your specific needs. In this blog post, we'll explore how to implement a custom forEach function in JavaScript, providing you with greater flexibility and control over your array iterations.

Why Customize forEach? The native forEach function is versatile and widely used, but there are scenarios where a custom implementation can offer additional features or optimizations. Whether you're working on a specialized project or simply want to gain a deeper understanding of array iteration, creating a custom forEach can be a valuable exercise.

Implementing the Custom forEach: Let’s dive into the code. We’ll extend the Array.prototype to add our custom forEach function. This function will take a callback as its parameter and execute it for each element in the array.

// Custom forEach function
Array.prototype.customForEach = function(callback) {
for (let i = 0; i < this.length; i++) {
callback(this[i], i, this);
}
};

// Example usage
const array = [1, 2, 3, 4, 5];

array.customForEach((element, index, arr) => {
console.log(`Element at index ${index}: ${element}`);
});

In this example, we’ve added customForEach to the Array.prototype, enabling all arrays to use this custom forEach function. The callback function passed to customForEach receives the current element, index, and the array itself.

Benefits of Custom forEach:

  1. Tailored Functionality: Customize the forEach function based on your specific requirements. You have full control over how elements are processed during iteration.
  2. Learning Experience: Implementing a custom forEach provides a great opportunity to deepen your understanding of array iteration and JavaScript’s prototypal inheritance.
  3. Optimizations: Tailoring forEach for your use case allows you to implement optimizations or specialized logic that might not be achievable with the generic forEach method.

Best Practices: While creating custom functions can be enlightening, it’s important to be mindful of best practices:

  1. Avoid Extending Native Prototypes in Production: Extending native prototypes can lead to conflicts with other libraries. In production code, consider creating standalone utility functions instead.
  2. Error Handling: Implement proper error handling to ensure the function behaves predictably in different scenarios.
  3. Documentation: Clearly document your custom forEach function, including its purpose, parameters, and expected behavior.

Conclusion: Crafting a custom forEach function in JavaScript offers a hands-on way to enhance your programming skills and tailor array iteration to your specific needs. While the native forEach is incredibly versatile, the ability to create a custom solution provides a valuable tool in your JavaScript toolkit. Experiment, learn, and optimize your code as you explore the possibilities of customizing forEach in your projects.

--

--

Priti Jha

Senior front-end developer writing about Angular 8 , Ionic Framework ,Javascript, HTML, Css and all front end technology.