deck.mdx

import { CodeSurfer, CodeSurferColumns, Step, } from "code-surfer"; import { github, vsDark } from "@code-surfer/themes";

export const theme = vsDark;

---

                1. Not all Functions are created equal

                2. Purity✞ and Side Effects

                3. Higher Order Functions

                4. Currying 🍛 and Partial Aplication

                5. Composition

                6. Examples and Questions

  
     The process of building software by composing pure functions
          avoiding shared state, mutable data and side effects.

  A Function is a process that maps the domain to the range.
  
            y = f(x * 2)
  
                f(1) = 2           
                f(2) = 4           
                f(3) = 6

    
    An Object of type Function with properties and methods.

    Can have params, a body and a return value.
    
    Functions are "first class citizens" 🧐 

  const hi = name => `Hi ${name}`

  const greet = name => hi(name)

  const hi = name => `Hi ${name}`

  const greet = name => hi(name)           const greet = hi

const getServerStuff = callback => ajaxCall(json => callback(json))

const getServerStuff = callback =>         const getServerStuff = ajaxCall
  ajaxCall(json => callback(json))       

                    const numbers = [1, 2, 3]

                    doubleStuff(numbers)

                    numbers // ?

   Given the same input, will always return the same output.
   Produces no side effects.

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

  
                            var counter = 1

                            incrementCounter()

                            console.log(counter) // 2  

  
     => Immutable Data Structures (e.g Immutable.js, ImmerJs)
     => Lenses (Functional getters/setters)
     => Freezing, Copying, Spreading
     => Avoiding Certain Methods (splice, pop, push, shift, unshift, foreach, u.a) 
     => Using Pure Methods (slice, concat, filter, map, reduce u.a)
     => Extract and Contain: Write pure Functions and move side Effects "down"

  
     => Immutable Data Structures (e.g Immutable.js, ImmerJs)
     => Lenses (Functional getters/setters)
     => Freezing, Copying, Spreading
     => Avoiding Certain Methods (splice, pop, push, shift, unshift, foreach, u.a) 
     => Using Pure Methods (slice, concat, filter, map, reduce u.a)
     => Extract and Contain: Write pure Functions and move side Effects "down"

---

.

.

.

.

.

.

---

// mutation

.

---

  splice()
  pop()
  push()
  shift()
  unshift()

  slice() 🍕
  concat()
  filter()
  map()
  reduce()

splice()

const pizzaArr = [0,1,2,3]  // const ¯\_( ツ )_/¯
slices.splice(0,2)
pizzaArr // [🍕. 🍕, 🍕] 

pop()
push()
shift()
unshift()

slice() 🍕

const arr1 = [🍕, 🍕, 🍕, 🍕, 🍕];
const arr2 = arr1.slice(0, 2) // [🍕. 🍕, 🍕]

concat()
filter()
map()
reduce()

splice()
pop()

const fruits = [🍏, 🍑, 🍒]
fruits.pop()

push()
shift()
unshift()

slice() 🍕

const fruits = [🍏, 🍑, 🍒]
const poppedFruits = fruits.slice(0, -1)

concat()
filter()
map()
reduce()

splice()
pop()
push()

const arr = [1,2]
arr.push(3)

shift()
unshift()

slice() 🍕
concat()

const arr = [1,2]
const arr2 = arr1.concat[3]

filter()
map()
reduce()

splice()
pop()
push()

const arr = [1,2]
arr.push(3)

shift()
unshift()

slice() 🍕
concat()
...spread operator
const arr1 = [1,2]
const arr2 = [...arr1, 3]

filter()
map()
reduce()

splice()
pop()
push()
shift()

const arr = [1,2,3]
const firstEle = arr.shift()  // 1, [2,3]

unshift()

slice() 🍕

destructuring

const arr1 = [1,2,3]
const [first, ...rest] = arr1

concat()
filter()
map()
reduce()

splice()
pop()
push()
shift()
unshift()

const arr = [1,2]
arr.unshift(-1, 0)
arr // [-1,0,1,2]

slice() 🍕
concat()
filter()
map()
reduce()

...spread operator
const arr = [1,2]
const newArr = [ -1, 0,...arr]

---

Map applies a function to each element in the Array
and returns a new Array

arr.map(x => x * 2)

function doubleItems(arr) {
  let doubledItems = [];
  for (let i = 0; i < arr.length; i++) {
    doubledItems.push(arr[i] * 2)
  }
  return doubledItems
}

const doubleNumber = v => v * 2
const doubled = arr.map(doubleNumber)

