DEV Community: Derrick Odhiambo

map() method under the hood

Derrick Odhiambo — Wed, 09 Sep 2026 13:39:39 +0000

map() is an array method that creates a new array populated with the results of calling a provided function on every element in the calling array.

// `thisArg` is optional; when specified, it provides a value for 
// `this` when `callbackFn` is executing
map(callbackFn, thisArg)

map() preserves the same index range and transforms only existing values. The output has the same length and the same holes as the input, but the callback result replaces each existing element.

Array.prototype.myMap = function (callbackFn, thisArg) {
  // We use this to determine how many indexes we need to inspect.
  const len = this.length;

  // This is important because map() always returns a new array.
  // Using new Array(len) also preserves holes in sparse arrays.
  const array = new Array(len);

  // We check every index because the original array may contain holes.
  for (let k = 0; k < len; k++) {
    // A sparse array can have a missing index (a "hole").
    // `k in this` allows us to skip those holes instead of calling
    // the callback with undefined.
    if (k in this) {

      // this[k]   → current element
      // k         → current index
      // this      → original array
      // callbackFn.call(thisArg, ...) allows the caller to control
      // what `this` refers to inside the callback.
      // The value returned by the callback is stored at the same
      // index in the new array.
      array[k] = callbackFn.call(
        thisArg,
        this[k],
        k,
        this
      );
    }
  }

  return array;
};

For the spec solution, a specification-oriented version based on Array.prototype.map looks like this.

Array.prototype.myMap = function (callbackFn, thisArg) {
  // This allows myMap to work with array-like objects and handles
  // primitive values consistently with the specification.
  const O = Object(this);

  // `>>> 0` converts the length into an unsigned 32-bit integer,
  // giving us the number of indexes we need to process.
  const len = O.length >>> 0;

  // Native map() throws a TypeError when the callback is not a function.
  if (typeof callbackFn !== "function") {
    throw new TypeError("this is not a function");
  }

  // map() does not modify the original array.
  // Creating the array with `len` also preserves holes in sparse arrays.
  let array = new Array(len);

  let k = 0;

  while (k < len) {

    // Object properties are ultimately accessed using property keys,
    // which are strings (or symbols).
    let presentKey = String(k);

    // This is important for sparse arrays.
    // A hole means the property does not exist, so map() skips it.
    // `in` also checks the prototype chain, which matches the
    // specification's HasProperty operation.
    if (k in O) {
      let kValue = O[k];

      //     - kValue → current element
      //     - k      → current index
      //     - O      → original array/object
      // `call()` allows us to provide the `thisArg` as the `this`
      // value inside the callback.
      let mappedValue = callbackFn.call(
        thisArg,
        kValue,
        k,
        O
      );

      // Instead of simply doing:
      //     array[k] = mappedValue;
      // the specification uses CreateDataProperty, which is
      // conceptually represented here using Object.defineProperty().
      // This explicitly creates an ordinary data property with:
      // value        → the value returned by the callback
      // writable     → the property can be changed later
      // enumerable   → the property appears during enumeration
      // configurable → the property can be deleted or reconfigured
      // Most importantly, we only create this property when `k in O`
      // is true. If the original array has a hole at this index,
      // this block is never executed, so the result keeps the hole.
      Object.defineProperty(array, presentKey, {
        value: mappedValue,
        writable: true,
        enumerable: true,
        configurable: true,
      });
    }
    k = k + 1;
  }
  return array;
};

How reduce() works under the hood

Derrick Odhiambo — Mon, 07 Sep 2026 09:16:34 +0000

reduce() is an Array method that executes a reducer callback on each element in order and returns a single value.

reducer(callbackFn);
reducer(callbackFn, initialValue);

const array = [1, 2, 3, 4];

// Example: 0 + 1 + 2 + 3 + 4
const initialValue = 0;

const sumWithInitial = array.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue,
);

console.log(sumWithInitial);
// Expected output: 10

reduce() calls your function with (accumulator, currentValue, currentIndex, array) on every element. If you don't pass an initialValue, the array's first element becomes the starting accumulator, and the loop begins from index 1 instead of 0 — otherwise, it starts from initialValue at index 0.

On the first call, there's no previous result to build on yet, so accumulator starts as whatever you provided as initialValue (or the array's first element, if you didn't), and callbackFn combines that starting value with currentValue to produce the first real result.

What actually happens under the hood

