Array Prototype ForEach - Practice Coding Problems

Array Prototype ForEach - Problem

JavaScript Easy

Implement your own version of the Array.prototype.forEach method that extends all arrays with a custom forEach functionality. Your implementation should allow calling array.forEach(callback, context) on any array to execute a callback function on each element.

The callback function receives three parameters:

currentValue - The current element being processed
index - The index of the current element
array - Reference to the original array

The optional context parameter sets the this value inside the callback function. Your forEach method should not return anything (returns undefined).

Challenge: Implement this without using any built-in array methods!

Example:

[1, 2, 3].forEach((value, index, arr) => {
  console.log(`Element ${value} at index ${index}`);
});

Input & Output

example_1.js — Basic Usage

$ Input: Array: [1, 2, 3] Callback: (value, index, array) => console.log(`${value} at ${index}`)

› Output: 1 at 0 2 at 1 3 at 2 return value: undefined

💡 Note: The forEach method calls the callback for each element, passing the current value, its index, and the original array. It returns undefined.

example_2.js — With Context

$ Input: Array: ['a', 'b', 'c'] Callback: function(value, index) { this.result.push(value.toUpperCase()); } Context: { result: [] }

› Output: Context object after execution: { result: ['A', 'B', 'C'] } return value: undefined

💡 Note: When a context object is provided, the callback's 'this' keyword refers to that context, allowing us to modify the context object.

example_3.js — Empty Array

$ Input: Array: [] Callback: (value, index, array) => console.log('Processing:', value)

› Output: return value: undefined

💡 Note: For empty arrays, the callback is never called, but forEach still returns undefined as expected.

Constraints

The method must be added to Array.prototype
Must handle sparse arrays correctly (skip undefined indices)
Must support optional context parameter for 'this' binding
Must return undefined
Cannot use built-in array methods like map, filter, etc.
Callback must receive exactly 3 parameters: (currentValue, index, array)
Must throw appropriate errors for invalid callbacks

Visualization

Tap to expand

Understanding the Visualization

Initialize

Set up the conveyor belt (array) and assign the worker (callback function)

Process Each Item

For each item on the belt, call the worker with the item, its position, and reference to the whole belt

Context Binding

If specified, ensure the worker operates in the correct workspace (this context)

Complete

After all items are processed, the operation completes with no return value

Key Takeaway

🎯 Key Insight: forEach is fundamentally about controlled iteration - it's a simple loop with proper callback invocation and context management, making it one of the most straightforward array methods to implement.

Asked in

G Google 25 f Meta 20 a Amazon 18 ⊞ Microsoft 15

The optimal solution implements Array.prototype.forEach using a simple for loop that iterates through each array element, calling the provided callback with the correct parameters (currentValue, index, array) and optional context binding. This approach achieves O(n) time complexity with O(1) space complexity, perfectly mimicking the native forEach behavior while handling edge cases like sparse arrays.

Common Approaches

Approach	Time	Space	Notes
✓ Basic Implementation (Optimal)	O(n)	O(1)	Simple for loop with proper callback invocation and context handling

Basic Implementation (Optimal) — Algorithm Steps

Extend Array.prototype with a forEach method
Accept callback function and optional context parameter
Use a for loop to iterate through array indices
For each element, call the callback with proper parameters
Use call() or apply() to set the correct 'this' context
Return undefined (implicit)

Visualization

Tap to expand

Step-by-Step Walkthrough

Setup

Initialize loop counter and validate callback function

Iteration

Loop through each array index from 0 to length-1

Callback Execution

Call the callback function with current element, index, and array reference

Context Binding

Set the correct 'this' context if provided

Completion

Return undefined after processing all elements

Code -

solution.c — C

#include <stdio.h>
#include <stdlib.h>

// Function pointer type for the callback
typedef void (*ForEachCallback)(int value, int index, int* array, int length);

// Custom forEach implementation for integer arrays
void array_for_each(int* arr, int length, ForEachCallback callback) {
    if (callback == NULL) {
        fprintf(stderr, "Error: Callback cannot be NULL\n");
        return;
    }
    
    for (int i = 0; i < length; i++) {
        callback(arr[i], i, arr, length);
    }
}

// Example callback function
void print_element(int value, int index, int* array, int length) {
    printf("Element %d at index %d\n", value, index);
}

int main() {
    int testArray[] = {1, 2, 3, 4, 5};
    int length = sizeof(testArray) / sizeof(testArray[0]);
    
    array_for_each(testArray, length, print_element);
    
    printf("forEach completed\n");
    return 0;
}

Time & Space Complexity

Time Complexity

⏱️

O(n)

Must visit each element exactly once to execute the callback

✓ Linear Growth

Space Complexity

O(1)

Only uses a constant amount of extra space for the loop counter

✓ Linear Space

28.4K Views

Medium Frequency

~15 min Avg. Time

892 Likes

Ln 1, Col 1

Smart Actions

💡 Explanation

AI Ready

💡 Suggestion Tab to accept Esc to dismiss

// Output will appear here after running code

Code Editor Closed

Click the red button to reopen

Input & Output

Constraints

Visualization

Related Problems

Common Approaches

Basic Implementation (Optimal) — Algorithm Steps

Visualization

Code -

Time & Space Complexity

Select Compiler