Blog | My Learning Curve

Higher Order Functions

January 3, 2024 · 4 min read

Full Stack Engineer

Introduction

In Javascript, functions are values (first-class citizens). This means that they can be assigned to a variable and/or passed as a value.

const random = function () {
  return Math.random()
}

const giveMeRandom = random // assigns random to a variable

This single piece of knowledge allows us to write functional programming in this language. In functional programming, we heavily use higher-order functions.

The concept

Higher Order Functions is simply a function that takes another function as an argument or returns a function. This is possible because functions are first class citizens in JavaScript, which means that they can be passed as arguments, returned from other functions, and stored in variables as objects.

NB: Taking an other function as an argument is often referred as a callback function, because it is called back by the higher-order function.

NB 2: Returning a function is often referred as a currying function, because it returns a function that takes the remaining arguments.

Currying and HOF

More on that on a later episode. Basically, it allows us to write functions that take multiple arguments, and return a function that takes the remaining arguments. This is often done in order to make a 'specific' function from a 'parent' function.

function curry(f) {
  // curry(f) does the currying transform
  return function (a) {
    return function (b) {
      return f(a, b)
    }
  }
}

// usage
function sum(a, b) {
  return a + b
}

const curriedSum = curry(sum)

console.log(curriedSum(1)(2)) // 3

NB: ⚠️ Function expression are NOT hoisted.

The power of composition

One of the great advantages of using higher order functions is composition.

We can create smaller functions that only take care of one piece of logic. Then, we compose more complex functions by using different smaller functions.

This technique reduces bugs and makes our code easier to read, understand and maintain.

Below is an example of composition.

Given a sample array of numbers, we want to get:

The average grade of this classroom
The average grade for the boys
The average grade for the girls
The highest & lowest grade for the boys
The highest & lowest grade for the girls

// The data set
const grades = [
  { name: 'John', grade: 8, sex: 'M' },
  { name: 'Sarah', grade: 12, sex: 'F' },
  { name: 'Bob', grade: 16, sex: 'M' },
  { name: 'Johnny', grade: 2, sex: 'M' },
  { name: 'Ethan', grade: 4, sex: 'M' },
  { name: 'Paula', grade: 18, sex: 'F' },
  { name: 'Donald', grade: 5, sex: 'M' },
  { name: 'Jennifer', grade: 13, sex: 'F' },
  { name: 'Courtney', grade: 15, sex: 'F' },
  { name: 'Jane', grade: 9, sex: 'F' },
]

// The pure (simple) functions
const isBoy = student => student.sex === 'M'

const isGirl = student => student.sex === 'F'

const getBoys = grades => grades.filter(isBoy)

const getGirls = grades => grades.filter(isGirl)

const average = grades =>
  grades.reduce((acc, current) => acc + current.grade, 0) / grades.length

const maxGrade = grades => Math.max(...grades.map(student => student.grade))

const minGrade = grades => Math.min(...grades.map(student => student.grade))

const classroomAverage = average(grades) // 10.2
const boysAverage = average(getBoys(grades)) // 7
const girlsAverage = average(getGirls(grades)) // 13.4
const highestGrade = maxGrade(grades) // 18
const lowestGrade = minGrade(grades) // 2
const highestBoysGrade = maxGrade(getBoys(grades)) // 16
const lowestBoysGrade = minGrade(getBoys(grades)) // 2
const highestGirlsGrade = maxGrade(getGirls(grades)) // 18
const lowestGirlsGrade = minGrade(getGirls(grades)) // 9

The outer functions, average for example, always take as an input the output from the inner functions. Therefore, the only condition to composition is to make sure that the output and input match (⚠️ type checking).

And because each function is responsible for only one thing, it makes this code easier to debug and to test.

HOFs in practice

See the following TypeScript array snippets:

Filter
Sort
Find

Sources

Eloquent Javascript on higher order
Dam Cosset from dev.to on higher order functions in javascript
Alex Devero on HOF in JS
Javascript.info on Currying

Typescript types

October 6, 2023 · 2 min read

Edouard Misset

Full Stack Engineer

Primitive types

// boolean
let isCool: boolean = false

// number
let age: number = 56

// string
let eyeColor: string = 'brown'
let favoriteQuote: string = `I'm not old, I'm only ${age}`

// null and undefined
let meh: undefined = undefined
let noo: null = null

Complex types

// Array
let pets: string[] = ['cat', 'mouse', 'dragon']
let pets2: Array<string> = ['pig', 'lion', 'dragon']

// Tuple
let basket: [string, number]
basket = ['basketball', 10]

// Enum
enum Size {
  Small = 1,
  Medium = 2,
  Large = 3,
}
let sizeName: string = Size[2]
alert(sizeName) // Displays 'Medium' as its value is 2 above

type animals = 'cat' | 'mouse' | 'dragon'

// Any
let whatever: any = 'aaaaghhhhhh noooooo!'

// void
let sing = (): void => console.log('Lalalala')

// never
let error = (): never => {
  throw Error('blah!')
}

// Type Assertion
let ohHiThere: any = 'OH HI THERE'
let stringLength: number = (ohHiThere as string).length

interface CatArmy {
  count: number
  type: string
}

let dog = {} as CatArmy
dog.count = 5

// Interface
interface RobotArmy {
  count: number
  type: string
  magic?: string
}

let fightRobotArmy = (robots: RobotArmy): void => {
  console.log('FIGHT!')
}
let fightRobotArmy2 = (robots: {
  count: number
  type: string
  magic?: string
}): void => {
  console.log('FIGHT!')
}

// Function
let fightRobotArmyF = (robots: RobotArmy): void => {
  console.log('FIGHT!')
}
let fightRobotArmy2F = (robots: {
  count: number
  type: string
  magic?: string
}): void => {
  console.log('FIGHT!')
}

// *** Class
class Animal {
  constructor(private sound: string) {}
  greet(): string {
    return 'Hello, ' + this.sing
  }
}

let lion = new Animal('Lion')
lion.greet() // Displays 'Hello, Lion'

//In TypeScript, there are several places where type inference
//is used to provide type information when there is no explicit
//type annotation. For example, in this code
let x = 3
// automatically detects x is a number.

// Union Type
let confused: string | number = 'hello'

Generics

October 20, 2021 · One min read

Edouard Misset

Full Stack Engineer

Example with a class

class HoldAnything<T> {
  // T is the name usually given to the generic 'type of data'
  data: T
}

const holdNumber = new HoldAnything<number>()
holdNumber.data = 123
const holdString = new HoldAnything<string>()
holdString.data = 'Hello Wall-e'

Memoization

October 12, 2021 · 2 min read

Edouard Misset

Full Stack Engineer

Memoization is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.

~ Wikipedia

The concept

As our applications grow and begin to carry out heavier computations, there comes an increasing need for speed (🏎️) and the optimization of processes becomes a necessity. When we ignore this concern, we end up with programs that take a lot of time and consume a monstrous chunk of system resources during execution.

Memoization is an optimization technique that speeds up applications by storing the results of expensive function calls and returning the cached result when the same inputs occur again.

~ Philip Obosi

Memoization is built upon two key JS concepts:

Closure (function and the lexical environment where it was declared)
Higher Order Functions (returning / accepting functions from functions)

Examples

Basic example

Simple memoization exemple:

const cache = {}
function memoizedAddTo1000(number) {
  if (number in cache) {
    return cache[number]
  } else {
    console.log('(Long time) calculation...')
    cache[number] = number + 1000
    return cache[number]
  }
}

console.log('First call: ', memoizedAddTo1000(1))
console.log('Second call: ', memoizedAddTo1000(1))

// (Long time) calculation...
// First call: 1001
// Second call: 1001

Advanced example

Memoization of a function:

const cache = {}
function memoize(fn) {
  return function (...args) {
    if (cache[args]) {
      return cache[args]
    }
    const result = fn.apply(this, args)
    cache[args] = result
    return result
  }
}

Resources

Understanding Memoization in JavaScript by better.dev

Memoization Wikipedia

Andrei Neagoie ZTM

Destructuring Assignment

April 28, 2021 · 3 min read

Edouard Misset

Full Stack Engineer

The concept

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. Available from ES6 (2015) onward.

