map-and-filter-array.js

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(', '));