← Functional Programming Concepts Function Composition →

Currying in JavaScript

Currying is the technique of transforming a function with multiple arguments into a sequence of functions each with a single argument. It enables partial application and function composition.

🎯 What is Currying?

Basic Concept:

// Regular function
            f(a, b, c) → result

            // Curried function
            f(a) → returns g(b) → returns h(c) → result

Instead of calling with all arguments at once, you call with one argument at a time, each call returning a new function that expects the next argument.

Benefits:

Partial Application - Create specialized functions
Function Composition - Easier to combine functions
Code Reuse - Create reusable function templates
Readability - More declarative code
Lazy Evaluation - Delay execution until all arguments provided

🔧 Examples

JavaScript Editor

// Real-world currying examples

// 1. Logger with configuration
function createLogger(level) {
  return function(context) {
    return function(message) {
      console.log(`[${level}] [${context}] ${message}`);
    };
  };
}

const errorLogger = createLogger("ERROR")("Database");
const infoLogger = createLogger("INFO")("API");

errorLogger("Connection failed!");
infoLogger("Request received");

// 2. URL Builder
function createURL(protocol) {
  return function(domain) {
    return function(path) {
      return function(params) {
        let url = `${protocol}://${domain}/${path}`;
        if (params) {
          const queryString = Object.entries(params)
            .map(([key, value]) => `${key}=${value}`)
            .join("&");
          url += `?${queryString}`;
        }
        return url;
      };
    };
  };
}

const httpsBuilder = createURL("https");
const apiBuilder = httpsBuilder("api.example.com");
const usersEndpoint = apiBuilder("users");

console.log("Users URL:", usersEndpoint({ page: 1, limit: 10 }));

// 3. Discount Calculator
function createDiscountCalculator(discountPercent) {
  return function(taxRate) {
    return function(price) {
      const discounted = price * (1 - discountPercent / 100);
      const taxed = discounted * (1 + taxRate / 100);
      return Math.round(taxed * 100) / 100;
    };
  };
}

const summerSale = createDiscountCalculator(20); // 20% off
const withTax = summerSale(8); // 8% tax

console.log("Final price:", withTax(100)); // 86.4

JavaScript Editor

// Create a generic curry function

// Curry any function
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...args2) {
        return curried.apply(this, args.concat(args2));
      };
    }
  };
}

// Test with different functions
function multiply(a, b, c) {
  return a * b * c;
}

function greet(greeting, name, punctuation) {
  return `${greeting}, ${name}${punctuation}`;
}

// Curry them
const curriedMultiply = curry(multiply);
const curriedGreet = curry(greet);

console.log("Multiply:", curriedMultiply(2)(3)(4)); // 24
console.log("Greet:", curriedGreet("Hello")("Alice")("!")); // Hello, Alice!

// Partial application
const double = curriedMultiply(2);
const triple = double(3);
console.log("2 * 3 * 4:", triple(4)); // 24
console.log("2 * 3 * 5:", triple(5)); // 30

// Modern arrow function curry
const modernCurry = fn => {
  const curried = (...args) => {
    return args.length >= fn.length
      ? fn(...args)
      : (...moreArgs) => curried(...args, ...moreArgs);
  };
  return curried;
};

const modernGreet = modernCurry(greet);
console.log("Modern:", modernGreet("Hi")("Bob")("?"));

JavaScript Editor

// Currying in modern JavaScript patterns

// 1. Event handlers in React-like pattern
function createEventHandler(eventType) {
  return function(callback) {
    return function(event) {
      console.log(`${eventType} event triggered`);
      callback(event);
    };
  };
}

const onClick = createEventHandler("click");
const onHover = createEventHandler("hover");

const handleClick = onClick(() => console.log("Clicked!"));
const handleHover = onHover(() => console.log("Hovered!"));

// Simulate events
handleClick({ target: { value: "button" } });
handleHover({ clientX: 100, clientY: 200 });

// 2. Validation pipeline
function createValidator(rule) {
  return function(value) {
    return rule(value);
  };
}

const validators = {
  required: createValidator(value => value && value.trim() !== ""),
  minLength: min => createValidator(value => value.length >= min),
  maxLength: max => createValidator(value => value.length <= max),
  email: createValidator(value => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
};

// Build validation chain
function validate(value, ...validatorFns) {
  return validatorFns.every(validator => validator(value));
}

const validateEmail = value => validate(
  value,
  validators.required,
  validators.minLength(5),
  validators.email
);

console.log("\nEmail validation:");
console.log("test@example.com:", validateEmail("test@example.com")); // true
console.log("invalid:", validateEmail("invalid")); // false
console.log("empty:", validateEmail("")); // false

// 3. Data transformation pipeline
const processData = transform => data => data.map(transform);

const addId = processData((item, index) => ({ ...item, id: index + 1 }));
const formatDate = processData(item => ({
  ...item,
  date: new Date(item.date).toLocaleDateString()
}));

const data = [
  { name: "Alice", date: "2024-01-15" },
  { name: "Bob", date: "2024-01-16" }
];

const processed = formatDate(addId(data));
console.log("\nProcessed data:", processed);

💪 Practice Exercise

JavaScript Editor

// Currying Practice Exercises

// Exercise 1: Create a curry function that works with any number of arguments
function advancedCurry(fn) {
  // Your implementation here
}

// Exercise 2: Create a currency formatter using currying
function createCurrencyFormatter(symbol, decimalPlaces) {
  // Return a function that formats numbers
  // Example: createCurrencyFormatter("$", 2)(1234.567) → "$1,234.57"
}

// Exercise 3: Create a DOM manipulation helper
function createElement(tagName) {
  // Return functions to set attributes, content, and append children
  // Should support chaining: createElement("div").setClass("box").setText("Hello").appendTo(parent)
}

// Exercise 4: Curried mathematical operations
const mathOperations = {
  // Create curried versions of add, subtract, multiply, divide
  // Each should support any number of arguments through currying
};

// Test cases
console.log("Test your implementations:");

// Should work: add(1)(2)(3)() = 6
// Should work: add(1, 2)(3)() = 6
// Should work: add(1)(2, 3)() = 6

💡 When to Use Currying

🔧 Configuration

When you need to configure functions with multiple settings

🎯 Specialization

Creating specialized versions of general functions

🔗 Composition

When building function pipelines or chains

⚡ Performance

When you can pre-compute partial results

🧪 Testing

Easier to test individual function stages

🎨 Readability

When you want more declarative, readable code

← Functional Programming Concepts Function Composition →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

Currying in JavaScript

🎯 What is Currying?

Basic Concept:

Benefits:

🔧 Examples

💪 Practice Exercise

💡 When to Use Currying

🔧 Configuration

🎯 Specialization

🔗 Composition

⚡ Performance

🧪 Testing

🎨 Readability

Follow Us

Our Tools

Our Company

Special Tools

JavaScript Tutorial

Currying in JavaScript

🎯 What is Currying?

Basic Concept:

Benefits:

🔧 Examples

Example 1: Basic Currying

Example 2: Practical Examples

Example 3: Generic Curry Function

Example 4: Modern Patterns

💪 Practice Exercise

💡 When to Use Currying

🔧 Configuration

🎯 Specialization

🔗 Composition

⚡ Performance

🧪 Testing

🎨 Readability

Follow Us

Our Tools

Our Company

Special Tools