JavaScript Design Patterns

Currying

Transform multi-argument functions into sequences

Find videos you like?

Save to resource drawer for future reference!

Currying: One Argument at a Time

Currying transforms a function with multiple arguments into a sequence of functions, each taking a single argument. Named after mathematician Haskell Curry!

The Transformation

f(a, b, c) becomes f(a)(b)(c)
Each call returns a new function until all arguments are provided

Basic Currying

From multiple arguments to single arguments

Regular Function

// Takes all arguments at once
function add(a, b, c) {
  return a + b + c;
}

console.log(add(1, 2, 3)); // 6

// Must provide all arguments
// add(1, 2) // NaN
// add(1)    // NaN

✅ Curried Function

// Takes one argument at a time
function addCurried(a) {
  return function(b) {
    return function(c) {
      return a + b + c;
    };
  };
}

console.log(addCurried(1)(2)(3)); // 6

// Can partially apply!
const add1 = addCurried(1);
const add1and2 = add1(2);
console.log(add1and2(3)); // 6

Currying with Arrow Functions

Cleaner syntax

javascript

code

DarkEditable

Console Output

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

Auto-Curry Function

Generic curry helper

Universal Curry Function

// Generic curry function
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    }
    return function(...moreArgs) {
      return curried.apply(this, args.concat(moreArgs));
    };
  };
}

// Use with any function
function sum(a, b, c) {
  return a + b + c;
}

const curriedSum = curry(sum);

console.log(curriedSum(1)(2)(3));    // 6
console.log(curriedSum(1, 2)(3));    // 6
console.log(curriedSum(1)(2, 3));    // 6
console.log(curriedSum(1, 2, 3));    // 6

// Example with more arguments
function joinStrings(a, b, c, d) {
  return `${a}-${b}-${c}-${d}`;
}

const curriedJoin = curry(joinStrings);
const withDate = curriedJoin('2024')('12');
console.log(withDate('25')('log')); // 2024-12-25-log

Partial Application vs Currying

Related but different concepts

javascript

code

DarkEditable

// Partial Application - fix some arguments
function partial(fn, ...fixedArgs) {
  return function(...remainingArgs) {
    return fn(...fixedArgs, ...remainingArgs);
  };
}

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

// Partial application
const sayHello = partial(greet, 'Hello');
console.log(sayHello('Alice', '!'));  // Hello, Alice!
console.log(sayHello('Bob', '.'));    // Hello, Bob.

// Currying - transform to single-argument functions
const curriedGreet = greeting => name => punctuation =>
  `${greeting}, ${name}${punctuation}`;

const sayHi = curriedGreet('Hi');
const sayHiToAlice = sayHi('Alice');
console.log(sayHiToAlice('!'));  // Hi, Alice!

// Key difference:
// Partial: Fix N arguments, get function expecting rest
// Currying: Always returns function expecting 1 argument

// Practical example: filtering
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Curried filter
const filter = predicate => array => array.filter(predicate);

const isEven = x => x % 2 === 0;
const isGreaterThan5 = x => x > 5;

const filterEvens = filter(isEven);
const filterGT5 = filter(isGreaterThan5);

console.log(filterEvens(numbers));  // [2, 4, 6, 8, 10]
console.log(filterGT5(numbers));    // [6, 7, 8, 9, 10]

Console Output

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

Real-World Example: Event Handlers

Currying for reusable handlers

javascript

code

DarkEditable

// Curried event handler factory
const createClickHandler = action => id => event => {
  event.preventDefault();
  console.log(`${action} item ${id}`);
};

const deleteHandler = createClickHandler('Delete');
const editHandler = createClickHandler('Edit');
const viewHandler = createClickHandler('View');

// Attach to buttons
document.querySelector('#delete-1')?.addEventListener('click', deleteHandler(1));
document.querySelector('#edit-1')?.addEventListener('click', editHandler(1));
document.querySelector('#view-1')?.addEventListener('click', viewHandler(1));

