Custom Implementation of the filter Function

1. Create an empty array to store the filtered elements.
2. Iterate over the source array.
3. For each element, call the callback. If it returns true, add the element to the new array.
4. Return the new array.

/**
 * The myFilter function, implemented using a for loop.
 * @param {Array} arr - The input array.
 * @param {Function} callback - The predicate function.
 * @returns {Array} - A new filtered array.
 */
function myFilter(arr, callback) {
  // 1. Create an empty array to store the results.
  const filteredArray = [];
 
  // 2. Start a loop to iterate over each element of the source array.
  for (let i = 0; i < arr.length; i++) {
    // 3. Call the callback for the current element `arr[i]`.
    //    If it returns `true`, the condition is met.
    if (callback(arr[i], i, arr)) {
      // 4. Add the element to our new array.
      filteredArray.push(arr[i]);
    }
  }
 
  // 5. Return the new array with the filtered elements.
  return filteredArray;
}

Step-by-step code explanation:

1. function myFilter(arr, callback) { ... }

   • We declare the myFilter function, which takes two arguments: arr (the array to be filtered) and callback (the function that will determine whether to include an element).

2. const filteredArray = [];

   • We create an empty array filteredArray. This is where the elements that pass the check will be stored. We will return this array at the end.

3. for (let i = 0; i < arr.length; i++) { ... }

   • We start a for loop to iterate over each element in the source array arr.
   • let i = 0: We start with the first element (index 0).
   • i < arr.length: The loop will continue as long as i is less than the total number of elements in the array.
   • i++: After each iteration, we increment i by 1 to move to the next element.

4. if (callback(arr[i], i, arr)) { ... }

   • This is the key part of the logic. Inside the loop, we call the callback.
   • arr[i]: We pass the current element to the callback.
   • i: We pass its index.
   • arr: We pass the original array itself.
   • if (...): If the callback returns true, the condition is considered met.

5. filteredArray.push(arr[i]);

   • If the condition in the if statement is true, we add the current element arr[i] to our filteredArray.

6. return filteredArray;

   • After the loop finishes, the function returns filteredArray, which now contains all the filtered elements.

Why this way:

• Classic: This is the most traditional and straightforward way to iterate over an array in JavaScript.
• Performance: The for loop is often the fastest way to traverse an array, as it has minimal overhead.
• Control: It gives full control over the iteration process (e.g., you can change the step or start from the end).