React: Difference between revisions
add upto currying function |
|||
Line 997: | Line 997: | ||
reduceRight simply starts reducing from the end of the array rather than the beginning | reduceRight simply starts reducing from the end of the array rather than the beginning | ||
transform an array into an object | |||
<source lang="js"> | |||
const colors = [ | |||
{ | |||
id: "xekare", | |||
title: "rad red", | |||
rating: 3 | |||
}, | |||
{ | |||
id: "jbwsof", | |||
title: "big blue", | |||
rating: 2 | |||
}, | |||
{ | |||
id: "prigbj", | |||
title: "grizzly grey", | |||
rating: 5 | |||
}, | |||
{ | |||
id: "ryhbhsl", | |||
title: "banana", | |||
rating: 1 | |||
} | |||
]; | |||
const hashColors = colors.reduce((hash, { id, title, rating }) => { | |||
hash[id] = { title, rating }; | |||
return hash; | |||
}, {}); | |||
console.log(hashColors); | |||
// { | |||
// "xekare": { | |||
// title:"rad red", | |||
// rating:3 | |||
// }, | |||
// "jbwsof": { | |||
// title:"big blue", | |||
// rating:2 | |||
// }, | |||
// "prigbj": { | |||
// title:"grizzly grey", | |||
// rating:5 | |||
// }, | |||
// "ryhbhsl": { | |||
// title:"banana", | |||
// rating:1 | |||
// } | |||
// } | |||
</source> | |||
reducing an array with multiple instances of the same value to an array of unique values | |||
<source lang="js"> | |||
const colors = ["red", "red", "green", "blue", "green"]; | |||
const uniqueColors = colors.reduce( | |||
(unique, color) => | |||
unique.indexOf(color) !== -1 ? unique : [...unique, color], | |||
[] | |||
); | |||
console.log(uniqueColors); | |||
// ["red", "green", "blue"] | |||
</source> | |||
=== Higher-Order Functions === | |||
functions that can manipulate other functions; can take functions in as arguments, or return functions, or both | |||
e.g. | |||
<source lang="js"> | |||
const invokeIf = (condition, fnTrue, fnFalse) => | |||
condition ? fnTrue() : fnFalse(); | |||
const showWelcome = () => console.log("Welcome!!!"); | |||
const showUnauthorized = () => console.log("Unauthorized!!!"); | |||
invokeIf(true, showWelcome, showUnauthorized); // "Welcome!!!" | |||
invokeIf(false, showWelcome, showUnauthorized); // "Unauthorized!!!" | |||
</source> | |||
e.g. currying | |||
</source lang="js"> | |||
const userLogs = userName => message => | |||
console.log(`${userName} -> ${message}`); | |||
const log = userLogs("grandpa23"); | |||
log("attempted to load 20 fake members"); | |||
getFakeMembers(20).then( | |||
members => log(`successfully loaded ${members.length} members`), | |||
error => log("encountered an error loading members") | |||
); | |||
// grandpa23 -> attempted to load 20 fake members | |||
// grandpa23 -> successfully loaded 20 members | |||
// grandpa23 -> attempted to load 20 fake members | |||
// grandpa23 -> encountered an error loading members | |||
</source> |