Take values from arrays or properties from objects and set them as local variables.

~ Fireship.io

Examples

With arrays

The bascis

// The basics
const food = ['🥓', '🍕', '🍟', '🍔', '🌮']
const [bacon, , , , taco] = food

console.log(bacon, taco) // 🥓 🌮

Using the spread operator

// Using the spread operator
const food = ['🥓', '🍕', '🍟', '🥬', '🥦']
const [, , , ...noJunkFood] = food

console.log(noJunkFood) // [ '🥬', '🥦' ]

Using a default value

// Using a default value
const food = [undefined, '🍕', '🍟']
const [bacon = '🐖', pizza, fries] = food

console.log(bacon) // 🐖

With objects

The basics

// The basics
const animals = {
  snake: '🐍',
  monkey: '🐵',
  octopus: '🐙',
}
const { octopus } = animals

console.log(octopus) // 🐙

Using the spread operator

// Using the spread operator
const animals = {
  snake: '🐍',
  monkey: '🐵',
  octopus: '🐙',
}
const { ...rest } = animals

console.log(rest) // { snake: '🐍', monkey: '🐵', octopus: '🐙' }

// Overriding a value using the spread operator
const animals = {
  snake: '🐍',
  monkey: '🐵',
  octopus: '🐙',
}
const newAnimals = { ...animals, snake: '🦎' }

console.log(newAnimals) // { snake: '🦎', monkey: '🐵', octopus: '🐙' }

Using a default value

// Using a default value
const animals = {
  snake: '🐍',
  monkey: '🐵',
  octopus: undefined,
}
const { octopus = '🦑' } = animals

console.log(octopus) // 🦑

Renaming property

// Renaming property
const animals = {
  snake: '🐍',
  monkey: '🐵',
  octopus: '🦑',
}
const { octopus: squid } = animals

console.log(squid) // 🦑

Nested property

// Nested property
const family = {
  parent: {
    child: '👶',
  },
}
const {
  parent: { child },
} = family

console.log(child) // 👶

Desctructuring within function arguments

// Desctructuring within function arguments
const user = {
  id: 0,
  name: 'John',
}

function sayHi({ id, name }) {
  console.log(`Hi ${name}!`)
}

sayHi(user) // Hi John!

Bonus

Variables swapping

// Variables swapping
let a = 'foo'
let b = 'bar'

;[a, b] = [b, a]

console.log('a:', a, 'b:', b) // a: bar b: foo

Computed property name

// Computed property name
const rando = randomKey()

const obj = {
  [rando]: 42,
}

const { [rando]: myKey } = obj

Conditionally added property / value

const trueCondition = true
const falseCondition = false

const obj = {
  ...(trueCondition && { '🐕': 'woof' }),
  ...(falseCondition && { '🐈': 'meow' }),
}

console.log(obj)
// { '🐕': 'woof' }

const arr = [
  ...(trueCondition ? ['🐕'] : []),
  ...(falseCondition ? ['🐈'] : []),
]

console.log(arr)
// [ '🐕' ]

Resources

Introduction by Fireship.io

Official documentation on MDN

Adoption on CanIUse

Introduction​

The concept​

Currying and HOF​

The power of composition​

HOFs in practice​

Sources​

Primitive types​

Complex types​

Example with a class​

The concept​

Examples​

Basic example​

Advanced example​

Resources​

The concept​

Examples​

With arrays​

The bascis​

Using the spread operator​

Using a default value​

With objects​

The basics​

Using the spread operator​

Using a default value​

Renaming property​

Nested property​

Desctructuring within function arguments​

Bonus​

Variables swapping​

Computed property name​

Conditionally added property / value​

Resources​

Introduction

The concept

Currying and HOF

The power of composition

HOFs in practice

Sources

Primitive types

Complex types

Example with a class

The concept

Examples

Basic example

Advanced example

Resources

The concept

Examples

With arrays

The bascis

Using the spread operator

Using a default value

With objects

The basics

Using the spread operator

Using a default value

Renaming property

Nested property

Desctructuring within function arguments

Bonus

Variables swapping

Computed property name

Conditionally added property / value

Resources