5. 6 Transforming with map

Transforming with map

 

This paragraph  describes a concept called "mapping" in the context of array operations in JavaScript. This concept is fundamental for transforming arrays - taking each element in an array and applying a function to it to produce a new element in a new array. Let's break down the explanation and the provided code for a detailed understanding.

Understanding the Concept of Mapping

Mapping is a process where you take an input array and apply a transformation function to each of its elements. The result is a new array where each element is the transformed version of the corresponding element in the input array. This process does not modify the original array, making the map function a pure function.

Code Breakdown

function map(array, transform) {
  let mapped = [];
  for (let element of array) {
    mapped.push(transform(element));
  }
  return mapped;
}

let rtlScripts = SCRIPTS.filter(s => s.direction == "rtl");
console.log(map(rtlScripts, s => s.name));
// → ["Adlam", "Arabic", "Imperial Aramaic", …]
  

The map function is defined with two parameters: array and transform. Let's analyze its structure step by step:

Initialization of the Mapped Array

 

let mapped = [];
  

A new array named mapped is initialized. This array will store the results of applying the transform function to each element of the input array.

Looping Through the Array:

 

for (let element of array) {

  

A for...of loop is used to iterate over each element in the input array. This loop is suitable for iterating over arrays because it provides a simple and readable syntax for accessing each element directly.

Applying the Transformation Function:

 

mapped.push(transform(element));

  

Inside the loop, the transform function is called with the current element as its argument. The result of this function call, which is the transformed element, is then added to the mapped array using the push method. This process is repeated for every element in the input array.

Returning the Mapped Array:

 

return mapped;


  

After all elements have been transformed and added to the mapped array, the map function returns this new array.

Example Usage

The provided example demonstrates how to use the map function to transform an array of script objects (filtered by their writing direction "rtl" for right-to-left) into an array of their names:

 

let rtlScripts = SCRIPTS.filter(s => s.direction == "rtl");
console.log(map(rtlScripts, s => s.name));

  

1. Filtering Scripts by Direction: The SCRIPTS array is filtered to include only scripts with a direction of "rtl". This filtering process is performed using the filter function described in the previous paragraph.

2. Mapping Script Objects to Names: The resulting array from the filter operation, rtlScripts, is then passed to the map function along with a transformation function (s => s.name). This transformation function takes a script object and returns its name property.

3. Output: The output is a new array containing the names of the scripts that have a direction of "rtl".

Conclusion

The map function is a powerful tool for transforming data in arrays, allowing for clean and readable code. It operates on the principle of applying a given function to each element of an array to produce a new array, without altering the original array. This makes map an essential function in functional programming paradigms, where immutability and pure functions are key concepts.