DEV Community

Cover image for Mastering Currying in JavaScript 🌟
Jagroop Singh
Jagroop Singh

Posted on

Mastering Currying in JavaScript 🌟

JavaScript is filled with cool features, and one of the most mind-blowing concepts is currying. Don’t worry if it sounds fancyβ€”by the end of this blog, you’ll not only understand currying but also be able to impress your developer buddies! πŸ’»πŸ”₯


🧐 What is Currying?

Currying is a way to transform a function with multiple arguments into a sequence of functions, each taking a single argument. It’s like serving a meal one dish at a time instead of all at once! 🍽️

Read this once again !!


🍰 Why Use Currying?

  1. Reusability: You can create specialized versions of functions.
  2. Readability: Makes your code look cleaner and more modular.
  3. Functional Programming Vibes: Functional programming fans πŸ’› currying.

πŸš€ Examples

Let’s jump straight into some examples:

Basic Example

// Normal function
function add(a, b) {
    return a + b;
}
console.log(add(2, 3)); // 5

// Curried version
function curriedAdd(a) {
    return function (b) {
        return a + b;
    };
}
console.log(curriedAdd(2)(3)); // 5
Enter fullscreen mode Exit fullscreen mode

πŸŽ‰ Boom! Now you can call curriedAdd(2) and get a reusable function to add 2 to anything!

const add2 = curriedAdd(2);
console.log(add2(5)); // 7
console.log(add2(10)); // 12
Enter fullscreen mode Exit fullscreen mode

Currying with Arrow Functions 🏹

Who doesn’t love short, clean arrow functions?

const multiply = (a) => (b) => a * b;

console.log(multiply(3)(4)); // 12

// Make a multiplier of 3
const triple = multiply(3);
console.log(triple(5)); // 15
console.log(triple(10)); // 30
Enter fullscreen mode Exit fullscreen mode

Real-World Example 🌐

Imagine a filter function for a shopping app:

const filterByCategory = (category) => (product) => product.category === category;

const products = [
    { name: "Shoes", category: "Fashion" },
    { name: "Laptop", category: "Electronics" },
    { name: "T-shirt", category: "Fashion" },
];

const isFashion = filterByCategory("Fashion");

console.log(products.filter(isFashion));
// Output: [ { name: "Shoes", category: "Fashion" }, { name: "T-shirt", category: "Fashion" } ]
Enter fullscreen mode Exit fullscreen mode

Breaking Down Complex Problems 🧩

Currying makes it easy to break problems into smaller, manageable parts.

const greet = (greeting) => (name) => `${greeting}, ${name}!`;

const sayHello = greet("Hello");
console.log(sayHello("Alice")); // Hello, Alice!
console.log(sayHello("Bob"));   // Hello, Bob!

const sayGoodMorning = greet("Good Morning");
console.log(sayGoodMorning("Charlie")); // Good Morning, Charlie!
Enter fullscreen mode Exit fullscreen mode

🌟 Advanced Currying with Utility Functions

Don’t want to manually curry functions? Let’s write a helper function:

const curry = (fn) => (...args) =>
    args.length >= fn.length
        ? fn(...args)
        : curry(fn.bind(null, ...args));

// Example:
const sum = (a, b, c) => 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
Enter fullscreen mode Exit fullscreen mode

πŸ€” Tricky Question Time!

Here's a fun one to tease your brain 🧠:

const add = (a) => (b) => b ? add(a + b) : a;

console.log(add(1)(2)(3)(4)()); // ❓
Enter fullscreen mode Exit fullscreen mode

What do you think the output is? Share your thoughts below! πŸ‘‡


🏁 Wrapping Up

Currying is a powerful technique that simplifies your code, makes it reusable, and adds a touch of elegance. So, start currying your functions and bring the spice of functional programming to your JavaScript code! 🌢️

Happy coding! πŸ’»βœ¨

Top comments (0)