The borrowing of functional programming concepts into multiparadigm programming languages.

class Crew {
  constructor(awayTeam) {
    this.awayTeam = awayTeam;
    ...
  }
  sendAwayTeam() {
    let i = 0, len = this.awayTeam.length;
    for (i; i < len; i++) {
      let member = this.awayTeam[i];
      if (member.shirt === 'red') {
        this.awayTeam.splice(i, 1);
      }
    }
  }
}

const wontDie = ({shirt}) => 
    shirt !== 'red';
const sendAwayTeam = (team) => 
    team.filter(wontDie);

const crew = new Crew([...]);

crew.awayTeam.length; // 5
crew.sendAwayTeam();
crew.awayTeam.length; // 4

const crew = { awayTeam: [...], ... };

crew.awayTeam.length; // 5
sendAwayTeam(crew.awayTeam);
crew.awayTeam.length; // 5

const crew = { awayTeam: [...], ... };

crew.awayTeam.length; // 5
const updatedCrew = {
    ...crew,
    awayTeam: sendAwayTeam(crew.awayTeam)
}
updatedCrew.awayTeam.length; // 4

vs.

http://codepen.io/uniqname/pen/dpXvwV

http://codepen.io/uniqname/pen/xEOqZq

Λs in hΛskell Curry

Turning a single function that takes multiple arguments into multiple functions that each take a single argument.

const add = (a, b) => a + b;

const add = (a) => (b) => a + b;

add('Iron', 'Carbon'); // Steel

add('Iron')('Carbon'); // Steel

const IronAnd = add('Iron'); // function

const IronAnd = add('Iron'); // function

IronAnd('Wine'); // Awesome music

const tap = (message) => (data) => {
  console.log(message, data);
  return data;
}

somePromise
    .then(tap('initial resolve: ')) // initial resolve: [someValue]
    .then(someSortofTransform)
    .then(tap('result of transform: ')) // result of transform [someOtherValue]

generic is the key word here. Look for and abstract patterns.

const hasPropOfVal = (prop) => (targetValue) => (obj) => obj[prop] === targetValue;

famousShips.filter(isSerenity);

const hasNameOf = hasPropOfVal('name');

const isSerenity = hasNameOf('Serenity');

`compose` or `pipe`, both effectively accomplish the same thing. Use which ever you prefer.

Combining two or more functions to create a single new composite function.

const pluck = (propName) => (obj={}) => obj[propName];

const mapTo = (propName) => (list=[]) => list.map(pluck(propName))

const dedupePrimitives = (list) => [...(new Set(list))];

const reInflateByPropFromSrc = (prop) => (src) => (list) => 
    list.map(item => src.find(i => i[prop] === item));

const dedupeBy = (someProp) => {
    
    

    





};

const reInflateFromSrc = reInflateByPropFromSrc(someProp);

return (list) => compose(
    



)(list);

reInflateFromSrc(list)
dedupePrimitives
mapTo(someProp)

http://codepen.io/uniqname/pen/XjKJxK

Many libraries come with a compose helper (lodash, underscore, Redux, Ramda), but it's also easy to roll your own.

    const compose = (...fns) => (val) => fns.reduceRight((v, fn) => fn(v), val);

or pipe

    const pipe = (...fns) => (val) => fns.reduce((v, fn) => fn(v), val);

Any function which either accepts a function as an argument, or returns a function.

const map = function (mappingFn, list) { 
    return list.map(mappingFn);
}

const getValueOf = function (propName)  {
    return function (obj) {
        return obj[propName];
    } 
}

Λrrow function (LΛmbdΛ) Λll the Things

I know much smarter people than me have said arrow functions aren't for every scenario, and they are right, but seek to minimize scenarios where they can't be used.

const map = (mappingFn, list) =>
    list.map(mappingFn);

const getValueOf = (propName) => (obj) => 
    obj[propName];

This makes currying fun and easy!

Write only single Arity Functions (Currying)

At least until you get very comfortable with currying and why it is valuable.

const makeRequest = (appKey) => (user) => (url) => {

    if (validateAppKey(appKey)) {

        if (authorizedUser(user)) {

            return request(url);

        } else { 
            return { 
                statusCode: 401, 
                message: 'user not authorized' 
            };
        }
    
    } else {
        return {
            statusCode: 401,
            message: 'app not authorized.'
        };
    }

}

