Why Use an Empty Array with `.forEach.call()` in JavaScript?

Understanding the Behavior of [].forEach.call() in JavaScript

This unconventional code snippet, where an empty array precedes the forEach method, has been puzzling developers. Let's delve into how it works.

Empty Array - A Trick for Accessing Array Prototypes

The empty array serves a peculiar purpose: it provides access to array prototypes like .forEach. Using an array directly gives you this functionality without the need to explicitly write Array.prototype.forEach.call(...);.

forEach - Iteration with Customization

forEach is a function that takes another function as input. For each element in an array-like object (such as a node list), it passes three arguments:

• The element itself
• The index of the element
• A reference to the array-like object

.call - Modifying this Context

The .call method allows you to invoke a function with a specific this context. In this case, it overrides the this of the inner function with the node list, ensuring that the function can access elements by index.

Example

Consider this:

[1,2,3].forEach.call( document.querySelectorAll('a'), function(el) { /* logic */ });

This code uses the empty array to access the .forEach prototype, passes the node list to forEach, and iterates over each tag, providing access to the element, its index, and the entire node list.

Debunking Functional Programming Concerns

While some argue that using this technique is inelegant compared to manual looping, it does serve a purpose when you need to modify the outside world (e.g., DOM) multiple times while accessing element or index information.

Modern Solutions in ES6 and Beyond

In modern JavaScript versions and with tools like Babel, you can use the ... rest and spread operators to achieve similar functionality more cleanly. However, the core principles of using an empty array for array prototype access and modifying this context with .call remain relevant.

The above is the detailed content of Why Use an Empty Array with `.forEach.call()` in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!