← Advanced Array Methods Immutability in JavaScript →

Map, Filter, Reduce Polyfills

Deep dive into how JavaScript array methods work internally by building your own implementations.

What are Polyfills?

Polyfills are pieces of code that provide modern functionality in older browsers that don't natively support it. Understanding how to write polyfills helps you:

Deep Understanding
Truly grasp how JavaScript methods work internally

Interview Preparation
Common interview question for JavaScript roles

Browser Compatibility
Support older browsers without native methods

🗺️ Building Array.prototype.map() Polyfill

Let's understand the intricacies of the map() method by building our own version.

JavaScript Editor

// Understanding how Array.prototype.map works internally

// Native map usage
const numbers = [1, 2, 3, 4, 5];
const squaredNative = numbers.map(num => num * num);
console.log("Native map:", squaredNative);

// Our polyfill implementation
Array.prototype.myMap = function(callback, thisArg) {
  // 1. Check if 'this' is null or undefined
  if (this == null) {
    throw new TypeError('Array.prototype.myMap called on null or undefined');
  }
  
  // 2. Check if callback is a function
  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function');
  }
  
  // 3. Convert 'this' to object (in case it's a primitive)
  const array = Object(this);
  
  // 4. Get length (using >>> 0 converts to unsigned 32-bit integer)
  const length = array.length >>> 0;
  
  // 5. Create new array for results
  const result = new Array(length);
  
  // 6. Iterate through each element
  for (let i = 0; i < length; i++) {
    // Skip empty slots (if array is sparse)
    if (i in array) {
      // Call callback with proper this context
      const mappedValue = callback.call(thisArg, array[i], i, array);
      result[i] = mappedValue;
    }
  }
  
  return result;
};

// Test our polyfill
const squaredCustom = numbers.myMap(num => num * num);
console.log("Custom myMap:", squaredCustom);

// More comprehensive tests
console.log("\n=== Testing Edge Cases ===");

// Test with sparse array
const sparseArray = [1, , 3]; // Has empty slot at index 1
console.log("Sparse array:", sparseArray);
console.log("Map result:", sparseArray.myMap(x => x * 2));

// Test with 'this' context
const multiplier = {
  factor: 10,
  multiply: function(x) {
    return x * this.factor;
  }
};

console.log("With context:", numbers.myMap(multiplier.multiply, multiplier));

// Test with array-like object
const arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

console.log("Array-like:", Array.prototype.myMap.call(arrayLike, x => x.toUpperCase()));

Key Implementation Details:

Object(this) - Handles both objects and primitives
length >>> 0 - Converts to unsigned 32-bit integer
i in array - Checks for sparse arrays (empty slots)
callback.call(thisArg, ...) - Proper context binding
Returns new array (never modifies original)

🔍 Building Array.prototype.filter() Polyfill

JavaScript Editor

// Array.prototype.filter polyfill

// Native filter usage
const numbers = [1, 2, 3, 4, 5, 6];
const evensNative = numbers.filter(num => num % 2 === 0);
console.log("Native filter:", evensNative);

// Our polyfill implementation
Array.prototype.myFilter = function(callback, thisArg) {
  // 1. Basic validation
  if (this == null) {
    throw new TypeError('Array.prototype.myFilter called on null or undefined');
  }
  
  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function');
  }
  
  // 2. Convert to object and get length
  const array = Object(this);
  const length = array.length >>> 0;
  
  // 3. Create result array
  const result = [];
  
  // 4. Iterate and collect matching elements
  for (let i = 0; i < length; i++) {
    if (i in array) {
      const element = array[i];
      // If callback returns truthy, include element
      if (callback.call(thisArg, element, i, array)) {
        result.push(element);
      }
    }
  }
  
  return result;
};

// Test our polyfill
const evensCustom = numbers.myFilter(num => num % 2 === 0);
console.log("Custom myFilter:", evensCustom);

// More tests
console.log("\n=== Advanced Filter Tests ===");

