- Published on
Implement Native Map Function in JS
- Authors
 - Name
- Mike Hacker
- @ki5ibd
 
 
Usage Context: Use the custom map function when you need to transform or project each element of an array into a new form.
How it works: The custom map function creates a new array by applying a provided transformation function to each element of the input array. It encapsulates the iteration logic and abstracts the transformation process, promoting code reuse and functional programming principles.
Examples:
- Converting an array of temperatures in Celsius to Fahrenheit.
- Extracting names from an array of user objects.
- Doubling each number in an array.
The provided function map is a custom implementation of the array map method in JavaScript. Here’s a detailed explanation of what this function does and the programming principles it utilizes:
Function Explanation
function map(arr, cb) {
  var result = []
  for (var i = 0; i < arr.length; i++) {
    result.push(cb(arr[i]))
  }
  return result
}
What the Function Does:
- Initialization: - var result = [];initializes an empty array called- resultwhich will store the transformed elements.
 
- Iteration: - for (var i = 0; i < arr.length; i++) {starts a loop that iterates over each element in the input array- arr.
 
- Callback Application: - result.push(cb(arr[i]));applies the callback function- cbto the current element- arr[i]and pushes the result into the- resultarray.
 
- Return: - return result;returns the- resultarray after the loop completes, containing all the transformed elements.
 
Example Usage:
const numbers = [1, 2, 3, 4]
const doubled = map(numbers, function (num) {
  return num * 2
})
console.log(doubled) // [2, 4, 6, 8]
In this example, the map function is used to double each element in the numbers array.
Programming Principles Utilized
- Higher-Order Functions: - The mapfunction takes a functioncbas an argument and applies this function to each element in the array. This makesmapa higher-order function because it operates on other functions.
 
- The 
- Encapsulation: - The function encapsulates the logic of transforming an array within a single function, hiding the iteration details from the user. Users only need to provide the transformation logic via the callback.
 
- Abstraction: - This implementation abstracts the process of iterating over an array and applying a transformation, allowing users to focus on what transformation they want to apply rather than how it’s applied.
 
- Immutability: - The mapfunction creates a new array (result) and does not modify the original arrayarr. This promotes immutability, as the original data remains unchanged.
 
- The 
- Separation of Concerns: - The logic of what to do with each array element (provided by the callback cb) is separated from the logic of how to iterate over the array and collect results. This separation makes the function more modular and easier to understand.
 
- The logic of what to do with each array element (provided by the callback 
- Function Composition: - The custom mapfunction facilitates function composition, allowing users to chain multiple transformations in a readable and maintainable way.
 
- The custom 
