Created
June 6, 2017 14:31
-
-
Save ryanguill/243c632ac1ac39a5906cd1f69fd3a7b8 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import _ from 'lodash'; | |
import map from "lodash/fp/map"; | |
import filter from "lodash/fp/filter"; | |
import flow from "lodash/fp/flow"; | |
const input = ["a", "b", "c", "d", "e", "f", "g"]; | |
const vowels = ["a", "e", "i", "o", "u"]; | |
const isNotVowel = (char) => !vowels.includes(char); | |
const upperCase = (str) => str.toUpperCase(); | |
/* | |
the easiest way and no-dep way is to use a reducer, you can combine | |
the two operations into one "iteration" of your data. Remember that at | |
their core, filter and map are specialized reductions. You can combine the two. | |
*/ | |
const reducer = (a, b) => { | |
if (isNotVowel(b)) { | |
a.push(upperCase(b)); | |
} | |
return a; | |
} | |
const result1 = input.reduce(reducer, []); | |
/* | |
an alternative is to use something like lodash's chain, you wrap your initial value | |
and then can use the same operations you would normally use and in the right order, | |
and then call value to unwrap the result. Similar to promises in that way (I wont | |
use the M word). Lodash can then understand that youre trying to do both operations | |
at the same time and wont create intermediate arrays between steps and you'll still | |
only get one "iteration" of the data. | |
*/ | |
const result2 = _(input) | |
.filter(isNotVowel) | |
.map(upperCase) | |
.value(); | |
/* | |
another way of doing the same in lodash but using lodash/fp instead is to use flow | |
- you actually get out a function that then you can just call on your input. | |
*/ | |
const result3 = flow( | |
filter(isNotVowel), | |
map(upperCase) | |
)(input); | |
//doing a silly join because webpackbin collapses arrays in the console | |
console.log([result1, result2, result3].map(x => x.join(', '))); | |
/* | |
also want to mention that if you were just trying to do two mapping operations together | |
you can use compose. `.map(a).map(b)` is the same thing as `map(b ⋅ a)` which in real | |
javascript is `.map(compose(a, b))` - this would again only take one iteration of the data. | |
Here is a simple example with a compose we could write, but lodash (and plenty of other libraries) | |
has compose built in if youd rather use it. | |
*/ | |
const increment = (x) => x += 1; | |
const double = (x) => x *= 2; | |
const compose = (f,g) => (x) => g(f(x)); | |
const incrementAndDouble = compose(increment, double); | |
const input2 = [1, 2, 3, 4, 5, 6]; | |
//doing a silly join because webpackbin collapses arrays in the console | |
console.log(input2.map(incrementAndDouble).join(', ')); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment