Exploring the array map method and where and how to use it.

1. Array Map Method

2. What is the map method?
What it does is go through
every element of the array,
and returns a new array.

3. What is the array map method?
Each element X at index i is
transformed/mapped to a
new element Y at index i of
the new array.

4. Illustration
1
2
3
1
4
6Map: 2*input

5. Array Map method be looking like?
let new_array = arr.map(function callback( currentValue[,
index[, array]]) {
// return element for new_array
}[, thisArg])

6. Other ways than map
● forEach
● for..of
● for

7. Other ways than map
forEach
const array = [1, 2, 3]
const new_array = []
array.forEach(x => new_array.push(x * x))
console.log(new_array) // [1, 4, 9]

8. Other ways than map
for..of
const array = [1, 2, 3]
const new_array = []
for ( let x of array)
new_array.push(x * x )
console.log(new_array) // [1, 4, 9]

9. Other ways than map
for
const array = [1, 2, 3]
const new_array = []
for ( let x = 0; x < array.length; x++)
new_array.push(array[x] * array[x])
console.log(new_array) // [1, 4, 9]

10. And finally Map
const array = [1, 2, 3]
const new_array = array.map( x => x * x)
console.log(new_array) // [1, 4, 9]

11. Calculate area of rectangles 1
const rectangles = [ { length: 2, width: 3 }, { length: 5, width: 2 }, { length:
10, width: 3 }]
const areaRectangles = rectangles.map( x => x.length * x.width)
console.log(areaRectangles) // [1, 4, 9]

12. Calculate area of rectangles 2
const rectangles = [ { length: 2, width: 3 }, { length: 5, width: 2 }, { length:
10, width: 3 }]
const areaRectangles = rectangles.map( x => x.area = x.length * x.width)
console.log(areaRectangles) // [ { length: 2, width: 3 , area: 6}, { length:
5, width: 2, area: 10 }, { length: 10, width: 3, area: 30 }]

13. Sample angular code
this.commandService .getCommands( {[queryName]: queryValue })
.subscribe((filtered: any) => {
this.commands = filtered.commands.map( (el: any) => {
return {
agent: el.user.displayName,
title: el.name,
client: el.sendername,
date: el.createdAt,
};
});
this.commandTableSource.load(this.commands);
});

14. Sample code React
<div className="gallery">
{ this.props.images.map((el, i) => <img alt={el.item} key={i} src={el.url} />)}
</div>

15. Questions
THE END