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

Help Us Go Positive!

We offset our carbon usage with Ecologi. Click the link below to help us!

We offset our carbon footprint via Ecologi
 

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