There are many ways to implement a reduce method, but we'll use the ECMAScript specification as our guide. It breaks the behavior of reduce down into clear, well-defined steps, giving us a solid foundation for implementing it ourselves.

First, a few edge cases worth knowing.

An empty array, with or without the initialValue argument.
A single-value array, with and without the initialValue argument.
Sparse arrays with interior holes, e.g. [ , , , 2, 3]. Empty slots are skipped while traversing.
Sparse arrays with no initialValue.
All-hole array with no initialValue, e.g., [ , , , ].
Index properties inherited through the array's prototype.
undefined passed explicitly as an initialValue

This was my initial attempt using a for loop:

Array.prototype.myReducer = function (callbackFn, initialValue) {
 const len = this.length;
 const noInitialValue = arguments.length <= 1;

 if (typeof callbackFn !== "function") {
  throw new TypeError("This is not a function");
 }

 let startingIndex = 0;
 let acc = undefined;

 if (!noInitialValue) {
  acc = initialValue;
 } else {
  let indexFound = false;

  for (let k = 0; k < len; k++) {
   if (k in this) {
    acc = this[k];
    indexFound = true;
    startingIndex = k + 1;
    break;
   }
  }
  if (indexFound === false) {
   throw new TypeError("Empty array with no initial value");
  }
 }
 for (let k = startingIndex; k < len; k++) {
  if (k in this) {
   acc = callbackFn(acc, this[k], k, this);
  }
 }
 return acc;
}

Now the spec implementation following the ECMAScript implementation guide:

Array.prototype.myReducer = function (callbackFn, initialValue) {
  // Reduce requires a real function to call on each element — reject
  // anything else immediately, before doing any work on the array.
  if (typeof callbackFn !== "function") {
    throw new TypeError("This is not a function");
  }

  // Object(this) guarantees O is always a proper object to operate on,
  // even in edge cases where `this` isn't already a genuine array —
  // this is what lets myReducer be "borrowed" and called on array-like
  // objects (e.g. via Array.prototype.myReducer.call(arrayLike, fn)).
  const O = Object(this);

  // `>>> 0` coerces O.length into a sane, non-negative 32-bit unsigned
  // integer, so the loop below always has a safe bound to run against,
  // even if O.length is missing, negative, or not a number at all.
  const len = O.length >>> 0;

  // arguments.length, not initialValue itself, is what tells us whether
  // a second argument was passed. Checking `initialValue !== undefined`
  // instead would incorrectly treat myReduce(fn, undefined) — a
  // deliberate, if unusual, call — as if no initial value were given.
  const noInitialValue = arguments.length < 2;

  // Reducing an empty array with nothing to start from is genuinely
  // undefined behaviour — there's no way to produce a meaningful result,
  // so this matches native reduce() in throwing rather than guessing.
  if (len === 0 && noInitialValue) {
    throw new TypeError("Reduce of empty array with no initial value");
  }

  let k = 0; // current index into the source array
  let accumulator = undefined;

  if (!noInitialValue) {
    // An initial value was supplied — use it as-is, and the main loop
    // below will start from index 0.
    accumulator = initialValue;
  } else {
    // No initial value: the accumulator has to start as the array's
    // first *present* element — not just index 0, since sparse arrays
    // can have holes at the start. We scan forward until we find one.
    let kPresent = false;

    while (kPresent === false && k < len) {
      let propertyKey = String(k);

      // `in` checks whether the property genuinely exists — including
      // via the prototype chain — which correctly distinguishes a real
      // hole (nothing assigned) from an index explicitly set to
      // undefined. A plain O[k] !== undefined check would get this wrong.
      if (propertyKey in O) {
        kPresent = true;
        accumulator = O[k];
      }
      k = k + 1; // advance regardless, whether or not this index was present
    }

    // If we scanned the whole array and never found a present element,
    // every index was a hole — functionally the same as an empty array
    // for reduce's purposes, so the same error applies.
    if (kPresent === false) {
      throw new TypeError("Reduce of empty array with no initial value");
    }
  }

  // Main reduction loop. This runs unconditionally, regardless of which
  // branch above set the accumulator — whether it came from
  // initialValue or from scanning for the first present element, every
  // remaining element still needs to be folded in.
  while (k < len) {
    let propertyKey = String(k);

    // Same hole-check as above: skip indexes that were never assigned,
    // rather than passing `undefined` into the callback for them.
    if (propertyKey in O) {
      let kValue = O[propertyKey];

      // Argument order matters here: (accumulator, currentValue,
      // currentIndex, array) — matching the real callback signature.
      // accumulator is always the FIRST argument; getting this order
      // wrong (e.g., passing kValue first) silently produces incorrect
      // results without throwing any error.
      accumulator = callbackFn(accumulator, kValue, k, O);
    }
    k = k + 1;
  }

  return accumulator;
};