// Curried validation
const validate = rule => value => rule(value);

const isRequired = value => value.trim().length > 0;
const isEmail = value => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
const minLength = min => value => value.length >= min;

const validateRequired = validate(isRequired);
const validateEmail = validate(isEmail);
const validateMin6 = validate(minLength(6));

console.log(validateRequired('test'));     // true
console.log(validateEmail('a@b.com'));     // true
console.log(validateMin6('password'));     // true

// Curried API calls
const apiCall = method => url => data => {
  return fetch(url, {
    method,
    headers: { 'Content-Type': 'application/json' },
    body: data ? JSON.stringify(data) : undefined
  });
};

const get = apiCall('GET');
const post = apiCall('POST');
const put = apiCall('PUT');

const getUsers = get('/api/users');
const createUser = post('/api/users');

// getUsers(null).then(res => res.json());
// createUser({ name: 'Alice' }).then(res => res.json());

// Curried logger
const log = level => namespace => message =>
  console.log(`[${level}] [${namespace}] ${message}`);

const error = log('ERROR');
const info = log('INFO');

const dbError = error('Database');
const authError = error('Auth');
const dbInfo = info('Database');

dbError('Connection failed');   // [ERROR] [Database] Connection failed
authError('Invalid token');     // [ERROR] [Auth] Invalid token
dbInfo('Query executed');       // [INFO] [Database] Query executed

Console Output

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

Key Takeaways

🔗

One at a Time

Transform f(a,b,c) → f(a)(b)(c)
Each call returns a function

📦

Partial Application

Fix some arguments early
Create specialized functions

♻️

Reusability

Create function factories
DRY (Don't Repeat Yourself)

⚡

Arrow Functions

a => b => c => ...
Clean, concise syntax

Pro Tip

Currying shines when you need to create specialized versions of generic functions. Great for event handlers, validators, and configuration!

Previous Topic

Functional Programming

Pure functions, immutability, composition, and functional concepts.

Next Topic

Function Composition

Combining simple functions to build complex operations.

Ask a Question

Have a question about Currying? 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

Currying

Transform multi-argument functions into sequences

Find videos you like?

Save to resource drawer for future reference!

Currying: One Argument at a Time

Currying transforms a function with multiple arguments into a sequence of functions, each taking a single argument. Named after mathematician Haskell Curry!

The Transformation

f(a, b, c) becomes f(a)(b)(c)
Each call returns a new function until all arguments are provided

Basic Currying

From multiple arguments to single arguments

Regular Function

// Takes all arguments at once
function add(a, b, c) {
  return a + b + c;
}

console.log(add(1, 2, 3)); // 6

// Must provide all arguments
// add(1, 2) // NaN
// add(1)    // NaN

✅ Curried Function

// Takes one argument at a time
function addCurried(a) {
  return function(b) {
    return function(c) {
      return a + b + c;
    };
  };
}

console.log(addCurried(1)(2)(3)); // 6

// Can partially apply!
const add1 = addCurried(1);
const add1and2 = add1(2);
console.log(add1and2(3)); // 6

Currying with Arrow Functions

Cleaner syntax

javascript

code

DarkEditable

Console Output

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

Auto-Curry Function

Generic curry helper

Universal Curry Function

// Generic curry function
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    }
    return function(...moreArgs) {
      return curried.apply(this, args.concat(moreArgs));
    };
  };
}

// Use with any function
function sum(a, b, c) {
  return a + b + c;
}

const curriedSum = curry(sum);

console.log(curriedSum(1)(2)(3));    // 6
console.log(curriedSum(1, 2)(3));    // 6
console.log(curriedSum(1)(2, 3));    // 6
console.log(curriedSum(1, 2, 3));    // 6

// Example with more arguments
function joinStrings(a, b, c, d) {
  return `${a}-${b}-${c}-${d}`;
}

const curriedJoin = curry(joinStrings);
const withDate = curriedJoin('2024')('12');
console.log(withDate('25')('log')); // 2024-12-25-log