Galvanize On-site Practice Teach
Halah Al-Shaikhly
Array.prototype.map
Objective
- manipulate data using array's map function
What does map function do?
The map() method creates a new array with the results of calling a provided function on every element in this array.
What does map function do?
The map() method creates a new array with the results of calling a provided function on every element in this array.
var arr = [1,2,3,4,5,6];
What does map function do?
The map() method creates a new array with the results of calling a provided function on every element in this array.
var newArry;
What does map function do?
The map() method creates a new array with the results of calling a provided function on every element in this array.
var newArry = arr.map(callback);
What does map function do?
The map() method creates a new array with the results of calling a provided function on every element in this array.
newArray = arr.map(function(element){
return element + 1;
});What does map function do?
The map() method creates a new array with the results of calling a provided function on every element in this array.
var newArray=arr.map(function(element){
return element + 1;
});//newArray is [ 2, 3, 4, 5, 6, 7 ];var arr = [1,2,3,4,5,6];
What happens to the original array?
The callback function
produces new value for every element in the array
var n = [1,2,3,4,5,6];
var m = n.map(function(){
});
it takes three parameters
The callback function
- The current element
produces new value for every element in the array
var n = [1,2,3,4,5,6];
var m = n.map(function(element){
});
it takes three parameters
The callback function
- The current element
- The current Index
produces new value for every element in the array
var n = [1,2,3,4,5,6];
var m = n.map(function(element, index){
});
it takes three parameters
The callback function
- The current element
- The current Index
- The original array
produces new value for every element in the array
var n = [1,2,3,4,5,6];
var m = n.map(function(element, index,arry){
});
it takes three parameters
The callback function
- The current element
- The current Index
- The original array
produces new value for every element in the array
var n = [1,2,3,4,5,6];
var m = n.map(function(element, index,arry){
return element % 2 === 0;
});
it takes three parameters
it has a return statement, which is the new value per element
Example: map()
var arr = [1,2, 3];
var newArr = arr.map(function(element){
return element * 2;
});
console.log(newArr);What is the result?
callback function with other parameters
var nums = [1,2,3,4,5,6];
var nums2 = nums.map(function(element, index, arr){
if(index % 2 === 0){
return element * 2;
}
else{
return element *5;
}
});
console.log(nums2);What's in nums2?
What does the callback function do?
How many parameters does it take?
What are they?
What happens if the callback function has no return statement?
Quick Exercise
var people = [
{firstName:"Jon", lastName: "Snow"},
{firstName:"Tyrion", lastName: "Lanniser"},
{firstName:"Stannis", lastName: "Baratheon"}
];
var GoTCharacters = people.map(function(element){
return element.firstName + " " + element.lastName;
});What is the content of GoTCharacters?
Predefined callback function
var arr2 = [1,2, 3];
function mulBy10(x){
return x * 10;
}
var newArr = arr2.map(mulBy10);
console.log(newArr);What's in newArr?
What data type am I using the map function on?
What is the result of the map function?
Can the callback function be predefined ?
Exercise
Given the following array
arr = [2,3,5,6,8,9,19,12,4]
using map(), create a new array where every value is squared
result should be
[4,9,25 .... ]
https://repl.it/classroom/invite/zMsJVN
array map
By Halah Al- Shaikhly
array map
- 993
