Currying in JavaScript (From Basics to Advanced)

Currying in JS

Currying is another powerful concept in JavaScript that relies heavily on closures. If you’ve just understood closures, currying is the next logical step.

1. What is Currying?

Currying is the process of transforming a function that takes multiple arguments into a series of functions that take one argument at a time.

Get Aakash Jain’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

👉 Think of it like breaking down a meal into small bites 🍽️.

2. Basic Example

Without Currying:

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

console.log(add(2, 3)); // 5

With Currying:

function curriedAdd(a) {
  return function(b) {
    return a + b;
  };
}

console.log(curriedAdd(2)(3)); // 5

Here, curriedAdd(2) returns a new function that remembers a using a closure.

3. Why Use Currying?

• Reusability: Reuse partial functions.
• Readability: Clearer intent when dealing with multiple arguments.
• Functional Programming: Essential concept in FP libraries like Lodash, Ramda.

4. Real-World Example

Example: Logging Utility

function log(level) {
  return function(message) {
    console.log(`[${level}] ${message}`);
  };
}

const info = log("INFO");
const error = log("ERROR");
info("Server started");   // [INFO] Server started
error("Server crashed"); // [ERROR] Server crashed

Here, log("INFO") creates a reusable logger for info messages.

5. Advanced Currying

We can create a generic curry function to transform any function into a curried one.

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

// Example usage
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

This curry function works for any number of arguments.

6. Partial Application vs Currying

🔹 Currying: Always breaks function into unary (single-arg) functions.

curriedSum(1)(2)(3);

🔹 Partial Application: Fixes some arguments, but not necessarily one at a time.

function partial(fn, ...fixedArgs) {
  return function(...remainingArgs) {
    return fn(...fixedArgs, ...remainingArgs);
  };
}

const add5 = partial(sum, 5);
console.log(add5(10, 20)); // 35

7. Currying in React

Currying is often useful in event handlers.

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

function App() {
  const handleClick = type => event => {
    console.log(`${type} button clicked!`, event);
  };
  return (
    <div>
      <Button label="Save" onClick={handleClick("save")} />
      <Button label="Delete" onClick={handleClick("delete")} />
    </div>
  );
}

Here, handleClick("save") returns a new function that still expects the event — a perfect use of currying.

8. Conclusion

• Currying = breaking down a multi-arg function into single-arg functions.
• It improves reusability, clarity, and functional composition.
• Widely used in functional programming, React event handlers, and libraries.