myReduce reproduces the native reduce() with the same argument handling and the same edge cases around missing initial values and sparse arrays.
ECMAScript specification guide

How the filter array method works under the hood

Derrick Odhiambo — Sat, 05 Sep 2026 19:03:55 +0000

Have you ever wondered how the filter() works in JavaScript? I came accross that problem. After a few days of procrastination and fear, and reading the documentation and articles, I can say I finally understood how it works under the hood.

filter() takes an array and a test, a function that returns true or false for each item in the array. It returns a new array with the items that passed the test, leaving the original array unmodified.

Say you've got a list of users and you only want the active ones:

const users = [
  { name: "Amina", active: true },
  { name: "Brian", active: false },
  { name: "Carol", active: true },
];

const activeUsers = users.filter(user => user.active);
// [{ name: "Amina", active: true }, { name: "Carol", active: true }]

And just like magic, it works. You have your active users.

That is the whole mental model: loop, test, keep or skip, return a new array. filter() silently guarantees this until you try to build it yourself.

What happens with sparse arrays? What happens if you pass something that is not a function? What if your callback function relies on this?

My first version worked; it compiled, ran on a plain array, and it gave me exactly what I expected.

Array.prototype.myFilter = function (callbackFn, thisArg) {
 const len = this.length;
 let results = [];
 let k = 0;
 let newIndex = 0;

 for (let k = 0; k < len; k++) {
  if (Object.hasOwn(this, k)) {
   let kValue = this[k];
   const testPassed = callbackFn.call(thisArg, kValue, k, this);

   if (testPassed) {
    results[newIndex] = kValue;
    newIndex = newIndex + 1;
   }
  }
 }
 return results;
}

Where my first attempt fell apart
No guard on the callback. I never checked if callbackFn was actually a plain function. The real filter() fails fast, at the top, with a message that tells you what actually went wrong.

Handling sparse arrays: Object.hasOwn worked, but it wasn't checking the same thing. Object.hasOwn(this, k) checks whether the this object has the k property; the only problem is that hasOwn checks only the object's own properties. It deliberately ignores the prototype chain.

After reading the ECMAScript documentation guide, this is the spec solution for how filter() works under the hood.

Array.prototype.myFilter = function (callbackFn, thisArg) {
  // Check if the callback is a function; if not, throw a TypeError.
  if (typeof callbackFn !== "function") {
    throw new TypeError("This is not a function");
  }

  // This is the backbone of the filter function.
  // 'this' refers to the value that called 'myFilter'.
  // Object(this) ensures 'this' is always treated as an object.
  const O = Object(this);

  // Get the length of the array-like object.
  // The `>>> 0` coercion forces the length into a sane, non-negative
  // 32-bit unsigned integer, even if the real value is malformed.
  const len = O.length >>> 0;

  // Initialize an empty array that values passing the test will be appended to.
  let result = [];

  // Two separate indexes: k tracks position in the original array,
  // N tracks position in the result array. Filter skips holes in sparse
  // arrays, so without two separate counters, the result could end up
  // with gaps instead of being densely packed.
  let k = 0; // current index in the original array
  let N = 0; // next index to write to in the result array

  while (k < len) {
    // Check if a property exists at index k. Using `in` (rather than
    // Object.hasOwn) is deliberate — it also checks the prototype chain,
    // matching the spec's HasProperty behavior exactly.
    if (k in O) {
      let kValue = O[k];

      // Run the test, coercing the result to a real boolean.
      const testPassed = Boolean(callbackFn.call(thisArg, kValue, k, O));

      if (testPassed) {
        result[N] = kValue;
        N++;
      }
    }
    k++; // always advance k, whether or not the value existed or passed
  }

  return result; // the new array containing only the elements that passed the test
};

What surprised me most wasn't any single fix; it was realizing how much invisible, deliberate design sits beneath a method I'd called a thousand times without ever wondering how it worked. Reading the spec isn't about memorizing algorithm steps to recite in an interview. It's about building the reflex to ask "but what if the input isn't clean?" before you ship something and consider it done. That reflex is worth more than any single polyfill you'll ever write.

For an in-depth explanation, please refer to this article by Priya Khanna