// Filter objects
const people = [
  { name: "Alice", age: 25, city: "NYC" },
  { name: "Bob", age: 17, city: "LA" },
  { name: "Charlie", age: 30, city: "NYC" },
  { name: "Diana", age: 16, city: "Chicago" }
];

const adults = people.myFilter(person => person.age >= 18);
console.log("Adults:", adults);

const nycResidents = people.myFilter(person => person.city === "NYC");
console.log("NYC Residents:", nycResidents);

// Filter with index
const everyOther = numbers.myFilter((num, index) => index % 2 === 0);
console.log("Every other element:", everyOther);

// Empty array test
const emptyArray = [];
console.log("Empty array filter:", emptyArray.myFilter(x => x > 0));

// Performance comparison
console.log("\n=== Performance Test ===");
const largeArray = Array.from({length: 10000}, (_, i) => i);

console.time("Native filter");
const nativeResult = largeArray.filter(x => x % 2 === 0);
console.timeEnd("Native filter");

console.time("Custom filter");
const customResult = largeArray.myFilter(x => x % 2 === 0);
console.timeEnd("Custom filter");

console.log("Results equal:", nativeResult.length === customResult.length);

Filter-Specific Considerations:

Only includes elements where callback returns truthy
Result array length ≤ original array length
Handles sparse arrays properly
Maintains original element order
Doesn't include empty slots in result

🧮 Building Array.prototype.reduce() Polyfill

JavaScript Editor

// Array.prototype.reduce polyfill

// Native reduce usage
const numbers = [1, 2, 3, 4, 5];
const sumNative = numbers.reduce((acc, curr) => acc + curr, 0);
console.log("Native reduce sum:", sumNative);

// Our polyfill implementation
Array.prototype.myReduce = function(callback, initialValue) {
  // 1. Basic validation
  if (this == null) {
    throw new TypeError('Array.prototype.myReduce called on null or undefined');
  }
  
  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function');
  }
  
  // 2. Convert to object and get length
  const array = Object(this);
  const length = array.length >>> 0;
  
  // 3. Initialize variables
  let accumulator;
  let startIndex;
  
  // 4. Handle initial value
  if (initialValue !== undefined) {
    accumulator = initialValue;
    startIndex = 0;
  } else {
    // No initial value provided
    if (length === 0) {
      throw new TypeError('Reduce of empty array with no initial value');
    }
    
    // Find first existing element in sparse array
    let k = 0;
    while (k < length && !(k in array)) {
      k++;
    }
    
    if (k >= length) {
      throw new TypeError('Reduce of empty array with no initial value');
    }
    
    accumulator = array[k];
    startIndex = k + 1;
  }
  
  // 5. Iterate through array
  for (let i = startIndex; i < length; i++) {
    if (i in array) {
      accumulator = callback(accumulator, array[i], i, array);
    }
  }
  
  return accumulator;
};

// Test our polyfill
const sumCustom = numbers.myReduce((acc, curr) => acc + curr, 0);
console.log("Custom myReduce sum:", sumCustom);

// More reduce tests
console.log("\n=== Reduce Test Cases ===");

// Without initial value
const product = numbers.myReduce((acc, curr) => acc * curr);
console.log("Product (no initial):", product);

// Flatten array
const nested = [[1, 2], [3, 4], [5, 6]];
const flattened = nested.myReduce((acc, curr) => acc.concat(curr), []);
console.log("Flattened:", flattened);

// Group by property
const items = [
  { category: "fruit", name: "apple" },
  { category: "vegetable", name: "carrot" },
  { category: "fruit", name: "banana" },
  { category: "dairy", name: "milk" }
];

const grouped = items.myReduce((acc, item) => {
  const category = item.category;
  if (!acc[category]) acc[category] = [];
  acc[category].push(item.name);
  return acc;
}, {});

console.log("Grouped items:", grouped);

// Find maximum
const max = numbers.myReduce((acc, curr) => Math.max(acc, curr), -Infinity);
console.log("Maximum:", max);

