Mastering Function Currying in JavaScript

JavaScriptJavaScriptBeginner
Practice Now

This tutorial is from open-source community. Access the source code

Introduction

In this lab, we will explore the concept of function currying and uncurrying in JavaScript. Function currying is a technique that allows us to transform a function that takes multiple arguments into a sequence of functions that each take a single argument. On the other hand, function uncurrying is the process of transforming a sequence of functions that each take a single argument into a function that takes multiple arguments. Through this lab, we will learn how to implement both these techniques in JavaScript.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("`Conditional Statements`") javascript/AdvancedConceptsGroup -.-> javascript/error_handle("`Error Handling`") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("`Higher-Order Functions`") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("`Spread and Rest Operators`") subgraph Lab Skills javascript/variables -.-> lab-28676{{"`Mastering Function Currying in JavaScript`"}} javascript/data_types -.-> lab-28676{{"`Mastering Function Currying in JavaScript`"}} javascript/arith_ops -.-> lab-28676{{"`Mastering Function Currying in JavaScript`"}} javascript/comp_ops -.-> lab-28676{{"`Mastering Function Currying in JavaScript`"}} javascript/cond_stmts -.-> lab-28676{{"`Mastering Function Currying in JavaScript`"}} javascript/error_handle -.-> lab-28676{{"`Mastering Function Currying in JavaScript`"}} javascript/higher_funcs -.-> lab-28676{{"`Mastering Function Currying in JavaScript`"}} javascript/spread_rest -.-> lab-28676{{"`Mastering Function Currying in JavaScript`"}} end

Uncurry a Function

To uncurry a function up to a specified depth, use the uncurry function.

const uncurry =
  (fn, n = 1) =>
  (...args) => {
    const next = (acc) => (args) => args.reduce((x, y) => x(y), acc);
    if (n > args.length) throw new RangeError("Arguments too few!");
    return next(fn)(args.slice(0, n));
  };

To use the uncurry function, pass the function you want to uncurry and the depth up to which you want to uncurry it as arguments. The function will return a variadic function that you can call with the arguments you want to pass.

If you don't specify the depth, the function will uncurry up to depth 1.

const add = (x) => (y) => (z) => x + y + z;
const uncurriedAdd = uncurry(add, 3);
uncurriedAdd(1, 2, 3); // 6

If the number of arguments you pass is less than the specified depth, the function will throw a RangeError.

Summary

Congratulations! You have completed the Uncurry Function lab. You can practice more labs in LabEx to improve your skills.

Other JavaScript Tutorials you may like