🚀 Frontend DSA 10 - 💥 JavaScript Polyfill: Array.prototype.map()

JavaScript’s built-in Array.prototype.map() method creates a new array by calling a provided callback function on every element in the calling array.

Let’s write a polyfill that mimics this behavior and call it myMap().

✅ Working Solution:

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

// Polyfill for map
Array.prototype.myMap = function (callbackFun) {
    let result = [];
    let currentArray = this;
    
    for (let i = 0; i < currentArray.length; i++) {
        // Apply callback with (element, index, array)
        result[i] = callbackFun(currentArray[i], i, currentArray);
    }
    
    return result;
}

// Native map usage
let result1 = test.map((item, index) => {
    return item * 2;
});
console.log("Native Map:", result1); // [2, 4, 6, ..., 20]

// Custom polyfill usage
let result2 = test.myMap((item, index) => {
    return item * 2;
});
console.log("Polyfill Map:", result2); // [2, 4, 6, ..., 20]

🔍 Key Points

🧠 Why use this?

In the line let currentArray = this;, this refers to the array on which myMap() is called. It ensures the method is reusable for any array.

✅ Signature of Original .map() Method

arr.map((element, index, array) => { /* ... */ })

➡️ Your polyfill should match that: it must pass all 3 arguments to the callback.

🧪 Extra Test Cases

let names = ['John', 'Jane', 'Doe'];

console.log(
  names.myMap((name, index) => `${index + 1}. ${name.toUpperCase()}`)
); 
// [ '1. JOHN', '2. JANE', '3. DOE' ]

🛑 Edge Cases to Consider (Advanced)

To make your polyfill bulletproof like native .map():

1. ✅ Validate callbackFun is a function.
2. ✅ Preserve holes in sparse arrays.
3. ✅ Handle thisArg (optional second parameter).
4. ✅ Avoid mutating the original array.

But for basic interview-level implementation, what we did is sufficient. 💯

Hey there from LearnYard! 👋

Glad to see you exploring the free content from our course! We’ve shared 10 valuable articles at no cost to help you get a real feel of what’s inside.

If you’ve found these helpful, we’d love to know! 💬
Share your thoughts or key takeaways on LinkedIn, Twitter, or Instagram — and don’t forget to tag Gourav Hammad & Mohammad Fraz. We’ll personally respond to your post!

Thanks for being part of the LearnYard journey. Keep learning, keep growing! 🚀

Loved the free content? Want access to the full course — for free? 💸

Share the course with your friends using your affiliate link (you’ll find it on your profile or home page), and earn 20% commission on each sale.

Just 4–5 sales and you’ll recover the full course price of your course 🔁
So why wait? Start sharing, start earning, and unlock the rest of the course effortlessly! 🛠️📈

📚 Keywords for SEO

• JavaScript map() Polyfill Explained
• How to Create a Custom map() Function in JavaScript
• Polyfill for Array.prototype.map in JS
• JavaScript Prototype Method Interview Question
• Custom map() Function for Arrays in JavaScript
• Implementing map() Manually in JavaScript
• JavaScript Polyfill for Array Methods
• Build Your Own map() Function in JS
• Understand map() Internals in JavaScript
• JavaScript Prototype Inheritance and Custom Methods

📢 Hashtags for Visibility

#JavaScriptPolyfill #MapFunctionJS #CustomMapJS #ArrayPrototypeJS
#JSInterviewPrep #FrontendInterviewQuestions #JavaScriptTips
#CodeNewbie #LearnJavaScript #FrontendMasters #PrototypeMethods
#JSForBeginners #WebDevelopment #FunctionalProgrammingJS
#JavaScriptDeepDive #CustomJSFunctions #JSArrayMethods
#FrontendDevelopment #TechLearning #JSCodeChallenge