const makeAppRequest = makeRequest('empire.gov');

const makeAppRequestAsUser = makeAppRequest('L0rD_V8r');

makeAppRequestAsUser('/api/v1/death-star/plans');

A device, system or object which can be viewed in terms of its inputs and outputs without any knowledge of its internal workings. Its implementation is "opaque" (black)

wikipedia.org "Black box" (https://en.wikipedia.org/wiki/Black_box)

A blΛck box is "pure" in Λ functionΛl sense.

A side effect is defined as...
 

...a change of system state or observable interaction with the outside world that occurs during the calculation of a result.

https://drboolean.gitbooks.io/mostly-adequate-guide/content/ch3.html

export default (secret) =>

    base64(secret);

export default (secret) => 

    base64(secret);
            
            
            
            
            

import base64 from 'base64';

export default (secret='') =>

    base64(secret);

MΛke Λll dependencies Explicit

Either import dependencies into a single responsibility module, or pass them into your single responsibility function.

const arr = [...]
let flag = false;

for (let i = 0, len = arr.length; i < len; i++) {
    if ( arr[i].hasValue ) {
        flag = true;
    }
}

const arr = [...]
let flag = false;

for (let i = 0, len = arr.length; i < len; i++) {
    if ( arr[i].hasValue ) {
        flag = true;
    }
}

const arr = [...];
const flag = arr.some((item={}) => item.hasValue);

initiΛlizing or reΛssigning vΛriΛbles is Λ Smell.

This is a sign of an external dependency. If it's needed, pass it around like a bad white elephant gift.

const killjoys = {
    "Dutch": "The Leader",
    "John Jaqobis": "The Trusted Friend"
};

const addToTeam = (name, role) => (team) => {
    team[name] = role;
    return team;
};

addToTeam("D'avin Jaqobis", "The Bad Boy")(killjoys);

const killjoys = {
    "Dutch": "The Leader",
    "John Jaqobis": "The Trusted Friend"
};

const addToTeam = (name, role) => (team) => {
    team[name] = role;
    return team;
};
            
addToTeam("D'avin Jaqobis", "The Bad Boy")(killjoys);
            
            

const killjoys = {
    "Dutch": "The Leader",
    "John Jaqobis": "The Trusted Friend"
};

const addToTeam = (name='', role='') => (team={}) => ({
    ...team,
    [name]: role;
});

const complete = addToTeam("D'avin Jaqobis", "The Bad Boy")(killjoys);

See ImmutΛbles Tip #3

Patience, we're getting there.

const randomBetween = (min=0, max=10) => 
    Math.floor(Math.random() * max) + min;  

Ok, so you can't always enforce functional purity, but you can control when and where it happens.

Push Impurities to the edges of your ΛpplicΛtion

When data first arrives, or is about to leave the application flow (e.g. network response/requests, file system access, rendering, etc.)

A dead giveaway that a function is impure is if it makes sense to call it without using its return value. For pure functions, that's a noop.

— Eric Elliott (@_ericelliott) August 29, 2016

const iconic = 'To boldly go where no one has gone before';

const englishSnob = iconic.replace('boldly go', 'go boldly'); 
// 'To go boldly where no one has gone before'

iconic; // 'To boldly go where no one has gone before'

const num = 42;

num.toPrecision(3); // '42.0'

num; // 42;

const arr = [1, 1, 3, 8];

arr.unshift('THX')

arr; // ['THX', 1, 1, 3, 8];

const fn = () => {};

fn.$inject = ['does', 'this', 'look', 'familiar', '?'];

fn.$inject; // ['does', 'this', 'look', 'familiar', '?']

StΛte!

(or lack thereof)

A reliance on external state is one of the most common sources of unintentional side effects.

-cory brown

This prevents one from inΛdvertently Λffecting shΛred stΛte...

...SINCE THERE EFFECTIVELY IS NONE.

Others return Λ new context.

Forget the mutΛting methods even exist. 🙈

Except when peer reviewing 🤔

const HPActors = ['Richard Harris', 'Daniel Radcliff', 'Emma Watson', 'Rupert Grint'];

PoAActors = HPActors
              .slice(1) //['Daniel Radcliff', 'Emma Watson', 'Rupert Grint']
              .concat('Michael Gambon') 
              //['Daniel Radcliff', 'Emma Watson', 'Rupert Grint', 'Michael Gambon']

Not So Bad (slice, concate)

const crewStatus = {
    Zoe: 4,  Wash: 4,
    Kaylee: 4, Jayne: 2
};

delete crewStatus.Jayne; //You betray one of my crew, you betray me.

Even worse

Freeze RΛy

const HPActors = Object.freeze(['Richard Harris', 'Daniel Radcliff', 'Emma Watson', 'Rupert Grint']);

PoAActors = Object.freeze(HPActors
              .slice(1) //['Daniel Radcliff', 'Emma Watson', 'Rupert Grint']
              .concat('Michael Gambon'))
              //['Daniel Radcliff', 'Emma Watson', 'Rupert Grint', 'Michael Gambon']

Better?

import deepFreeze from 'deep-freeze';

const HPActors = deepFreeze(['Richard Harris', 'Daniel Radcliff', 'Emma Watson', 'Rupert Grint']);

PoAActors = deepFreeze(HPActors
              .slice(1) //['Daniel Radcliff', 'Emma Watson', 'Rupert Grint']
              .concat('Michael Gambon'))
              //['Daniel Radcliff', 'Emma Watson', 'Rupert Grint', 'Michael Gambon']

Betterer?

Uh, Now what?

import deepFreeze from 'deep-freeze';

const crewStatus = deepFreeze({
    Zoe: 4,  Wash: 4, Kaylee: 4, Jayne: 2
});

delete crewStatus.Jayne; //false

crewStatus; // {Zoe: 4,  Wash: 4, Kaylee: 4, Jayne: 2}

LiterΛlly SpreΛd The Rest Out

const HPActors = ['Richard Harris', 'Daniel Radcliff', 'Emma Watson', 'Rupert Grint'];

const [ origDumbledor, ...trio] = HPActors;

const PoAActors = ['Michael Gambon', ...trio]; 
//['Michael Gambon', 'Daniel Radcliff', 'Emma Watson', 'Rupert Grint']

Better

const crewStatus = {
    Zoe: 4, Wash: 4,
    Kaylee: 4, Jayne: 0
};

const {Jayne, ...newCrew} = crewStatus; // Next time you decide to stab me in the back...

newCrew; // { Zoe: 4, Wash: 4, Kaylee: 4 }

const oldCrew = { 
    ...newCrew, Jayne: 1 // ...have the guts to do it to my face.
};

oldCrew; // { Zoe: 4, Wash: 4, Kaylee: 4, Jayne: 1 }

Extraction

Composition

You MΛy Not Need Tip #2

While I may concede your fancy performance test showing `.map` to be slower than a `for` loop, I also declare it to be completely irrelevant.

I can assure you, your "proof" of a two fold  (let alone the far more likely fractional) performance gain of a `for` loop over `.map` will not save you from latency of the miles of copper between request and response, the relative slow-motion rate of a disk read or write, nor the sloth's pace of a paint to the screen.

I/O is your performance bottle neck. Not your use of `.map`.

JavaScript engines have seen incredible performance gains during that time.

JIT compilers alone have all but negated any slow code paths with their ability to optimize "hot" code on the fly.

Engines have tended to optimize on common patterns, and functional style JavaScript is only getting started.

Good luck finding any such data for JavaScript engines done in the last two years.

In fact, the spec calls specifically for native functions like `map`, etc. to implement tail call.

Don't misunderstand, performance is important, but when faced with competing interests, favor maintenance over performance.

Real, measurable money can be tied to maintenance, and that is going to be the first place to optimize.

Maintainable patterns are not the same as familiar patterns. Maintainability is a quality of the code itself, not just a function of a developer's  or team's experience.

Maintainable code is robust, focused and has the right level of abstraction.

Declarative code is generally more maintainable and bug free than imperative code, even when the imperative approach is the more familiar.

A `.map` beats a `for...` loop for maintenance and likelihood of buglessness...

Every

Single

Time