Discover Functional Programming

Learning Objectives

• Understand functional programming paradigm
• Master pure functions and side effects
• Learn higher-order functions
• Apply functional techniques to solve problems
• Understand JavaScript's multi-paradigm nature

Section 11.1: Context: A Movie List

Application Scenario

Building a movie application with filtering, sorting, and transformations:

• List of movies with ratings
• Filter by genre
• Sort by rating
• Transform data

This is ideal for functional programming.

Section 11.2: Program State

State Management

Functional programming emphasizes immutability:

// ❌ Modifying state directly
let movies = [
    { title: "Movie A", rating: 8 },
    { title: "Movie B", rating: 6 }
];

movies[0].rating = 9;  // Mutating data

// ✅ Creating new data
let updatedMovies = movies.map(movie => 
    movie.title === "Movie A" 
        ? { ...movie, rating: 9 }
        : movie
);

Avoiding State Mutations

// ❌ BAD: Modifies original array
let numbers = [1, 2, 3];
numbers.push(4);

// ✅ GOOD: Creates new array
let numbers = [1, 2, 3];
let newNumbers = [...numbers, 4];

Section 11.3: Pure Functions

What is a Pure Function?

A function that:

• Returns the same output for same input
• Has no side effects (doesn't modify external state)

// ✅ Pure function
function add(a, b) {
    return a + b;
}

// ❌ Not pure: depends on external variable
let multiplier = 2;
function multiply(a) {
    return a * multiplier;
}

// ❌ Not pure: modifies external state
let result = 0;
function accumulateAdd(a) {
    result += a;
    return result;
}

Benefits of Pure Functions

// ✅ Pure: Easy to test and reason about
function calculateDiscount(price, rate) {
    return price * rate;
}

// ✅ Pure: No side effects
function getUserName(user) {
    return user.name;
}

// ❌ Not pure: Prints to console (side effect)
function displayUser(user) {
    console.log(user.name);  // Side effect!
}

Section 11.4: Array Operations

Functional Array Methods

let prices = [10, 20, 30];

let withTax = prices.map(price => price * 1.1);
console.log(withTax);  // [11, 22, 33]

let products = [
    { name: "Laptop", price: 1000 },
    { name: "Phone", price: 500 },
    { name: "Book", price: 15 }
];

let affordable = products.filter(p => p.price < 600);
console.log(affordable);  // Phone and Book

let numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum);  // 15

let product = numbers.reduce((acc, num) => acc * num, 1);
console.log(product);  // 120

let data = [1, 2, 3, 4, 5, 6];

let result = data
    .filter(n => n % 2 === 0)      // [2, 4, 6]
    .map(n => n * n)                // [4, 16, 36]
    .reduce((sum, n) => sum + n, 0); // 56

console.log(result);  // 56

Section 11.5: Higher Order Functions

Functions as Arguments

function processArray(array, callback) {
    let result = [];
    for (let item of array) {
        result.push(callback(item));
    }
    return result;
}

let numbers = [1, 2, 3, 4];

let doubled = processArray(numbers, n => n * 2);
console.log(doubled);  // [2, 4, 6, 8]

Returning Functions

function createMultiplier(factor) {
    return function(number) {
        return number * factor;
    };
}

let double = createMultiplier(2);
let triple = createMultiplier(3);

console.log(double(5));  // 10
console.log(triple(5));  // 15

Function Composition

function addTwo(n) {
    return n + 2;
}

function multiplyByThree(n) {
    return n * 3;
}

function compose(f, g) {
    return function(x) {
        return f(g(x));
    };
}

let process = compose(multiplyByThree, addTwo);
console.log(process(5));  // (5 + 2) * 3 = 21

Section 11.6: JavaScript: A Multi Paradigm Language

Using Both OOP and Functional

class MovieList {
    constructor(movies) {
        this.movies = movies;
    }

    getHighRated(minRating) {
        return this.movies
            .filter(m => m.rating >= minRating)
            .map(m => m.title);
    }
}

let list = new MovieList([
    { title: "Movie A", rating: 8 },
    { title: "Movie B", rating: 6 },
    { title: "Movie C", rating: 9 }
]);

console.log(list.getHighRated(7));  // ["Movie A", "Movie C"]

Coding Challenges

Challenge 11.1: Older Movies

Task: Filter movies released before a certain year

Challenge 11.2: Government Forms

Task: Transform and validate form data using pure functions

Challenge 11.3: Arrays Sum

Task: Calculate the sum of array elements using reduce()

Challenge 11.4: Students Results

Task: Process student grades with map and filter operations

Key Takeaways

✅ Pure functions have no side effects
✅ Avoid mutating data
✅ Use map(), filter(), reduce() for transformations
✅ Higher-order functions enhance flexibility
✅ Chain operations for clean, readable code
✅ JavaScript supports multiple paradigms

Quiz Questions

• What makes a function "pure"?
• What does reduce() do?
• What is a higher-order function?
• How do you chain array methods?
• What are the benefits of functional programming?

Next Module: Module 12 - Project 1: A Notetaking Program