


<section>
## What is Currying?

Currying is a technique for transforming a function that takes multiple arguments into a series of functions that take one argument each. For example, consider the following function that takes two arguments:

```javascript
function add(x) {
  return function (y) {
    return x + y;
  };
}
```

This curried version of the add function can be used like this:

```javascript
const add5 = add(5);
console.log(add5(3)); // 8
console.log(add5(7)); // 12
```

In this example, we've created a new function add5 by calling add(5). This returns a function that takes one argument, which we then call with the argument 3 and 7.

</section>
<section>
## How to Use Currying in JavaScript
Currying can be used in many different ways in JavaScript. Here are a few examples:

</section>
<section>
### Example 1: A curried version of the `fetch` function
```javascript
const curryFetch = (url) => (options) => fetch(url, options);

const getPosts = curryFetch('/posts')({ method: 'GET' });
const createPost = curryFetch('/posts')({ method: 'POST' });

// Usage:
getPosts()
  .then(response => response.json())
  .then(posts => console.log(posts));

createPost({ title: 'New post', body: 'Lorem ipsum' })
  .then(response => response.json())
  .then(post => console.log(post));

```
</section>
<section>
### Example 2: A curried version of the `reduce` function
```javascript
const curryReduce = (reducer, initialValue) => (arr) => arr.reduce(reducer, initialValue);

const sum = curryReduce((acc, curr) => acc + curr, 0);
const product = curryReduce((acc, curr) => acc * curr, 1);

// Usage:
const nums = [1, 2, 3, 4, 5];
console.log(sum(nums)); // 15
console.log(product(nums)); // 120

```
</section>
<section>
### Example 3: A curried version of the `map` function
```javascript
const curryMap = (mapper) => (arr) => arr.map(mapper);

const double = curryMap((x) => x * 2);
const triple = curryMap((x) => x * 3);

// Usage:
const nums = [1, 2, 3, 4, 5];
console.log(double(nums)); // [2, 4, 6, 8, 10]
console.log(triple(nums)); // [3, 6, 9, 12, 15]

```
</section>
<section>
## Conclusion
In conclusion, currying is a powerful technique for creating more modular and reusable code in JavaScript. By transforming a function that takes multiple arguments into a series of functions that each take one argument, we can create functions that are more flexible and composable. Currying can be used in many different ways, from creating curried versions of built-in functions like fetch, reduce, and map, to creating custom curried functions for specific use cases. When writing about currying in JavaScript, it's important to keep SEO considerations in mind, such as using relevant keywords and providing clear explanations of the concept. With the information and examples provided in this post, you should now have a better understanding of what currying is and how to use it in your JavaScript code.
</section>

Currying in JavaScript: What it is and How to Use it


<section>
  The usual way you think about JavaScript functions is as reusable pieces of
  code that make some calculations. The arguments are the function's input data,
  and the return value is the output. Here's a simple function that sums an
  array of numbers:

```js
function calculate(numbers) {
  let sum = 0;
  for (const number of numbers) {
    sum = sum + number;
  }
  return sum;
}
calculate([1, 2, 4]); // => 7
```

The numbers are the input, and the function calculate() returns the sum — the output.

What about implementing a more universal function that would support more operations on numbers: addition, multiplication, and more. How would you implement that?

Let's see what the concept of the higher-order functions is, and how it can make calculate() function more universal in regards to operations it can support.

</section>
<section>
  ## 1. Higher-order functions
Let's make a pause and think a bit about fundamentals.

In JavaScript, the functions can use primitive types (like numbers, strings), objects (like arrays, plain objects, regular expressions, etc) as arguments, and return a primitive type or object too.

In the previous example, calculate([1, 2, 4]) accepts an array of numbers as an argument, and returns the number 7 — the sum.

But is it possible to use functions as values? Assign functions themselves to variables, use them as arguments, or even return? Yes, that's possible!

All because functions in JavaScript are first-class citizens. This means that you can:

A. Assign functions to variables:

```js
// Assign to variables
const hiFunction = function () {
  return "Hello!";
};
hiFunction(); // => 'Hello!'
```

B. Use functions as arguments to other functions:

```js
// Use as arguments
function iUseFunction(func) {
  return func();
}
iUseFunction(function () {
  return 42;
}); // => 42
```

C. And even return functions from functions:

```js
// Return function from function
function iReturnFunction() {
  return function () {
    return 42;
  };
}
const myFunc = iReturnFunction();
myFunc(); // => 42
```

Finally, here's the interesting part:

In the previous examples, iUseFunction() is higher-order because it accepts a function as an argument. Also iReturnFunction() is a higher-order function because it returns another function.

On the other side, the functions that use only primitives or objects as arguments, and only return primitives or objects are named first-order functions.

In the previous examples, hiFunction() is a first-order function since it simply returns a number.

So, in JavaScript a function can be either first-order or higher-order.

That's interesting, but why are higher-order functions useful? Let's find out next!

</section>
<section>
  ## 2. The higher-order functions in practice
Let's recall the question from the post introduction. How to make the calculate() function support multiple operations on the array of numbers?

The answer is to make calculate() a higher-order function, and supply dynamically the operation in form of a function as an argument.
Let's modify the function to make it happen:

```js
function calculate(operation, initialValue, numbers) {
  let total = initialValue;
  for (const number of numbers) {
    total = operation(total, number);
  }
  return total;
}
function sum(n1, n2) {
  return n1 + n2;
}
function multiply(n1, n2) {
  return n1 * n2;
}
calculate(sum, 0, [1, 2, 4]); // => 7
calculate(multiply, 1, [1, 2, 4]); // => 8
```

Here's what changed: calculate(operation, initialValue, numbers) accepts the first argument a function that describes the operation, the second argument as the initial value, and finally the third argument is the array of numbers.

Now calculate(operation, initialValue, numbers) is a higher-order function because it accepts a function as the first argument.

sum() is the function that describes the addition operation. calculate(sum, 0, [1, 2, 4]) is using this function to perform the sum of numbers.

Same way multiply() describes the multiplication operation. calculate(multiply, 1, [1, 2, 4]) is using multiply() function to perform the production of all numbers.

Also, in the invocation calculate(sum, 0, [1, 2, 4]), the first argument is also called a callback function. You could think that a higher-order function accepts or returns callback functions.

</section>
<section>
  ## 3. The benefits of higher-order functions
What's great is you can reuse the calculate() function to support multiple operations by providing different operation functions: addition, multiplication, and more.

Additionally, the concept of the higher-order function allows composability of functions. For example, you compose calculate() with sum() to calculate the sum of all numbers in an array. If you want to calculate the production, then you compose calculate() and multiply().

The composability of functions thanks to higher-order functions is an important instrument in functional programming.

The higher-order functions help reduce the <a href='#'>code duplication</a> and favor the single-responsibility principle.

</section>
<section>
## 4. Examples of higher-order functions
If you look closer at the built-in JavaScript function on arrays, strings, DOM methods, promise method — you could notice that many of them are higher-order functions as soon as they accept a function as an argument.

For example, the array.map(mapperFunc) method is a higher-order function because it accepts a mapper function as an argument:

```js
const numbers = [1, 2, 4];
const doubles = numbers.map(function mapper(number) {
  return 2 * number;
});
doubles; // [2, 4, 8]
```
element.addEventListener(type, handler) DOM method is also a higher-order function since it accepts as the second argument the event handler function:
```js
document
  .getElementById('#myButton')
  .addEventListener('click', function handler() {
    console.log('The button was clicked!');
  });
```
</section>
<section>
  ## 5. Conclusion
Higher-order functions in JavaScript are a special category of functions that either accept functions as an argument or return functions.

On the other side, if the function uses only primitives or objects as arguments or return values, these functions are first-order.

Higher-order functions provide the reusability benefit: the main behavior is provided by the higher-order function itself, and by accepting a function as an argument you extend that behavior at your will.

Challenge: Is there a built-in higher-order method on the array object similar to calculate(operation, initialValue, numbers)? Write your guess in a comment below!
</section>





Rescent Articles

Currying in JavaScript: What it is and How to Use it

Higher order functions javaScript

Vue.js Crash Course

Tailwind css crash course

React The Full Guid

How Does SWR Work?

About

Quick links

Tags

Follow me on