JavaScript:
map is very similar to forEach (both are used to process arrays), except that forEach simply iterates over an array and allow us to do something with each element, while map iterates over an array, BUT returns a new array where each element of the new array is. Examples:
1a. Map:
var array = [1, 2, 3];
var newArray = array.map(function(number){
return number * 2;
})
console.log(newArray);
// [ 2, 4, 6 ]
1b. To achieve the same thing with forEach, you need a longer code:
var array = [1, 2, 3];
var newArray = [];
array.forEach(function(number){
newArray.push(number * 2);
})
console.log(newArray);
// [ 2, 4, 6 ]
2. Another example of using map (turning the first letters of an array’s elements into capital letters):
var cities = [”miami”, ”barcelona”, ”madrid”];
var capsCities = cities.map(function(city){
return city.charAt(0).toUpperCase() + city.slice(1);
})
console.log(capsCities);
// [”Miami”, ”Barcelona”, ”Madrid”]
3a. Using .reduce to get the sum of a number array + print also currentIndex and the array:
var numbers = [2, 4, 6, 8];
var total = numbers.reduce(function(previous, current, currentIndex, originalArray){
console.log(previous, current, currentIndex, originalArray);
return previous + current;
}, 0);
console.log(total);
// 20
3b. Using .reduce to get the sum of a number array:
var numbers = [2, 4, 6, 8];
var total = numbers.reduce(function(previous, current){
/*console.log(previous, current);*/
return previous + current;
}, 0);
console.log(total);
// 20
4a. Calculate the sum of an array’s objects’ properties (like age of persons) using .reduce:
var people = [
{ name: ”Candice”, age: 25 },
{ name: ”Tammy”, age: 30 },
{ name: ”Allen”, age: 49 },
{ name: ”Nettie”, age: 21 },
{ name: ”Stuart”, age: 17 }
];
var ages = people.reduce(function(sum, person){
return sum + person.age;
}, 0);
console.log(ages);
// 142
4b. Calculate the sum and average of an array’s objects’ properties using .reduce:
var menu = [
{ name: ”Carrots”, calories: 150 },
{ name: ”Steak”, calories: 350 },
{ name: ”Broccoli”, calories: 120 },
{ name: ”Chicken”, calories: 250 },
{ name: ”Pizza”, calories: 520 }
];
var totalCalories = menu.reduce(function(previous, current){
return previous + current.calories;
}, 0);
var averageCalories = totalCalories / menu.length;
console.log(averageCalories);
// 278
5. Using forEach to calculate sum of elements in an array:
var numbers = [1, 2, 3, 4];
var total = 0
numbers.forEach(function(number){
total += number;
})
console.log(total);
// 10
6. Find certain elements in an array with .filter:
var numbers = [1, 2, 3, 4, 5, 6];
var evens = numbers.filter(function(number){
return number % 2 === 0;
});
console.log(evens);
// [ 2, 4, 6 ]
7a. Sorting an array’s elements in numerical order from lowest to highest:
var numbers = [22, 23, 99, 68, 1, 0, 9];
console.log(numbers.sort());
// [ 99, 68, 23, 22, 9, 1, 0 ]
7b. Sorting an array’s elements in numerical order from highest to lowest:
var numbers = [22, 23, 99, 68, 1, 0, 9];
numbers.sort(function(a, b){
// switch the order of the comparison
return b – a;
});
console.log(numbers);
// [ 99, 68, 23, 22, 9, 1, 0 ]
8. The thisIsMyCB function below is called a callback or higher order function, i.e. you pass a function as an argument and use it inside the other function (more about callback functions: http://callbackhell.com):
function main(thisIsMyCB){
var something = ”bla”;
thisIsMyCB(something);
}
main(function(something){ /*FUNCTION HERE REFERS TO thisIsMyCB*/
console.log(”I’m anonymous ” + something)
})
9. Sort string array alphabetically:
var words = [”Hello”, ”Goodbye”, ”First”, ”A”, ”a”, ”Second”, ”Third”];
words.sort()
console.log(words);
10. Sort string array in descending alphabetical order:
var words = [”Hello”, ”Goodbye”, ”First”, ”A”, ”a”, ”Second”, ”Third”];
words.sort(function(a, b){
if (a > b){ return -1; }
if (a < b){ return 1; } return 0; }); console.log(words); 11. Sort string array by length: var words = [”Hello”, ”Goodbye”, ”First”, ”A”, ”a”, ”Second”, ”Third”]; words.sort(function(a, b){ if (a.length > b.length){ return -1; }
if (a.length < b.length){ return 1; }
return 0; });
console.log(words);
//[ ’Goodbye’, ’Second’, ’Hello’, ’First’, ’Third’, ’A’, ’a’ ]
12. Lodash JS library: https://lodash.com/docs/