// Count occurrences
const fruits = ["apple", "banana", "apple", "orange", "banana", "apple"];
const count = fruits.myReduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});

console.log("Fruit counts:", count);

// Edge cases
console.log("\n=== Edge Cases ===");

// Empty array with initial value
const emptyWithInit = [].myReduce((acc, curr) => acc + curr, 10);
console.log("Empty array with initial:", emptyWithInit);

// Sparse array
const sparse = [1, , 3];
const sparseSum = sparse.myReduce((acc, curr) => acc + (curr || 0), 0);
console.log("Sparse array sum:", sparseSum);

Reduce Complexity:

Handles both with and without initialValue
Proper sparse array handling
Throws appropriate errors for edge cases
Accumulator persists between iterations
Can return any type (not just arrays)

🏗️ Complete Polyfill Implementation

A production-ready polyfill with proper encapsulation and feature detection:

JavaScript Editor

// Complete polyfill implementation with all methods

// Test all polyfills together
console.log("=== Testing All Custom Methods ===");

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Test customMap
const squared = data.customMap(x => x * x);
console.log("Squared:", squared);

// Test customFilter
const evens = data.customFilter(x => x % 2 === 0);
console.log("Evens:", evens);

// Test customReduce
const sum = data.customReduce((acc, curr) => acc + curr, 0);
console.log("Sum:", sum);

// Chain custom methods
const result = data
  .customFilter(x => x > 5)
  .customMap(x => x * 2)
  .customReduce((acc, curr) => acc + curr, 0);

console.log("Chained result:", result);

// Performance comparison
console.log("\n=== Performance Comparison ===");
const testArray = Array.from({length: 1000000}, (_, i) => i);

console.time("Native chain");
const native = testArray
  .filter(x => x % 2 === 0)
  .map(x => x * 2)
  .reduce((acc, curr) => acc + curr, 0);
console.timeEnd("Native chain");

console.time("Custom chain");
const custom = testArray
  .customFilter(x => x % 2 === 0)
  .customMap(x => x * 2)
  .customReduce((acc, curr) => acc + curr, 0);
console.timeEnd("Custom chain");

console.log("Results equal:", native === custom);

Production Considerations:

IIFE for scope isolation
Feature detection before polyfilling
Proper error messages
Performance considerations
Backward compatibility

📝 Polyfill Best Practices

JavaScript Editor

// Polyfill Best Practices and Considerations

// 1. Feature Detection
console.log("=== Feature Detection ===");

// Check if native method exists
if (!Array.prototype.mySafeMap) {
  Array.prototype.mySafeMap = function(callback, thisArg) {
    // If native exists, use it
    if (typeof Array.prototype.map === 'function') {
      return this.map(callback, thisArg);
    }
    
    // Otherwise, use our polyfill
    // ... polyfill implementation
    console.log("Using polyfill implementation");
    return []; // simplified for example
  };
}

// 2. Non-enumerable Properties
console.log("\n=== Non-enumerable Properties ===");

// Making polyfill non-enumerable (won't show up in for...in loops)
Object.defineProperty(Array.prototype, 'myPrivateMap', {
  value: function(callback, thisArg) {
    // Implementation
    const result = [];
    for (let i = 0; i < this.length; i++) {
      result.push(callback.call(thisArg, this[i], i, this));
    }
    return result;
  },
  writable: true,
  configurable: true,
  enumerable: false  // This is key!
});

const arr = [1, 2, 3];
console.log("myPrivateMap in arr:", 'myPrivateMap' in arr);
console.log("Object.keys(arr):", Object.keys(arr));

// 3. Maintaining Method Signatures
console.log("\n=== Method Signatures ===");

Array.prototype.accurateMap = function(callback, thisArg) {
  // Check number of arguments
  console.log("Callback length:", callback.length);
  console.log("thisArg provided:", arguments.length > 1);
  
  // Native behavior: callback receives 3 arguments
  // (value, index, array)
  const result = [];
  for (let i = 0; i < this.length; i++) {
    if (i in this) {
      result[i] = callback.call(thisArg, this[i], i, this);
    }
  }
  return result;
};

