Show Menu
Cheatography

Javascript Functional Cheatsheet Cheat Sheet by

Some of the more complex Javascript functional programming for me to remember!

Arrow Functions (Fat Arrows)

Arrow functions create a concise expression that encaps­ulates a small piece of functi­ona­lity. Additi­onally, arrows retain the scope of the caller inside the function elimin­ating the need of self = this.

Exam­ple
// const multiply = functi­on(x,y) {
//   return x * y;
// }
// Can be rewritten as:
// const multiply = (x, y) => { return x * y };
// Since the function is a single expression return and braces are not needed.

const multiply = (x, y) => x * y;
conso­le.l­og­(mu­lti­ply­(5,10)) //50

Function Delegates

Function delegates encaps­ulate a method allowing functions to be composed or passed as data.

Exam­ple
const isZero = n => n === 0;
const a = [0,1,0­,3,­4,0];
conso­le.l­og­(a.f­il­ter­(is­Zer­o).l­en­gth); // 3

Expres­sions Instead of Statements

Statements define an action and are executed for their side effect. Expres­sions produce a result without mutating state.

Stat­ement
const getSal­utation = functi­on(­hour) {
 var saluta­tion; // temp value
 if (hour < 12) {
   salutation = "Good Mornin­g";
}
 else {
   salutation = "Good Aftern­oon­"
}
 return saluta­tion; // mutated value
}

Expr­ess­ion
const getSal­utation = (hour) => hour < 12 ? "Good Mornin­g" : "Good Aftern­oon­";
conso­le.l­og­(ge­tSa­lut­ati­on(­10)); // Good Morning'

Higher Order Functions

A function that accepts another function as a parameter, or returns another function.

Exam­ple
function mapCon­sec­uti­ve(­values, fn) {
 let result = [];
 fo­r(let i=0; i < values.length -1; i++) {
  re­sul­t.p­ush­(fn­(va­lue­s[i], values­[i+­1]));
 }
 return result;
}
const letters = ['a','­b',­'c'­,'d­','­e',­'f'­,'g'];
let twoByTwo = mapCon­sec­uti­ve(­let­ters, (x,y) => [x,y]);
conso­le.l­og­(tw­oBy­Two);
// [[a,b], [b,c], [c,d], [d,e], [e,f], [f,g]]

Method Chaining

Method chains allow a series of functions to operate in succession to reach a final result. Method chains allow
function compos­ition similar to a pipeline.

Exam­ple
let cart = [{name: "­Dri­nk", price: 3.12},
 {name: "­Ste­ak", price: 45.15},
 {name: "­Dri­nk", price: 11.01}];
let drinkTotal = cart.f­ilt­er(­x=> x.name === "­Dri­nk")
 .m­ap(­x=> x.price)
 .r­edu­ce(­(t,v) => t +=v)
 .t­oFi­xed­(2);
conso­le.l­og­(Total Drink Cost $${dri­nkT­otal}); // Total Drink Cost $14.13

Currying

Currying allows a function with multiple arguments to be translated into a sequence of functions. Curried functions can be tailored to match the signature of another function.

Exam­ple
const conver­tUnits = (toUnit, factor, offset = 0) => input => ((offset + input) * facto­r).t­oF­ixe­d(2­).c­onc­at(­toU­nit);
const milesToKm = conver­tUn­its­('km', 1.60936, 0);
const poundsToKg = conver­tUn­its­('kg', 0.45460, 0);
const farenh­eit­ToC­elsius = conver­tUn­its­('d­egrees C', 0.5556, -32);
miles­ToK­m(10); //"16.09 km"
pound­sTo­Kg(­2.5); //"1.14 kg"
faren­hei­tTo­Cel­siu­s(98); //"36.67 degrees C"
const weight­sIn­Pounds = [5,15.4­,9.8, 110];
// const weight­sInKg = weight­sIn­Pou­nds.map(x => conver­tUn­its­('kg', 0.45460,
0)(x));
// with currying
const weight­sInKg = weight­sIn­Pou­nds.ma­p(p­oun­dsT­oKg);
// 2.27kg, 7.00kg, 4.46kg, 50.01kg

Array Manipu­lation Functions

Array Functions are the gateway to functional progra­mming in JavaSc­ript. These functions make short work of most imperative progra­mming routines that work on arrays and collec­tions.
[].ev­ery­(fn)
Checks if all elements in an array pass a test.
[].so­me(fn)
Checks if any of the elements in an array pass a test.
[].fi­nd(fn)
Returns the value of the first element in the array that passes a test.
[].fi­lte­r(fn)
Creates an array filled with only the array elements that pass a test.
[].ma­p(fn)
Creates a new array with the results of a function applied to every element in the array.
[].re­duc­e(f­n(a­ccu­mul­ator, curren­tVa­lue))
Executes a provided function for each value of the array (from left-t­o-r­ight). Returns a single value, the accumu­lator.
[].so­rt(­fn(­a,b)) warning, mutates state!
Modifies an array by sorting the items within an array. An optional compare function can be used to customize sort behaviour. Use the spread operator to avoid mutation. [...a­rr].so­rt()
[].re­ver­se() warning, mutates state!
Reverses the order of the elements in an array. Use the spread operator to avoid mutation. [...a­rr].re­ver­se()

Pipelines

A pipeline allows for easy function compos­ition when performing multiple operations on a variable. Since JavaScript lacks a Pipeline operator, a design pattern can be used to accomplish the task.

Exam­ple
const pipe = functions => data => {
 return functi­ons.re­duce(
  (v­alue, func) => func(v­alue),
 data
 );
};
let cart = [3.12, 45.15, 11.01];
const addSal­esTax = (total, taxRate) => (total * taxRate) + total;
const tally = orders => pipe([
x => x.redu­ce(­(total, val) => total + val), // sum the order
x => addSal­esT­ax(x, 0.09),
x => Order Total = ${x.to­Fix­ed(2)} // convert to text
])(or­ders); // Order Total = 64.62
 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          AngularJS Cheat Sheet
          JavaScript Cheat Sheet
          jasmine JS testing Cheat Sheet