- 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 calledresult
which 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 arrayarr
.
Callback Application:
result.push(cb(arr[i]));
applies the callback functioncb
to the current elementarr[i]
and pushes the result into theresult
array.
Return:
return result;
returns theresult
array 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
map
function takes a functioncb
as an argument and applies this function to each element in the array. This makesmap
a 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
map
function 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
map
function facilitates function composition, allowing users to chain multiple transformations in a readable and maintainable way.
- The custom