// 4. Handling Edge Cases
console.log("\n=== Edge Cases Handling ===");

Array.prototype.robustMap = function(callback, thisArg) {
  // Handle null/undefined
  if (this == null) {
    throw new TypeError('Cannot read property of null or undefined');
  }
  
  // Handle non-object primitives
  const obj = Object(this);
  
  // Handle extremely large lengths
  const len = obj.length >>> 0;
  if (len > 0x7FFFFFFF) {
    throw new RangeError('Invalid array length');
  }
  
  // Implementation...
  return [];
};

// 5. Performance Optimizations
console.log("\n=== Performance Tips ===");

// Cache array length in loop
Array.prototype.optimizedMap = function(callback, thisArg) {
  const arr = Object(this);
  const len = arr.length;
  const result = new Array(len);
  
  // Traditional for loop is fastest
  for (let i = 0; i < len; i++) {
    result[i] = callback.call(thisArg, arr[i], i, arr);
  }
  
  return result;
};

// 6. Testing Strategy
const testSuite = {
  testMapPolyfill: function() {
    const tests = [
      {
        name: "Basic mapping",
        input: [1, 2, 3],
        callback: x => x * 2,
        expected: [2, 4, 6]
      },
      {
        name: "Sparse array",
        input: [1, , 3],
        callback: x => (x || 0) * 2,
        expected: [2, , 6]
      },
      {
        name: "With index",
        input: ['a', 'b', 'c'],
        callback: (x, i) => `${i}:${x}`,
        expected: ['0:a', '1:b', '2:c']
      }
    ];
    
    tests.forEach(test => {
      const result = test.input.map(test.callback);
      console.log(`${test.name}: `, 
        JSON.stringify(result) === JSON.stringify(test.expected) ? "✓" : "✗"
      );
    });
  }
};

testSuite.testMapPolyfill();

✅ Do in Production:

Use feature detection
Make polyfills non-enumerable
Match native behavior exactly
Include comprehensive tests
Consider performance impacts

❌ Avoid:

Modifying native prototypes carelessly
Breaking existing functionality
Ignoring edge cases
Poor error messages
Memory leaks

💼 Common Interview Questions

Implementation Questions:

Implement map() without using native map()
Write a polyfill for filter()
Create your own reduce() method
Implement flatMap() using existing methods
Write a polyfill for Array.from()

Concept Questions:

What's the time complexity of these methods?
How do you handle sparse arrays?
What edge cases should you consider?
How would you optimize performance?
What's the difference between polyfill and transpiler?

Practice Exercise:

// Implement these polyfills:
            // 1. Array.prototype.forEach
            // 2. Array.prototype.find
            // 3. Array.prototype.some
            // 4. Array.prototype.every
            // 5. Array.prototype.flat (simplified)

            // Bonus: Implement a generic function that can 
            // polyfill any array method based on its behavior

Continue Learning

Understanding polyfills is key to mastering JavaScript. Next, learn about immutability and how these methods help create predictable, bug-free code.

Next: Immutability in JavaScript →

← Advanced Array Methods Immutability in JavaScript →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

Map, Filter, Reduce Polyfills

What are Polyfills?

🗺️ Building Array.prototype.map() Polyfill

Key Implementation Details:

🔍 Building Array.prototype.filter() Polyfill

Filter-Specific Considerations:

🧮 Building Array.prototype.reduce() Polyfill

Reduce Complexity:

🏗️ Complete Polyfill Implementation

Production Considerations:

📝 Polyfill Best Practices

✅ Do in Production:

❌ Avoid:

💼 Common Interview Questions

Implementation Questions:

Concept Questions:

Practice Exercise:

Continue Learning

Follow Us

Our Tools

Our Company

Special Tools