Functional Programming Fundamentals

This skill covers the foundational concepts of functional programming. Master these before diving into fp-ts types like Option, Either, and Task. These concepts apply universally across functional programming languages and libraries.

Why Functional Programming?

Functional programming provides:

• Predictability: Pure functions always produce the same output for the same input

• Testability: No mocking of global state or dependencies

• Composability: Small functions combine into complex behavior

• Maintainability: Isolated pieces are easier to understand and change

• Parallelization: Pure functions can safely run concurrently

1. Pure Functions and Referential Transparency

What is a Pure Function?

A pure function has two properties:

• Same input, same output: Given the same arguments, it always returns the same result

• No side effects: It doesn't modify external state, perform I/O, or cause observable changes

Why It Matters

Pure functions are:

• Cacheable: Results can be memoized since they're deterministic

• Portable: No hidden dependencies on external state

• Testable: No setup/teardown of global state needed

• Parallelizable: Safe to run concurrently without race conditions

• Reasoned about locally: You can understand them without knowing the entire system

Examples

// PURE: Same input always gives same output const add = (x: number, y: number): number => x + y

const greet = (name: string): string => Hello, ${name}!

const head = <T>(arr: readonly T[]): T | undefined => arr[0]

// IMPURE: Depends on external state let counter = 0 const incrementCounter = (): number => { counter += 1 // Mutates external state return counter }

// IMPURE: Different output for same input const randomNumber = (): number => Math.random()

// IMPURE: Performs I/O const logMessage = (msg: string): void => { console.log(msg) // Side effect: writes to console }

// IMPURE: Depends on mutable external state const config = { apiUrl: 'https://api.example.com' } const getApiUrl = (): string => config.apiUrl // Could return different values

Referential Transparency

An expression is referentially transparent if it can be replaced with its value without changing program behavior.

// Referentially transparent const double = (x: number): number => x * 2 const result = double(5) + double(5) // Can be replaced with: 10 + 10 = 20

// NOT referentially transparent let count = 0 const incrementAndGet = (): number => { count += 1 return count } const result2 = incrementAndGet() + incrementAndGet() // Cannot replace with values: first call returns 1, second returns 2 // Result is 3, not 1 + 1 = 2

Making Impure Functions Pure

// IMPURE: Modifies input const addItem = (arr: string[], item: string): void => { arr.push(item) // Mutates the original array }

// PURE: Returns new array const addItem = (arr: readonly string[], item: string): readonly string[] => [...arr, item]

// IMPURE: Depends on Date const getAge = (birthYear: number): number => new Date().getFullYear() - birthYear

// PURE: Accept date as parameter (dependency injection) const getAge = (birthYear: number, currentYear: number): number => currentYear - birthYear

// IMPURE: Reads from database const getUser = async (id: string): Promise<User> => await database.find(id)

// Functional approach: Return a description of the effect // (This is the concept behind Task and IO in fp-ts) const getUser = (id: string): Task<User> => () => database.find(id)

Common Mistakes

// MISTAKE 1: Mutating arguments const sortArray = (arr: number[]): number[] => { return arr.sort((a, b) => a - b) // sort() mutates the original! }

// FIX: Create a copy first const sortArray = (arr: readonly number[]): number[] => [...arr].sort((a, b) => a - b)

// MISTAKE 2: Using Date, Math.random, or other non-deterministic APIs const generateId = (): string => id-${Date.now()}-${Math.random()}

// FIX: Accept dependencies as parameters const generateId = (timestamp: number, random: number): string => id-${timestamp}-${random}

// MISTAKE 3: Hidden dependencies via closure const multiplier = 2 const double = (x: number): number => x * multiplier // Captures external variable

// FIX: Make dependencies explicit const multiply = (factor: number) => (x: number): number => x * factor const double = multiply(2)

2. Currying and Partial Application

What is Currying?

Currying transforms a function that takes multiple arguments into a sequence of functions that each take a single argument.

// Uncurried: takes all arguments at once const add = (x: number, y: number, z: number): number => x + y + z add(1, 2, 3) // 6

// Curried: takes one argument at a time const addCurried = (x: number) => (y: number) => (z: number): number => x + y + z addCurried(1)(2)(3) // 6

Why It Matters

Currying enables:

• Partial application: Create specialized functions by supplying some arguments

• Composition: Single-argument functions compose cleanly

• Reusability: Create families of related functions from one definition

• Deferred computation: Supply arguments as they become available

Currying in Practice

// Curried function definition const multiply = (x: number) => (y: number): number => x * y

// Create specialized functions through partial application const double = multiply(2) const triple = multiply(3)

double(5) // 10 triple(5) // 15

// Curried comparison helpers const greaterThan = (threshold: number) => (value: number): boolean => value > threshold

const isAdult = greaterThan(17) const isExpensive = greaterThan(100)

isAdult(25) // true isExpensive(50) // false

Currying for Array Methods

// Curried filter predicate const filterBy = <T>(predicate: (item: T) => boolean) => (items: readonly T[]): T[] => items.filter(predicate)

// Create reusable filters const keepPositive = filterBy((n: number) => n > 0) const keepEven = filterBy((n: number) => n % 2 === 0)

keepPositive([-1, 2, -3, 4]) // [2, 4] keepEven([1, 2, 3, 4, 5, 6]) // [2, 4, 6]

// Curried map transformer const mapWith = <A, B>(fn: (a: A) => B) => (items: readonly A[]): B[] => items.map(fn)

const doubleAll = mapWith((n: number) => n * 2) const stringify = mapWith(String)

doubleAll([1, 2, 3]) // [2, 4, 6] stringify([1, 2, 3]) // ['1', '2', '3']

Partial Application vs Currying

// Partial application: fixing some arguments of a function const greet = (greeting: string, name: string): string => ${greeting}, ${name}!

// Using bind for partial application (uncurried) const sayHello = greet.bind(null, 'Hello') sayHello('Alice') // "Hello, Alice!"

// Curried version is naturally partially applicable const greetCurried = (greeting: string) => (name: string): string => ${greeting}, ${name}!

const sayHello = greetCurried('Hello') const sayGoodbye = greetCurried('Goodbye')

sayHello('Alice') // "Hello, Alice!" sayGoodbye('Bob') // "Goodbye, Bob!"

Argument Order Matters

// BAD: Data first prevents easy partial application const map = <A, B>(arr: A[], fn: (a: A) => B): B[] => arr.map(fn)

// Must use anonymous function to specialize const doubleAll = (arr: number[]) => map(arr, n => n * 2)

// GOOD: Data last enables clean partial application const map = <A, B>(fn: (a: A) => B) => (arr: readonly A[]): B[] => arr.map(fn)

// Specialize by supplying the function const doubleAll = map((n: number) => n * 2) const stringify = map(String)

// This is why fp-ts uses data-last curried functions import * as A from 'fp-ts/Array' import { pipe } from 'fp-ts/function'