---

  Functions that operate on other functions. 
  either by taking them as arguments or by returning them.

   map(fn)

   const addFactory = (x, y) => y => x + y
   const add5 = addFactory(5)
   add5(5) 

  var addFactory = function addFactory(x, y) {
    return function (y) {
    return x + y;
    };
  };
  var add5 = addFactory(5);
  add5(5);

---

.

.

  const multiply = (num1, num2) 
    => num2
    => num1 * num2

  multiply(2)(2)
  
  multiply(2, 2)

  <button id="pay" onclick="once(charge)(data)">
      Pay
  </button>

  <button id="pay" onclick="once(charge)(data)">
      Pay
  </button>

  <button id="pay" onclick="once(charge)(data)">
      Pay
  </button>

  <button id="pay" onclick="once(charge)(data)">
      Pay
  </button>

  <button id="pay" onclick="once(charge)(data)">
      Pay
  </button>

const doubleAndTriple = x 
  => double(triple(x))

arr.map(doubleAndTriple)

var doubleAndTriple = function doubleAndTriple(x) {
  return double(triple(x));
};

arr.map(doubleAndTriple)

const tripleAdd3DivBy5 = x => divBy5(add2(triple(x)))

var tripleAdd3DivBy5 = function tripleAdd3DivBy5(x) {
  return divBy5(add2(triple(x)))
}

---

const compose = (f1, f2) => f1 => f2(f1)
const add2Andtriple = compose(add2, triple)
const tripleAdd3DivBy5 = x => divBy5(add2Andtriple(x))

var compose = function compose(f1, f2) {
  return function (f1) {
    return f2(f1);
  };
};

var add2Andtriple = compose(add2, triple);

var tripleAdd3DivBy5 = function tripleAdd3DivBy5(x) {
  return divBy5(add2Andtriple(x));
}

const compose = (f1, f2, f3) 
  => (f1,f2)
  => f3(f2(f1))

const tripleAdd3DivBy5 = compose(divBy5, add2, triple)

arr.map(tripleAdd3DivBy5)

var compose = function compose(f1, f2, f3) {
  return function (f1, f2) {
    return f3(f2(f1));
  };
};

var tripleAdd3DivBy5 = compose(divBy5, add2, triple);
arr.map(tripleAdd3DivBy5)

const compose = (...functions) 
  => args 
  => functions.reduceRight((arg, fn) => fn(arg), args);

var compose = function compose() {
  for (var _len = arguments.length, functions = new Array(_len), _key = 0; _key < _len; _key++) {
    functions[_key] = arguments[_key];
  }

  return function (args) {
    return functions.reduceRight(function (arg, fn) {
      return fn(arg);
    }, args);
  };
};

const pipe = (...functions) 
  => args 
  => functions.reduce((arg, fn) => fn(arg), args);

var pipe = function pipe() {
  for (var _len = arguments.length, functions = new Array(_len), _key = 0; _key < _len; _key++) {
    functions[_key] = arguments[_key];
  }

  return function (args) {
    return functions.reduce(function (arg, fn) {
      return fn(arg);
    }, args);
  };
};

const tripleAdd3DivBy5 = compose(divBy5,add2,triple)

 const tripleAdd3DivBy5 = pipe(triple,add2,divBy5)

Benefits:

 - Weniger Bugs 
 - Parallelism
 - Modularity
 - Testability
 - Lazy Evaluation
 - Easier to read (Takes time getting used to it)


 Little example for this Presentation: https://github.com/ZeroPie/changelog

 - Libraries:
    https://crocks.dev/
    https://ramdajs.com/
    https://github.com/lodash/lodash/wiki/FP-Guide

 - Nice Book:
    https://github.com/getify/Functional-Light-JS

---

arr.reduce(callback( accumulator, currentValue[, index[, array]] )[, initialValue])

  Like a Swiss Knife.
  Can transform Data in a lot of ways
  You can implement other functions such as map and filter, flatMap and others!
  Sometimes called Fold

arr.reduce(callback( accumulator, currentValue[, index[, array]] )[, initialValue])

Ez right? Nah, not so evident! examples

  const initialValue = 10
  const sodexosUsed = [1,1,1,1]

  const sodexosLeft = sodexosUsed.reduce((accumulator, currentValue) => accumulator - currentValue, initialValue)

  const initialValue = 10
  const sodexosUsed = [1,1,1,1]
  const sodexosReducer = (accumulator, currentValue) => accumulator - currentValue

  const sodexosLeft = sodexosUsed.reduce(sodexosReducer, initialValue)

  const initialValue = 10
  const sodexosUsed = [1,1,1,1]
  const sodexosReducer = (accumulator, currentValue) => accumulator - currentValue

  const sodexosLeft = sodexosUsed.reduce(sodexosReducer, initialValue)