JavaScript Design Patterns

Functional Programming

Pure functions, immutability, and composition

Find videos you like?

Save to resource drawer for future reference!

Functional Programming: Data Transformation

Functional programming treats computation as evaluating mathematical functions. Focus on what to do, not how to do it. Use pure functions, avoid mutations, and compose small functions!

Core Principles

1. Pure Functions - Same input = same output, no side effects
2. Immutability - Never modify data, create new data
3. Composition - Combine simple functions into complex ones

Pure Functions

Predictable, testable, no side effects

❌ Impure - Side Effects

let total = 0;

// Impure - modifies external state
function add(value) {
  total += value;
  return total;
}

add(5);  // 5
add(5);  // 10 (different result!)

// Impure - depends on external state
function getTax() {
  return total * 0.1;
}

// Impure - random output
function getRandomPrice() {
  return Math.random() * 100;
}

// Impure - mutates input
function addToArray(arr, item) {
  arr.push(item);
  return arr;
}

✅ Pure - Predictable

// Pure - takes all inputs as parameters
function add(a, b) {
  return a + b;
}

add(5, 10);  // 15
add(5, 10);  // 15 (always same!)

// Pure - all inputs explicit
function getTax(amount) {
  return amount * 0.1;
}

// Pure - deterministic
function getPrice(basePrice, quantity) {
  return basePrice * quantity;
}

// Pure - returns new array
function addToArray(arr, item) {
  return [...arr, item];
}

Pure Function Benefits

Easy to test, cache, and reason about

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Immutability

Never modify, always create new

❌ Mutable - Changes Data

const user = {
  name: 'Alice',
  age: 25
};

// Mutates original object
user.age = 26;
console.log(user); // { name: 'Alice', age: 26 }

const numbers = [1, 2, 3];

// Mutates original array
numbers.push(4);
console.log(numbers); // [1, 2, 3, 4]

// Hard to track changes
function updateUser(user) {
  user.lastModified = Date.now();
  return user; // Modified original!
}

✅ Immutable - New Data

const user = {
  name: 'Alice',
  age: 25
};

// Creates new object
const updated = { ...user, age: 26 };
console.log(user);    // { name: 'Alice', age: 25 }
console.log(updated); // { name: 'Alice', age: 26 }

const numbers = [1, 2, 3];

// Creates new array
const newNumbers = [...numbers, 4];
console.log(numbers);    // [1, 2, 3]
console.log(newNumbers); // [1, 2, 3, 4]

// Easy to track
function updateUser(user) {
  return { ...user, lastModified: Date.now() };
}

Immutable Array Operations

Array methods that don't mutate

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Higher-Order Functions

Functions that take or return functions

Functions as First-Class Citizens

// Function that returns a function
function multiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = multiplier(2);
const triple = multiplier(3);

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

// Function that takes a function
function applyOperation(arr, operation) {
  return arr.map(operation);
}

const numbers = [1, 2, 3, 4, 5];
const squared = applyOperation(numbers, x => x * x);
console.log(squared); // [1, 4, 9, 16, 25]

// Combining both
function createLogger(prefix) {
  return function(message) {
    console.log(`[${prefix}] ${message}`);
  };
}

const errorLog = createLogger('ERROR');
const infoLog = createLogger('INFO');

errorLog('Something went wrong'); // [ERROR] Something went wrong
infoLog('Process completed');     // [INFO] Process completed

Declarative vs Imperative

Focus on what, not how

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Real-World Example: Shopping Cart

Functional approach to state management

javascript

code

DarkEditable

// Functional shopping cart
const cart = [
  { id: 1, name: 'Laptop', price: 999, quantity: 1 },
  { id: 2, name: 'Mouse', price: 25, quantity: 2 },
  { id: 3, name: 'Keyboard', price: 75, quantity: 1 }
];

// Pure function - calculate total
const calculateTotal = (cart) =>
  cart.reduce((total, item) => total + (item.price * item.quantity), 0);

