JavaScript - Currying: A Beginner's Guide

Hello there, aspiring programmers! Today, we're going to embark on an exciting journey into the world of JavaScript and explore a concept called "currying." Don't worry if you've never heard of it before – we'll start from the basics and work our way up. By the end of this tutorial, you'll be currying functions like a pro!

What is Currying?

Before we dive into the how-to's, let's understand what currying actually is. Currying is a technique in functional programming where we transform a function that takes multiple arguments into a sequence of functions, each taking a single argument.

Imagine you're making a sandwich. Instead of putting all the ingredients together at once, currying is like adding one ingredient at a time, step by step. It gives you more control and flexibility in how you build your "function sandwich."

How to Achieve Currying in JavaScript

Now, let's look at how we can implement currying in JavaScript. We'll explore two main methods: using closures and using the bind() method.

Currying Using Closures

Closures are like magical boxes in JavaScript that remember the environment in which they were created. We can use this superpower to create curried functions. Let's start with a simple example:

function curry(f) {
  return function(a) {
    return function(b) {
      return f(a, b);
    };
  };
}

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

let curriedSum = curry(sum);

console.log(curriedSum(2)(3)); // Output: 5

In this example, curry is a higher-order function that takes another function f as an argument. It returns a new function that takes the first argument a, which in turn returns another function that takes the second argument b. Finally, it calls the original function f with both arguments.

Let's break it down step by step:

1. We define a curry function that will transform our regular function into a curried one.
2. We have a simple sum function that adds two numbers.
3. We create a curriedSum by passing sum to our curry function.
4. When we call curriedSum(2)(3), it's actually doing this:
   • curriedSum(2) returns a function that remembers 2 as the first argument.
   • We immediately call this returned function with (3), which completes the operation.

Cool, right? It's like we're building our function call piece by piece!

Currying Using bind() Method

JavaScript also provides us with a built-in method called bind() that we can use for currying. The bind() method creates a new function that, when called, has its this keyword set to a provided value, with a given sequence of arguments preceding any provided when the new function is called.

Let's see how we can use bind() for currying:

function multiply(x, y) {
  return x * y;
}

let multiplyByTwo = multiply.bind(this, 2);
console.log(multiplyByTwo(4)); // Output: 8

let multiplyByThree = multiply.bind(this, 3);
console.log(multiplyByThree(4)); // Output: 12

In this example:

1. We start with a simple multiply function that takes two arguments.
2. We use bind() to create a new function multiplyByTwo. The 2 is preset as the first argument.
3. When we call multiplyByTwo(4), it's essentially calling multiply(2, 4).
4. We do the same to create multiplyByThree, presetting 3 as the first argument.

The bind() method allows us to "fix" certain arguments of a function, creating a new function with those arguments already set.

Use Cases of Currying

Now that we understand how to curry functions, let's explore why we might want to do this. Currying has several practical applications in JavaScript:

1. Function Composition: Currying makes it easier to compose functions, where the output of one function becomes the input of another.

2. Partial Application: We can create specialized functions from more general ones, like our multiplyByTwo example.

3. Avoiding Repetition: When you find yourself calling a function with some of the same arguments over and over, currying can help reduce repetition.

4. Event Handling: In frontend development, currying can be useful for handling events with additional parameters.

Let's look at a real-world example of using currying for event handling:

function handleClick(message, event) {
  console.log(message, event.target);
}

let button = document.getElementById('myButton');
button.addEventListener('click', handleClick.bind(null, 'Button clicked:'));

In this example, we're using currying to pass an additional parameter to our event handler. When the button is clicked, it will log "Button clicked:" followed by the event target.

Methods for Currying in JavaScript

Here's a table summarizing the methods we've discussed for currying in JavaScript:

Method	Description	Example
Closures	Uses nested functions to create curried functions	function curry(f) { return function(a) { return function(b) { return f(a, b); }; }; }
bind()	Uses the bind() method to preset arguments	let multiplyByTwo = multiply.bind(this, 2);

Conclusion

Congratulations! You've just taken your first steps into the world of currying in JavaScript. Remember, like learning any new programming concept, practice is key. Try creating your own curried functions and experiment with different use cases.

Currying might seem a bit abstract at first, but as you use it more, you'll start to see how it can make your code more flexible and reusable. It's like learning to use a new tool in your programming toolbox – at first it might feel awkward, but soon you'll wonder how you ever coded without it!

Keep coding, keep learning, and most importantly, have fun! JavaScript is a playground of possibilities, and currying is just one of the many exciting features waiting for you to explore.

Credits: Image by storyset