frontend-challenge-myFilter

Been poking at this myFilter thing. Wanted to see how Array.prototype.filter ticks, so I built my own. Here’s the code I ended up with and what I sorted out:

/**
 * @template T
 * @param { (value: T, index: number, array: Array<T>) => boolean } callbackFn
 * @param {any} [thisArg]
 * @return {Array<T>}
 */
Array.prototype.myFilter = function (callbackFn, thisArg) {
  const len = this.length;
  const results = [];

  for (let k = 0; k < len; k++) {
    const kValue = this[k];
    if (
      Object.hasOwn(this, k) && // check element existance
      callbackFn.call(thisArg, kValue, k, this) // apply rule
    ) {
      results.push(kValue);
    }
  }
  return results;
};

What I Did

• Hooked it to arrays: Array.prototype.myFilter means any array can use it. this is the array I call it on—like [1, 2, 3].myFilter(...) makes this [1, 2, 3].
• Inputs: Takes a callbackFn (the rule) and optional thisArg (context tweak).
• Setup: len grabs the array length once. results is my empty bucket for keepers.
• Loop: for (k = 0; k < len; k++) walks the array. kValue is this[k]—the item at each spot.
• Check: Object.hasOwn(this, k) skips holes in sparse arrays (e.g., [1, , 3]). Then callbackFn.call(thisArg, kValue, k, this) runs the rule.
• Keep: If both pass, results.push(kValue).
• Done: Return results.

Figuring It Out

• Sparse arrays: [1, , 3, 4] has a hole at 1. this[1] is undefined, but Object.hasOwn says “nope, not really there.” Keeps it clean.
• Callback: callbackFn gets (item, index, array). Like num => num > 2. Returns true/false to decide.
• thisArg: Messed with this a bit. Without it, this in callbackFn is the array (or weird stuff in strict mode). Pass thisArg, and .call(thisArg, ...) forces this to be that instead.
• Test: [1, 2, 3, 4].myFilter(num => num > 2) → [3, 4]. Works.

Random Thoughts

• Why call?: .call(thisArg, kValue, k, this) lets me pass args and set this. Could’ve used apply, but same diff here.
• Edge case: Sparse arrays tripped me up at first. for...in would’ve skipped holes but grabbed other junk. Stick with for.
• thisArg example: Tried let obj = { threshold: 2 }; [1, 2, 3].myFilter(function(n) { return n > this.threshold; }, obj). Got [3]. Neat.

What Stuck

• Loops and this are the guts. Object.hasOwn handles the weirdness. callbackFn is the brain—flexible as hell. thisArg is optional but clutch for object tricks.
• Could add if (typeof callbackFn !== 'function') throw Error(), but kept it raw for now.

That’s it. myFilter works. On to the next thing.