Functional JavaScript Cheatsheet

If it has functions, it's a functional langugage

#Basics

Intro to Functional JavaScript

Functional programming follows several principles: No side effects (e.g. changing of memory states by variable). Working with Higher Order Functions and Pure Functions.

Pure Functions

// for each x, y will be returned (f(x)=x^2)
function square(x) {
  return x*x
}
square(2) // 4
square(3) // 9
Like functions in mathematics, Pure Functions return exactly what you expect. They can also get parameters, but usually do not access unpredictable things like Date.now().
For every same input it returns the same output (deterministic).

Higher-Order Functions

function higherOrder(secondFunction) {
  return secondFunction
}

function f() {
  return "f-function"
}

higherOrder(f)      // [Function: f]
higherOrder(f)()    // f-function
A higher-order-function is a function, that receives a functions as a parameter, and returns one.

Map

const data = [
  {name: "Max", age: 24},
  {name: "Tom", age: 21},
  {name: "Anna", age: 24},
  {name: "Carl", age: 29}
]

const names = data.map((obj) => {
  return obj.name
})

names // [ 'Max', 'Tom', 'Anna', 'Carl' ]
Map is a high-order function. It passes through every element in the array, and returns the name of every element. This name is then stored in an array. It transforms an array of objects into an array.

Mapping twice

// using data from the previous Map example
const names = data.map((obj) => obj.name).map(
  name => "Person: " + name
)

names /* [ 'Person: Max', 
'Person: Tom', 'Person: Anna', 
'Person: Carl' ] */
Map can be chained. Using the same basis like in the example before, we now can map again, to add something to each element of our resulting array.

Map for updating & shorthand

let arr = [1, 2, 3, 4]

// update the array with doubled values
arr = arr.map(item => {
  return item * 2 
})
// alternative, shorthand syntax
arr = arr.map(item => item * 2)
Yes, with map we can map over object and update it the same time.

Currying Functions

const greet = (time, title, lastname) => {
  console.log(
      `Good ${time}, ${title} ${lastname}`
  )
}
greet("Morning", "Mr.", "Mozart")
// Good Morning, Mr. Mozart
const greet = time => 
  title => 
      lastname => 
          `Good ${time}, ${title} ${lastname}`

greet("Morning")("Mr.")("Mozart")
Below you see the same function just curried. By currying the function is partially applied, where the function arguments are passed one after the other and in the meantime are held in a new function, which can be reused arbitrarily.

Haskell-like, curried function

add = (a) => (b) => a + b
// no "let" or "const needed
add(2)(3) // 5
// is the same as: 
function add(a) {
  return function(b) {
    return a + b
  }
}
Below you see the same function just curried. By currying the function is partially applied, where the function arguments are passed one after the other and in the meantime are held in a new function, which can be reused arbitrarily.