console.log(calculateTotal(cart)); // 1124

// Pure function - add item (immutable)
const addItem = (cart, item) => [...cart, item];

// Pure function - update quantity (immutable)
const updateQuantity = (cart, id, quantity) =>
  cart.map(item => 
    item.id === id 
      ? { ...item, quantity }
      : item
  );

// Pure function - remove item (immutable)
const removeItem = (cart, id) =>
  cart.filter(item => item.id !== id);

// Pure function - apply discount
const applyDiscount = (cart, discount) =>
  cart.map(item => ({
    ...item,
    price: item.price * (1 - discount)
  }));

// Use it
const newItem = { id: 4, name: 'Monitor', price: 299, quantity: 1 };
const cartWithNewItem = addItem(cart, newItem);
const cartWithUpdatedQty = updateQuantity(cartWithNewItem, 1, 2);
const cartWithDiscount = applyDiscount(cartWithUpdatedQty, 0.1);

console.log(calculateTotal(cartWithDiscount));

// Original cart unchanged!
console.log(cart.length); // 3
console.log(cartWithDiscount.length); // 4

Console Output

Click "Run Code" to see output here...

Key Takeaways

🎯

Pure Functions

Same input = same output
No side effects, easy to test

🔒

Immutability

Never modify, always create new
Use map, filter, reduce, spread

📦

Higher-Order Functions

Functions as arguments/returns
Enable powerful abstractions

💬

Declarative Style

Express what, not how
Readable, maintainable code

Pro Tip

You don't have to go 100% functional! Mix functional concepts with other styles. Use pure functions where possible, prefer immutability, and leverage array methods.

Previous Topic

Design Patterns

Common JavaScript patterns: Module, Singleton, Factory, Observer.

Next Topic

Currying

Partial function application and currying techniques.

Ask a Question

Have a question about Functional Programming? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript Design Patterns

Functional Programming

Pure functions, immutability, and composition

Find videos you like?

Save to resource drawer for future reference!

Functional Programming: Data Transformation

Functional programming treats computation as evaluating mathematical functions. Focus on what to do, not how to do it. Use pure functions, avoid mutations, and compose small functions!

Core Principles

1. Pure Functions - Same input = same output, no side effects
2. Immutability - Never modify data, create new data
3. Composition - Combine simple functions into complex ones

Pure Functions

Predictable, testable, no side effects

❌ Impure - Side Effects

let total = 0;

// Impure - modifies external state
function add(value) {
  total += value;
  return total;
}

add(5);  // 5
add(5);  // 10 (different result!)

// Impure - depends on external state
function getTax() {
  return total * 0.1;
}

// Impure - random output
function getRandomPrice() {
  return Math.random() * 100;
}

// Impure - mutates input
function addToArray(arr, item) {
  arr.push(item);
  return arr;
}

✅ Pure - Predictable

// Pure - takes all inputs as parameters
function add(a, b) {
  return a + b;
}

add(5, 10);  // 15
add(5, 10);  // 15 (always same!)

// Pure - all inputs explicit
function getTax(amount) {
  return amount * 0.1;
}

// Pure - deterministic
function getPrice(basePrice, quantity) {
  return basePrice * quantity;
}

// Pure - returns new array
function addToArray(arr, item) {
  return [...arr, item];
}

Pure Function Benefits

Easy to test, cache, and reason about

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Immutability

Never modify, always create new

❌ Mutable - Changes Data

const user = {
  name: 'Alice',
  age: 25
};

// Mutates original object
user.age = 26;
console.log(user); // { name: 'Alice', age: 26 }

const numbers = [1, 2, 3];

// Mutates original array
numbers.push(4);
console.log(numbers); // [1, 2, 3, 4]

// Hard to track changes
function updateUser(user) {
  user.lastModified = Date.now();
  return user; // Modified original!
}

✅ Immutable - New Data

const user = {
  name: 'Alice',
  age: 25
};