pipe( [1, 2, 3], A.map(n => n * 2), // A.map takes fn first, returns function expecting array A.filter(n => n > 2) // Same pattern )

Common Mistakes

// MISTAKE 1: Inconsistent argument order const process = (config: Config) => (data: Data) => (options: Options) => ... const handle = (data: Data) => (config: Config) => ... // Inconsistent!

// FIX: Establish convention - typically: config -> options -> data const process = (config: Config) => (options: Options) => (data: Data) => ... const handle = (config: Config) => (data: Data) => ...

// MISTAKE 2: Over-currying simple functions const add = (a: number) => (b: number) => (c: number) => (d: number) => a + b + c + d

add(1)(2)(3)(4) // Tedious to call

// FIX: Curry only to the level needed for your use case const add = (a: number, b: number, c: number, d: number) => a + b + c + d // Or group related parameters const addPairs = (a: number, b: number) => (c: number, d: number) => a + b + c + d

// MISTAKE 3: Forgetting to curry when using with pipe const formatPrice = (currency: string, amount: number): string => ${currency}${amount.toFixed(2)}

pipe( 100, formatPrice('$', ???) // Can't use in pipe - needs both args! )

// FIX: Curry with data last const formatPrice = (currency: string) => (amount: number): string => ${currency}${amount.toFixed(2)}

pipe( 100, formatPrice('$') // Works! ) // "$100.00"

3. Function Composition

What is Function Composition?

Function composition combines two or more functions to create a new function. The output of one function becomes the input of the next.

// Mathematical composition: (f . g)(x) = f(g(x)) const compose = <A, B, C>(f: (b: B) => C, g: (a: A) => B) => (x: A): C => f(g(x))

const addOne = (x: number): number => x + 1 const double = (x: number): number => x * 2

const addOneThenDouble = compose(double, addOne) addOneThenDouble(5) // double(addOne(5)) = double(6) = 12

Why It Matters

Composition enables:

• Building complex behavior from simple pieces: Small, focused functions combine into powerful transformations

• Reusability: Composed functions can themselves be composed further

• Readability: Each step has a clear, single purpose

• Testing: Test small pieces in isolation, composition is mathematically guaranteed

Pipe vs Flow (Left-to-Right Composition)

Traditional mathematical composition reads right-to-left, which can be confusing. pipe and flow provide left-to-right composition.

import { pipe, flow } from 'fp-ts/function'

const addOne = (x: number): number => x + 1 const double = (x: number): number => x * 2 const toString = (x: number): string => Value: ${x}

// pipe: Execute immediately with a value const result = pipe( 5, addOne, // 6 double, // 12 toString // "Value: 12" )

// flow: Create a reusable function const transform = flow( addOne, double, toString )

transform(5) // "Value: 12" transform(10) // "Value: 22"

Composition with Multiple Types

// Functions don't need matching types, just compatible connections const parseNumber = (s: string): number => parseInt(s, 10) const isEven = (n: number): boolean => n % 2 === 0 const toYesNo = (b: boolean): string => b ? 'Yes' : 'No'

const isInputEven = flow( parseNumber, // string -> number isEven, // number -> boolean toYesNo // boolean -> string )

isInputEven('4') // "Yes" isInputEven('7') // "No"

Building Pipelines

import { pipe, flow } from 'fp-ts/function'

interface User { name: string email: string age: number }

// Small, focused functions const getName = (user: User): string => user.name const toUpperCase = (s: string): string => s.toUpperCase() const addGreeting = (name: string): string => Hello, ${name}! const addExcitement = (s: string): string => ${s}!!!

// Compose into a pipeline const greetUser = flow( getName, toUpperCase, addGreeting, addExcitement )

greetUser({ name: 'alice', email: 'alice@example.com', age: 30 }) // "Hello, ALICE!!!!"

// Or use pipe for one-off transformations const greeting = pipe( { name: 'bob', email: 'bob@example.com', age: 25 }, getName, toUpperCase, addGreeting ) // "Hello, BOB!"

Associativity of Composition

Composition is associative: (f . g) . h = f . (g . h)

const f = (x: number): number => x + 1 const g = (x: number): number => x * 2 const h = (x: number): number => x - 3

// These are equivalent: const way1 = flow(flow(h, g), f) // (f . g) . h const way2 = flow(h, flow(g, f)) // f . (g . h) const way3 = flow(h, g, f) // Direct composition

way1(10) // 15 way2(10) // 15 way3(10) // 15

Common Mistakes

// MISTAKE 1: Composing functions with incompatible types const toString = (n: number): string => String(n) const double = (n: number): number => n * 2

const bad = flow(toString, double) // Type error! double expects number, gets string

// MISTAKE 2: Trying to compose multi-argument functions const add = (a: number, b: number): number => a + b const double = (n: number): number => n * 2

const bad = flow(add, double) // Won't work - add takes 2 args

// FIX: Curry first const add = (a: number) => (b: number): number => a + b const addFiveThenDouble = flow(add(5), double) addFiveThenDouble(3) // 16

// MISTAKE 3: Long unreadable pipelines const result = pipe( data, fn1, fn2, fn3, fn4, fn5, fn6, fn7, fn8, fn9, fn10 // What does this do? )

// FIX: Group related transformations and name them const parseInput = flow(fn1, fn2, fn3) const validateData = flow(fn4, fn5) const formatOutput = flow(fn6, fn7, fn8, fn9, fn10)

const process = flow(parseInput, validateData, formatOutput)

4. Pointfree Style

What is Pointfree Style?

Pointfree (or tacit) programming defines functions without explicitly mentioning their arguments. The "points" are the arguments.

// Pointed: explicitly names the argument const double = (x: number): number => x * 2

// Pointfree: no explicit argument const double = multiply(2) // Assuming multiply is curried

Why It Matters

Pointfree style:

• Reduces noise: Focuses on transformations, not data shuffling

• Encourages composition: Works naturally with flow/pipe

• Reveals patterns: Makes the structure of computation visible

• Prevents mistakes: No variable names to misspell or shadow

Pointfree in Practice

import { pipe, flow } from 'fp-ts/function' import * as A from 'fp-ts/Array'

// Pointed style const getActiveUserNames = (users: User[]): string[] => users .filter(user => user.isActive) .map(user => user.name)

// Pointfree style const isActive = (user: User): boolean => user.isActive const getName = (user: User): string => user.name

const getActiveUserNames = flow( A.filter(isActive), A.map(getName) )

// Both work the same: getActiveUserNames(users)

Building Pointfree Functions

// Utility functions enable pointfree style const prop = <T, K extends keyof T>(key: K) => (obj: T): T[K] => obj[key] const equals = <T>(target: T) => (value: T): boolean => value === target const gt = (threshold: number) => (value: number): boolean => value > threshold

interface Product { name: string price: number category: string }

// Pointed const getExpensiveElectronics = (products: Product[]): Product[] => products.filter(p => p.category === 'electronics' && p.price > 100)

// Pointfree with helpers const isElectronics = flow(prop<Product, 'category'>('category'), equals('electronics')) const isExpensive = flow(prop<Product, 'price'>('price'), gt(100)) const both = <T>(f: (t: T) => boolean, g: (t: T) => boolean) => (t: T): boolean => f(t) && g(t)

const getExpensiveElectronics = A.filter(both(isElectronics, isExpensive))

When Pointfree Helps

// GOOD: Simple transformations const doubleAll = A.map((n: number) => n * 2) // Semi-pointfree const keepPositive = A.filter((n: number) => n > 0)

// BETTER: With named predicates const double = (n: number): number => n * 2 const isPositive = (n: number): boolean => n > 0

const doubleAll = A.map(double) // Fully pointfree const keepPositive = A.filter(isPositive)

// Compose them const processNumbers = flow( keepPositive, doubleAll )

When to Avoid Pointfree

// AVOID: When it obscures meaning const mystery = flow( A.map(flow(prop('x'), add(1))), A.filter(flow(prop('y'), gt(5))), A.reduce(0, flow(([acc, item]) => acc + item.z)) )

// PREFER: Clear variable names when logic is complex const incrementX = (item: Item): Item => ({ ...item, x: item.x + 1 }) const hasLargeY = (item: Item): boolean => item.y > 5 const sumZ = (items: Item[]): number => items.reduce((acc, item) => acc + item.z, 0)

const process = flow( A.map(incrementX), A.filter(hasLargeY), sumZ )

// AVOID: Pointfree gymnastics const weird = flip(compose(flip(map), filter))(isEven)(double)

// PREFER: Readable code const doubleEvens = flow( A.filter(isEven), A.map(double) )

Common Mistakes

// MISTAKE 1: Forcing pointfree when it's unclear const process = flow( A.map(flow( juxt([prop('a'), prop('b')]), apply(add) )) )

// FIX: Use pointed style when clearer const process = A.map(({ a, b }) => a + b)

// MISTAKE 2: Missing type annotations in pointfree const double = A.map(n => n * 2) // n is 'unknown' without context

// FIX: Add type annotation const double = A.map((n: number) => n * 2)

// MISTAKE 3: Mixing pointed and pointfree awkwardly const process = (arr: number[]) => flow( A.filter(n => n > 0), A.map(n => n * 2) )(arr)

// FIX: Choose one style // Pointfree: const process = flow( A.filter((n: number) => n > 0), A.map(n => n * 2) )

// Or pointed: const process = (arr: number[]): number[] => pipe(arr, A.filter(n => n > 0), A.map(n => n * 2))

5. First-Class Functions

What are First-Class Functions?

In JavaScript/TypeScript, functions are first-class citizens. They can be:

• Assigned to variables

• Passed as arguments

• Returned from other functions

• Stored in data structures

Why It Matters

First-class functions enable:

• Higher-order functions: Functions that take or return functions

• Callbacks: Passing behavior as data

• Closures: Functions that capture their environment

• Functional composition: Building programs from function combinations

Avoiding Wrapper Functions

A common anti-pattern is wrapping functions unnecessarily.

// BAD: Unnecessary wrapper function const numbers = [1, 2, 3, 4, 5]

// Don't do this: numbers.map(x => double(x)) numbers.filter(x => isPositive(x)) numbers.forEach(x => console.log(x))

// GOOD: Pass the function directly numbers.map(double) numbers.filter(isPositive) numbers.forEach(console.log)

// The wrapper adds nothing but noise

When Wrappers ARE Needed

// NEEDED: When you need to modify arguments const users = [{ name: 'Alice', age: 30 }, { name: 'Bob', age: 25 }]

// getName expects a User, but we want just the index users.map((user, index) => ${index}: ${user.name}) // Wrapper needed

// NEEDED: When you need to ignore arguments const fetchAll = (urls: string[]) => urls.map(url => fetch(url)) // fetch has many optional params

// If we did urls.map(fetch), TypeScript might complain about // the (value, index, array) signature of map's callback

// NEEDED: When changing arity const add = (a: number, b: number): number => a + b [1, 2, 3].map(n => add(n, 10)) // Must wrap since map passes 3 args

// BETTER: Curry the function const add = (b: number) => (a: number): number => a + b [1, 2, 3].map(add(10)) // [11, 12, 13]

Higher-Order Functions

// Function that returns a function const multiply = (x: number) => (y: number): number => x * y const double = multiply(2) const triple = multiply(3)

// Function that takes a function const applyTwice = <T>(fn: (t: T) => T) => (value: T): T => fn(fn(value))

const addOne = (n: number): number => n + 1 const addTwo = applyTwice(addOne) addTwo(5) // 7

// Function that does both const compose = <A, B, C>(f: (b: B) => C) => (g: (a: A) => B) => (x: A): C => f(g(x))

const increment = (n: number): number => n + 1 const toString = (n: number): string => String(n)

const incrementThenStringify = compose(toString)(increment) incrementThenStringify(5) // "6"

Method References

// Be careful with method references and 'this'

// PROBLEM: Losing 'this' context const obj = { value: 42, getValue() { return this.value } }

const getValue = obj.getValue getValue() // undefined or error - 'this' is lost

// SOLUTION 1: Bind the method const getValue = obj.getValue.bind(obj) getValue() // 42

// SOLUTION 2: Arrow function wrapper const getValue = () => obj.getValue() getValue() // 42

// SOLUTION 3: Use static functions (FP approach) const getValue = (obj: { value: number }): number => obj.value getValue({ value: 42 }) // 42

Common Mistakes

// MISTAKE 1: Unnecessary wrappers const names = users.map(user => getName(user)) // FIX: const names = users.map(getName)

// MISTAKE 2: Wrapping to match types incorrectly const numbers = ['1', '2', '3'].map(s => parseInt(s)) // Seems fine... // Actually problematic: parseInt takes (string, radix) // map passes (value, index, array) // parseInt('2', 1) is NaN!

// FIX: Explicit wrapper when semantics differ const numbers = ['1', '2', '3'].map(s => parseInt(s, 10)) // Or use Number: const numbers = ['1', '2', '3'].map(Number)

// MISTAKE 3: Not leveraging first-class functions const process = (items: Item[], transform: (item: Item) => Item) => { const result = [] for (const item of items) { result.push(transform(item)) } return result } // FIX: Just use map const process = (items: Item[], transform: (item: Item) => Item) => items.map(transform)

// Or even simpler - don't wrap map at all: items.map(transform)

// MISTAKE 4: Immediately invoking returned functions const createAdder = (x: number) => (y: number) => x + y

// Wrong - this calls the inner function immediately with undefined const add5 = createAdder(5)() // NaN

// Right - store the function for later use const add5 = createAdder(5) add5(3) // 8

Practical Exercises

Exercise 1: Pure Functions

Identify what makes these functions impure and rewrite them as pure functions.

// 1a. Makes HTTP call const fetchUser = async (id: string) => { const response = await fetch(/api/users/${id}) return response.json() }

// 1b. Uses current time const isExpired = (expiryDate: Date) => { return expiryDate < new Date() }

// 1c. Mutates input const addToCart = (cart: CartItem[], item: CartItem) => { cart.push(item) return cart }

// 1d. Depends on global config const config = { taxRate: 0.08 } const calculateTotal = (subtotal: number) => { return subtotal * (1 + config.taxRate) }

// 1a. Return a description of the effect (Task pattern) type FetchUser = (id: string) => () => Promise<User> const fetchUser: FetchUser = (id) => () => fetch(/api/users/${id}).then(r => r.json())

// 1b. Accept current time as parameter const isExpired = (expiryDate: Date, now: Date): boolean => expiryDate < now

// 1c. Return new array instead of mutating const addToCart = (cart: readonly CartItem[], item: CartItem): CartItem[] => [...cart, item]

// 1d. Accept config as parameter const calculateTotal = (taxRate: number) => (subtotal: number): number => subtotal * (1 + taxRate)

// Or group them interface TaxConfig { taxRate: number } const calculateTotal = (config: TaxConfig, subtotal: number): number => subtotal * (1 + config.taxRate)

Exercise 2: Currying and Partial Application

Convert these functions to curried form and create specialized versions.

// 2a. Convert to curried form const formatDate = (locale: string, options: Intl.DateTimeFormatOptions, date: Date): string => date.toLocaleDateString(locale, options)

// Create: formatUSDate, formatShortDate

// 2b. Convert to curried form const clamp = (min: number, max: number, value: number): number => Math.max(min, Math.min(max, value))

// Create: clampPercentage (0-100), clampByte (0-255)

// 2c. Convert to curried form with good argument order const hasProperty = (obj: object, key: string): boolean => key in obj

// Should work with: users.filter(hasProperty(???))

// 2a. const formatDate = (locale: string) => (options: Intl.DateTimeFormatOptions) => (date: Date): string => date.toLocaleDateString(locale, options)

const formatUSDate = formatDate('en-US') const formatShortDate = formatUSDate({ month: 'short', day: 'numeric' })

formatShortDate(new Date()) // "Jan 29"

// 2b. const clamp = (min: number) => (max: number) => (value: number): number => Math.max(min, Math.min(max, value))

const clampPercentage = clamp(0)(100) const clampByte = clamp(0)(255)

clampPercentage(150) // 100 clampByte(-10) // 0

// 2c. Reorder arguments: key first (config), object last (data) const hasProperty = (key: string) => (obj: object): boolean => key in obj

const hasEmail = hasProperty('email') const hasId = hasProperty('id')

users.filter(hasEmail) // Users with email property

Exercise 3: Function Composition

Build these pipelines using flow and pipe.

import { pipe, flow } from 'fp-ts/function' import * as A from 'fp-ts/Array'

interface Product { name: string price: number category: string inStock: boolean }

// 3a. Create a pipeline that: // - Filters to products in stock // - Filters to products under $50 // - Maps to product names // - Sorts alphabetically

// 3b. Create a reusable pipeline that: // - Takes a string // - Trims whitespace // - Converts to lowercase // - Replaces spaces with hyphens // - Prefixes with "slug-"

// 3c. Create a number processing pipeline that: // - Filters out negative numbers // - Doubles each number // - Sums all numbers // - Returns "Total: X"

// 3a. const getAffordableInStockNames = (products: Product[]): string[] => pipe( products, A.filter(p => p.inStock), A.filter(p => p.price < 50), A.map(p => p.name), A.sort((a, b) => a.localeCompare(b)) )

// Or as a reusable function: const getAffordableInStockNames = flow( A.filter((p: Product) => p.inStock), A.filter(p => p.price < 50), A.map(p => p.name), A.sort<string>((a, b) => a.localeCompare(b)) )

// 3b. const slugify = flow( (s: string) => s.trim(), s => s.toLowerCase(), s => s.replace(/\s+/g, '-'), s => slug-${s} )

slugify(' Hello World ') // "slug-hello-world"

// 3c. const isPositive = (n: number): boolean => n >= 0 const double = (n: number): number => n * 2 const sum = (numbers: number[]): number => numbers.reduce((acc, n) => acc + n, 0) const formatTotal = (n: number): string => Total: ${n}

const processNumbers = flow( A.filter(isPositive), A.map(double), sum, formatTotal )

processNumbers([-1, 2, 3, -4, 5]) // "Total: 20"

Exercise 4: Pointfree Style

Refactor these functions to pointfree style where appropriate.

// 4a. Refactor to pointfree const getAdultNames = (users: User[]): string[] => users .filter(user => user.age >= 18) .map(user => user.name)

// 4b. Refactor to pointfree const sumPrices = (products: Product[]): number => products.reduce((total, product) => total + product.price, 0)

// 4c. Decide: Should this be pointfree or not? Why? const formatUserForDisplay = (user: User): string => ${user.name} (${user.email}) - ${user.isActive ? 'Active' : 'Inactive'}

// 4a. Good candidate for pointfree const isAdult = (user: User): boolean => user.age >= 18 const getName = (user: User): string => user.name

const getAdultNames = flow( A.filter(isAdult), A.map(getName) )

// 4b. Partially pointfree - the reducer is clearer pointed const prop = <T, K extends keyof T>(key: K) => (obj: T): T[K] => obj[key] const sum = (numbers: number[]): number => numbers.reduce((a, b) => a + b, 0)

const sumPrices = flow( A.map(prop<Product, 'price'>('price')), sum )

// Or keep it simple: const getPrice = (p: Product): number => p.price const sumPrices = flow(A.map(getPrice), sum)

// 4c. Keep pointed - the string template is clearer with explicit access const formatUserForDisplay = (user: User): string => ${user.name} (${user.email}) - ${user.isActive ? 'Active' : 'Inactive'}

// Pointfree version would be overly complex: const formatUserForDisplay = flow( user => [user.name, user.email, user.isActive] as const, ([name, email, isActive]) => ${name} (${email}) - ${isActive ? 'Active' : 'Inactive'} ) // This is worse - no benefit, harder to read

Exercise 5: First-Class Functions

Fix these unnecessary wrappers and improve the code.

// 5a. Remove unnecessary wrappers const results = items .map(item => processItem(item)) .filter(result => isValid(result)) .forEach(result => logResult(result))

// 5b. Fix the parseInt issue const numbers = ['1', '2', '3', '10', '11'].map(parseInt) // Current result: [1, NaN, NaN, 3, 4] - Why? Fix it.

// 5c. Create a safe version of this const handlers = { onClick: (e: Event) => handleClick(e), onSubmit: (e: Event) => handleSubmit(e), onHover: (e: Event) => handleHover(e), } // Too repetitive - can we do better?

// 5a. Pass functions directly const results = items .map(processItem) .filter(isValid) .forEach(logResult)

// 5b. parseInt receives (value, index, array) from map // parseInt('2', 1) interprets '2' as base-1 (invalid) = NaN // parseInt('3', 2) interprets '3' as base-2 (invalid) = NaN // parseInt('10', 3) interprets '10' as base-3 = 3 // parseInt('11', 4) interprets '11' as base-4 = 5

// Fix: Use wrapper with explicit radix const numbers = ['1', '2', '3', '10', '11'].map(s => parseInt(s, 10)) // Or use Number (doesn't have radix parameter) const numbers = ['1', '2', '3', '10', '11'].map(Number) // Result: [1, 2, 3, 10, 11]

// 5c. If handlers match the expected signature, just use them directly const handlers = { onClick: handleClick, onSubmit: handleSubmit, onHover: handleHover, }

// Or if you need to create them dynamically: const createHandlers = <T extends Record<string, (e: Event) => void>>( handlerMap: T ): T => handlerMap

const handlers = createHandlers({ onClick: handleClick, onSubmit: handleSubmit, onHover: handleHover, })

Summary

Concept Key Idea Benefit

Pure Functions Same input = same output, no side effects Predictable, testable, cacheable

Currying Transform multi-arg to single-arg chain Partial application, composition

Composition Combine small functions into larger ones Reusability, modularity

Pointfree Define functions without naming arguments Less noise, reveals structure

First-Class Functions Functions as values Higher-order functions, callbacks

Next Steps

With these fundamentals mastered, you're ready for:

• fp-ts Option and Either: Functional error handling

• fp-ts Pipe and Flow: Advanced composition patterns

• fp-ts Task and TaskEither: Async functional programming

• Monads and Functors: The algebraic structures behind fp-ts

Remember: FP is about building complex behavior from simple, composable pieces. Start small, practice composition, and gradually adopt more advanced patterns as they prove useful in your code.