From Bloated to Beautiful: How Currying in JavaScript Can Streamline Your App Code?

Have you ever stared at a wall of code in your JavaScript application, feeling overwhelmed by its complexity and sheer size? Bloated code – code that's become overly complex, lengthy, and difficult to understand – is a common problem that plagues developers. It can lead to sluggish performance, nightmarish maintenance, and skyrocketing development costs.

But fear not, JavaScript warriors! There's a powerful technique hiding within the language that can help you transform your bloated code into a thing of beauty: Currying.

Currying is a way of breaking down functions with multiple arguments into a series of functions that each take a single argument. This might sound like a minor tweak, but it can have a surprisingly significant impact on your code's readability, maintainability, and overall elegance.

What is Currying?

Imagine a recipe with a laundry list of ingredients. Currying is like taking that complex recipe and dividing it into a sequence of smaller steps, where each step focuses on adding a single ingredient. This makes the recipe easier to follow, modify, and even reuse for variations.

In JavaScript, currying achieves a similar feat. Let's consider a normal function:

1function add(a, b) {
2  return a + b;
3}
4
5const result = add(5, 3); // result will be 8

This function takes two arguments, a and b, and returns their sum. Now, let's see how currying can transform this function:

1function curriedAdd(a) {
2  return function(b) {
3    return a + b;
4  }
5}
6
7const addFive = curriedAdd(5);
8const result = addFive(3); // also results in 8
9
10// Breakdown:
11//  - curriedAdd(5) returns a new function that takes another argument (b)
12//  - addFive(3) calls the returned function with argument 3
13

Here, curriedAdd takes one argument (a) and returns a new function. This new function can then take another argument (b) and perform the addition. We can store the partially applied version (addFive) to reuse it for adding 5 to other numbers.

Benefits of Currying in JavaScript Applications

Currying offers a multitude of advantages for streamlining your JavaScript code: a. Enhanced Readability and Maintainability: By breaking down complex functions into smaller, more manageable ones, currying improves code clarity. It becomes easier to understand the logic flow and purpose of each function, making maintenance and debugging a breeze.

b. Reduced Code Duplication: Often, developers end up writing the same code logic in multiple places, leading to bloated and hard-to-maintain code. Currying allows you to create reusable building blocks. You can create a curried function that encapsulates a specific functionality and then use it in different parts of your code, eliminating redundancy.

c. Improved Function Composition: Currying makes it easier to combine smaller functions to create more complex functionality. Imagine building with Lego bricks – you start with small, individual pieces and snap them together to form elaborate structures. Similarly, currying allows you to create intricate functions by composing smaller, reusable ones.

How to Implement Currying in JavaScript

Currying can be implemented in JavaScript using a few different approaches. Here's a common way to achieve currying:

1function curry(fn) {
2  const arity = fn.length; // Get the number of expected arguments
3
4  return function curriedFn(arg1) {
5    if (arguments.length >= arity) {
6      return fn(...arguments); // Call the original function with all arguments
7    }
8    return function (...remainingArgs) {
9      return curriedFn(...remainingArgs.concat(arg1)); // Recursively call curriedFn with remaining arguments
10    }
11  }
12}
13
14// Example usage
15const add = (a, b, c) => a + b + c;
16const curriedAdd = curry(add);
17
18const add5 = curriedAdd(5);
19const add5and10 = add5(10);
20const result = add5and10(3); // result will be 18

In this example, the curry function takes a function as input and returns a curried version. It keeps track of the expected number of arguments (arity) and uses recursion to build the chain of functions that take a single argument each.

Real-World Examples of Currying

Currying isn't just a theoretical concept; it has practical applications in JavaScript development:

a. Creating Reusable Filtering Functions: Imagine you want to filter an array of objects based on multiple criteria, like price and color. With currying, you can create a generic filtering function that takes a single criterion as an argument. You can then chain these curried functions to filter based on multiple criteria. Here's an example:

1function filterBy(criteria) {
2  return function(obj) {
3    return obj[criteria.key] === criteria.value;
4  }
5}
6
7const products = [
8  { name: "Shirt", price: 20, color: "Red" },
9  { name: "Hat", price: 15, color: "Blue" },
10  { name: "Jeans", price: 40, color: "Blue" },
11];
12
13const filterByRed = filterBy({ key: "color", value: "Red" });
14const filterByPriceGT20 = filterBy({ key: "price", value: 20 });
15
16const filteredProducts = products.filter(filterByRed).filter(filterByPriceGT20);
17console.log(filteredProducts); // Output: [{ name: "Jeans", price: 40, color: "Blue" }]
18

In this example, filterBy is a curried function that takes a criteria object and returns another function that performs the actual filtering based on that criteria. We can then chain these curried functions filterByRed and filterByPriceGT20 to filter the products based on both color and price.

b. Partial Application of Functions: Currying allows you to pre-fill some arguments of a function and create a new function with the remaining arguments. This is useful when you want to fix certain aspects of a function's behavior while keeping others flexible.

1function greet(name, timeOfDay) {
2  return `Good ${timeOfDay}, ${name}!`;
3}
4
5const goodMorning = greet.bind(null, "John"); // Partially apply with name
6
7console.log(goodMorning("afternoon")); // Output: Good afternoon, John!
8

Here, goodMorning is a new function created by partially applying greet with the name "John". We can then call goodMorning with different time-of-day values.

Popular JavaScript Libraries that Utilize Currying

Several popular JavaScript libraries leverage currying to provide powerful functionalities. Let's delve deeper into two such libraries:

1. Lodash

Lodash is a utility library that offers a wide range of functions for common JavaScript tasks. One of its core strengths lies in its extensive use of currying. Here are some examples of how Lodash utilizes currying:

Collection Functions: Lodash provides several curried functions for working with collections like arrays and objects. These functions include:

• _.filter(collection, predicate): Filters elements from a collection based on a provided predicate function. The predicate function itself can be curried, allowing you to define the filtering criteria dynamically.
• _.map(collection, mapper): Transforms each element in a collection using a mapper function. Similar to _.filter, the mapper function can be curried for flexible transformations.
• _.reduce(collection, reducer, initialValue): Reduces a collection to a single value using a reducer function.

Currying allows you to pre-define the initial value or customize the reduction logic.

2. Ramda

Ramda is another popular library specifically designed for functional programming in JavaScript. Currying is a fundamental principle in Ramda, and most of its functions are designed to be curried by default. Here are some examples:

a. Point-Free Composition: Ramda encourages the use of "point-free" style, where functions are composed without explicit references to function names. This is heavily reliant on currying, as it allows you to chain functions together by passing their return values as arguments to subsequent curried functions.

b. Functional Operators: Ramda provides curried functions for various functional operations like:

• R.compose(fn1, fn2, ...): Composes multiple functions into a single function. Currying allows you to build complex pipelines of operations step-by-step.
• R.map(fn, collection): Similar to Lodash's _.map, this curried function applies a function to each element in a collection.
• R.filter(predicate, collection): Filters elements in a collection based on a curried predicate function.

Benefits of Using Curried Libraries

There are several advantages to using libraries that leverage currying:

• Improved Readability: Curried functions often lead to more concise and readable code, especially when composing functions.
• Enhanced Reusability: Curried functions promote reusability by allowing you to partially apply arguments and create new functions with specific behavior.
• Functional Programming Style: These libraries encourage a functional programming style in JavaScript, which can lead to cleaner and more predictable code.

Important Note: It's important to understand that not all functions in these libraries are curried by default. Some functions might have a fixed number of arguments and won't benefit from currying. The documentation for each library usually specifies which functions are curried.

Conclusion

Currying might seem like a fancy technique at first, but it can be a powerful tool in your JavaScript toolbox. By breaking down complex functions, reducing duplication, and enabling function composition, currying helps you write cleaner, more maintainable, and elegant code.

So, the next time you find yourself wrestling with bloated JavaScript code, consider embracing the power of currying to transform your application into a thing of beauty!

I hope this blog post has helped you understand the concept of currying and its potential benefits in JavaScript development. Happy coding!

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.