// Creates new object
const updated = { ...user, age: 26 };
console.log(user);    // { name: 'Alice', age: 25 }
console.log(updated); // { name: 'Alice', age: 26 }

const numbers = [1, 2, 3];

// Creates new array
const newNumbers = [...numbers, 4];
console.log(numbers);    // [1, 2, 3]
console.log(newNumbers); // [1, 2, 3, 4]

// Easy to track
function updateUser(user) {
  return { ...user, lastModified: Date.now() };
}

Immutable Array Operations

Array methods that don't mutate

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Higher-Order Functions

Functions that take or return functions

Functions as First-Class Citizens

// Function that returns a function
function multiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = multiplier(2);
const triple = multiplier(3);

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

// Function that takes a function
function applyOperation(arr, operation) {
  return arr.map(operation);
}

const numbers = [1, 2, 3, 4, 5];
const squared = applyOperation(numbers, x => x * x);
console.log(squared); // [1, 4, 9, 16, 25]

// Combining both
function createLogger(prefix) {
  return function(message) {
    console.log(`[${prefix}] ${message}`);
  };
}

const errorLog = createLogger('ERROR');
const infoLog = createLogger('INFO');

errorLog('Something went wrong'); // [ERROR] Something went wrong
infoLog('Process completed');     // [INFO] Process completed

Declarative vs Imperative

Focus on what, not how

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Real-World Example: Shopping Cart

Functional approach to state management

javascript

code

DarkEditable

// Pure function - calculate total
const calculateTotal = (cart) =>
  cart.reduce((total, item) => total + (item.price * item.quantity), 0);

console.log(calculateTotal(cart)); // 1124

// Pure function - add item (immutable)
const addItem = (cart, item) => [...cart, item];

// Pure function - update quantity (immutable)
const updateQuantity = (cart, id, quantity) =>
  cart.map(item => 
    item.id === id 
      ? { ...item, quantity }
      : item
  );

// Pure function - remove item (immutable)
const removeItem = (cart, id) =>
  cart.filter(item => item.id !== id);

// Pure function - apply discount
const applyDiscount = (cart, discount) =>
  cart.map(item => ({
    ...item,
    price: item.price * (1 - discount)
  }));

console.log(calculateTotal(cartWithDiscount));

// Original cart unchanged!
console.log(cart.length); // 3
console.log(cartWithDiscount.length); // 4

Console Output

Click "Run Code" to see output here...

Key Takeaways

🎯

Pure Functions

Same input = same output
No side effects, easy to test

🔒

Immutability

Never modify, always create new
Use map, filter, reduce, spread

📦

Higher-Order Functions

Functions as arguments/returns
Enable powerful abstractions

💬

Declarative Style

Express what, not how
Readable, maintainable code

Pro Tip

You don't have to go 100% functional! Mix functional concepts with other styles. Use pure functions where possible, prefer immutability, and leverage array methods.

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Design Patterns

Currying

JavaScript Code Editor

Building Your Learning Module...

Functional Programming

Functional Programming: Data Transformation

Core Principles

❌ Impure - Side Effects

✅ Pure - Predictable

Pure Function Benefits

❌ Mutable - Changes Data

✅ Immutable - New Data

Immutable Array Operations

Functions as First-Class Citizens

Declarative vs Imperative

Real-World Example: Shopping Cart

Key Takeaways

Pure Functions

Immutability

Higher-Order Functions

Declarative Style

Pro Tip

Design Patterns

Currying

JavaScript Code Editor

Functional Programming

Functional Programming: Data Transformation

Core Principles

❌ Impure - Side Effects

✅ Pure - Predictable

Pure Function Benefits

❌ Mutable - Changes Data

✅ Immutable - New Data

Immutable Array Operations

Functions as First-Class Citizens

Declarative vs Imperative

Real-World Example: Shopping Cart

Key Takeaways

Pure Functions

Immutability

Higher-Order Functions

Declarative Style

Pro Tip