Functional programming

Favor expressions/declarations over statements

Declarative programming paradigm

Computation is made through evaluation of mathematical functions

Why FP in Javascript?

Object-oriented JS get tricky

First class citizen functions

es6

How?

reduce

side-effects

map

pure functions

loops

function composition

Side effect

Any application state change that is observable outside the called function other than its return value

Most common side-effects

Writing to a file - file

Writing to the network - network server

console.log - javascript console

Modifying any external variable or object property - object

Isolate side-effects

Separate your side effects from your program logic

extend

refactor

debug

test

maintain

Pure functions

input1

output1

Given the same input, will always return the same output

Side effects

let state = 10;

function isValid() {
    if (state == 10)
        return 'valid';
    else 
        return 'invalid';
}

isValid() // 'valid'

function mutateState() {
    state = state + 1;
}

mutateState()

isValid() // 'invalid'

Side effects

Inconsistent output

Impure

Add dependencies as arguments

Erase side effects

How?

function isValid(state) {
    if (state == 10)
        return 'valid';
    else
        return 'invalid';
}

isValid(10) // 'valid'

isValid(11) // 'invalid'

No side effects

Consistent output

Pure

Avoid loops

map

reduce

filter

for

forEach

for in

const data = [1, 2];

function multArrBy2(array) {
  const newArr = [];

  for (let i = 0; i < array.length; i++) {
    newArr.push(array[i] * 2);
  }

  return newArr;
}

console.log(multArrBy2(data)) // [2, 4]

function multiply(a) {
    return function(b) {
        return a * b;
    }
}
const multiplyBy2 = multiply(2);

console.log(
    data.map(multiplyBy2)
); // [2, 4]

.map

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

.reduce

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

.filter

Currying

function greeting(msg, name) {
  console.log(msg + ' ' + name);
}
// greeting('Hello', 'GDG')

function greetingCur(msg) {
  return function(name) {
    console.log(msg + ' ' + name);
  }
}
// greetingCur('Hello')('GDG')


const sayHelloTo = greetingCur('Hello');
sayHelloTo('GDG')

A curried function always returns another function with an arity of 1 until all of the arguments have been applied

Function composition

The process of combining two or more functions to produce a new function.

Testability

Pure functions are easier to test

Lots of reuse - less code to test

Next topics

functors, applicatives, monads

Libraries

RamdaJS

lodash-fp

Francisco Magalhães

@franciscomags

@FranciscoMSM

https://github.com/FranciscoMSM/fp-in-js

Do you want to know more?

https://github.com/MostlyAdequate/mostly-adequate-guide
https://medium.com/javascript-scene

code