Skip to content

Instantly share code, notes, and snippets.

@HassanAlgoz

HassanAlgoz/filter-map-reduce.js

Last active April 7, 2018 12:28
Show Gist options
  • Save HassanAlgoz/24738b09a2729dd82a723fbf3f0c7e13 to your computer and use it in GitHub Desktop.
Save HassanAlgoz/24738b09a2729dd82a723fbf3f0c7e13 to your computer and use it in GitHub Desktop.
Download ZIP
Tutorial on JavaScript Array Methods: .filter .map .forEach and .reduce
Raw
filter-map-reduce.js
// Arrow Functions
function isEven(number) {
return (number % 2 === 0);
}
let isEven = function (number) {
return (number % 2 === 0);
}
// drop the 'function' keyword, and append '=>' after function parameters
let isEven = (number) => {
return (number % 2 === 0);
}
// you can event drop the parenthesis if the function has only one parameter
let isEven = number => {
return (number % 2 === 0);
}
// two parameters
let add = (a, b) => {
return a + b;
}
// If there is one statement, the 'return' keyword is implicit,
// and we can remove the brackets
let add = (a, b) => a + b;
let array = [600, 400, 300, 1402, 948, 133, 200, 99];
// find
function find(array, value) {
for(let i = 0; i < array.length; i++) {
if (array[i] === value) {
return value;
}
}
}
array.find(function(value) {
return value < 500;
})
array.find(x => x < 500) // 400
// findIndex
function findIndex(array, value) {
for(let i = 0; i < array.length; i++) {
if (array[i] === value) {
return i;
}
}
// otherwise
return -1;
}
array.findIndex(function(value) {
return value === 300;
})
array.findIndex(x => x === 300) // 2
// filter, map, reduce, and forEach
// Filter: https://www.w3schools.com/jsref/jsref_filter.asp
// The filter() method returns a new array filled with all array elements that pass a test (provided as a function)
// filter() does not change the original array
let lessThan300 = array.filter(function(value) {
return value <= 300;
})
let lessThan300 = array.filter(value => value <= 300)
// Map: https://www.w3schools.com/jsref/jsref_map.asp
// The map() method returns a new array with the results of calling a function for every array element
// map() does not change the original array
let products = [
{ name: "Apple", description: "asdf", price: 18.99 },
{ name: "Banana", description: "ghjklmn", price: 3.99 },
{ name: "Kabab", description: "ghjklmn", price: 4.99 },
]
// Get an array of the product prices:
let prices = products.map(function (product) {
return product.price;
})
// Using Arrow Function syntax:
let prices = products.map(product => product.price)
// Chaining map, filter, and forEach
let sum = 0;
products.filter(product => product.price <= 5.0)
.map(product => product.price)
.forEach(price => sum += price)
console.log(sum)
// Note: The array 'products' hasn't changed
console.log(products)
// Reduce: https://www.w3schools.com/jsref/jsref_reduce.asp
// Using reduce you can say:
let sum = products.filter(product => product.price <= 5.0)
.map(product => product.price)
.reduce((acc, p) => acc + p, 0)
// in reduce: 0 is the initial value of sum
// acc is the accumulator (sum)
// p is the array element (price)
let users = [
{ name: "Abdurrahman Yusuf", age: 19 },
{ name: "Abdullah Ahmed", age: 33 },
{ name: "Abdulraheem Adel", age: 22 },
{ name: "Hosam Tawfiq", age: 54 },
{ name: "Mohammad Ali", age: 67 },
]
let abdu_users = users.filter(user => user.name.toLowerCase().startsWith('abdu'))
console.log(users)
console.log(abdu_users)
let isBigEnough = users.every(u => u.age > 18)
let object = {
A: 1,
B: 5,
C: "km"
}
let five = "B"
object.A
object[five]
object['C']
// concat
let array2D = [
[0, 1],
[2, 3],
[4, 5]
]
let flat = array2D.reduce(
(acc, elem) => acc.concat(elem),
[]
);
// counts
let data = [
'car',
'truck',
'truck',
'car',
'bike',
'van',
'bike',
'car',
'car'
]
data.reduce((obj, item) => {
if (!obj[item]) {
obj[item] = 0
}
obj[item]++
return obj;
}, {})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment