Functional Programming

in Javascript

With

LODASH

ED ATRERO

@edatrero

github.com/eatrero

80/20 of Functional programming

• Using lots of small functions
• Benefit: Easier to test

violations = [
	{
		"uuid" : "916a7bb5-fc2a-4edf-a365-32d599d56366",
		"id" : "box1",
		"type" : "TOO_LARGE"
	},
	{
		"uuid" : "b3f25844-e5f7-4b60-915e-bd983a3deaed",
		"id" : "box1",
		"type" : "TOO_LARGE"
	},
	{
		"uuid" : "916a7bb5-fc2a-4edf-a365-32d599d56366",
		"id" : "box4",
		"type" : "TOO_LARGE"
	},
	{
		"uuid" : "916a7bb5-fc2a-4edf-a365-32d599d56366",
		"id" : "box5",
		"type" : "TOO_SMALL"
	},
	{
		"uuid" : "916a7bb5-fc2a-4edf-a365-32d599d56366",
		"id" : "box7",
		"type" : "TOO_SMALL"
	},
	{
		"uuid" : "916a7bb5-fc2a-4edf-a365-32d599d56366",
		"id" : "box12",
		"type" : "TOO_LARGE"
	},
        { ... }
]

filterViolations(violations, 'page2', "916a7bb5-fc2a-4edf-a365-32d599d56366")

// Outputs:
// [{ boxId: 'box4', messageType: 'TOO_LARGE' },
//  { boxId: 'box5', messageType: 'TOO_SMALL' },
//  { boxId: 'box7', messageType: 'TOO_SMALL' } ]

var pageFilters = { 'page1' : ['box1', 'box2', 'box2b', 'box3'],
		    'page2' : ['box4', 'box5', 'box6', 'box7', 'box8a', 'box8b'],
		    'page3' : ['box9', 'box10', 'box11'],
		    'page4' : ['box12', 'box13'] };

var violations = [
	{
		"uuid" : "916a7bb5-fc2a-4edf-a365-32d599d56366",
		"id" : "box1",
		"type" : "TOO_LARGE"
	},
        { ... } ]

function filterViolationsImp(violations, pageId, uuid){
    var i, out=[];
    for(i=0; i<violations.length; i++){
	if(violations[i].uuid === uuid){
	    if(pageFilters[pageId].indexOf(violations[i].id) !== -1)
                out.push( { "boxId" : violations[i].id, "messageType" : violations[i].type });
	}
    }
    return out;
}

    

var _ = require('lodash');

function filterViolationsChain(violations, pageId, uuid){
    return _.chain(violations)
	.filter((v) => v.uuid === uuid)
	.filter((v) => pageFilters[pageId].indexOf(v.id) !== -1)
	.map((v) => ({ "boxId": v.id, "messageType" : v.type }))
	.value();
}

> npm install lodash

Test Coverage for Deeply Nested Imperative Code

Summary

• Functional Programming: create an assembly line of functions (_.chain)
• Prefer use of .filter, .map, .some over for-loops
• Lots of small functions leads to "flatter" testable code
• More testable code leads to higher quality code (lessBugs === happyUsers === '$$$')

Questions?

@edatrero

github.com/eatrero

• https://slides.com/edatrero/
• Code Examples 
• Lodash Docs
• Functional JavaScript by Michael Fogus