DEV Community

Cover image for Beyond Basic Functions: Explore Currying in JavaScript
Leonardo Rafael Wehrmeister
Leonardo Rafael Wehrmeister

Posted on

8 3 4 4 3

Beyond Basic Functions: Explore Currying in JavaScript

Currying in JavaScript is a functional programming technique that involves transforming a function with multiple arguments into a series of functions, each taking a single argument at a time.

Here's a breakdown of what currying does:

Takes a function with multiple arguments: Imagine a function that adds three numbers together.
Transforms it into a sequence of functions: Currying breaks this function down into smaller functions, where each function takes one argument and returns a new function that awaits the remaining arguments.
Partial application: You can call the curried function with one argument at a time, and it remembers the provided arguments until all arguments are supplied.

Benefits of currying include:

Improved code reusability: By creating smaller functions, you can reuse them in different contexts.
Enhanced code composability: Curried functions can be easily combined to create more complex functionality.
Increased flexibility: You can provide arguments partially and build up the function call over time.

Here are some code examples of currying in JavaScript using strings:

1. Curried Greeter:

This example creates a curried function for building greetings:

function greet(salutation) {
  return function(name) {
    return `${salutation}, ${name}!`;
  };
}

const sayHello = greet("Hello");
const sayHi = greet("Hi");

console.log(sayHello("Alice")); // Output: Hello, Alice!
console.log(sayHi("Bob")); // Output: Hi, Bob!
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • We define a function greet that takes a salutation string (salutation).
  • It returns a function that takes a name string (name).
  • The returned function constructs the greeting by combining the salutation and name.
  • We create separate functions sayHello and sayHi using partial application with different greetings.

2. Curried String Manipulation:

This example demonstrates currying for string manipulations:

function modifyString(action) {
  return function(str) {
    switch (action) {
      case "uppercase":
        return str.toUpperCase();
      case "lowercase":
        return str.toLowerCase();
      case "trim":
        return str.trim();
      default:
        return str;
    }
  };
}

const toUpper = modifyString("uppercase");
const toLower = modifyString("lowercase");
const trimString = modifyString("trim");

console.log(toUpper("hello world")); // Output: HELLO WORLD
console.log(toLower("HI THERE")); // Output: hi there
console.log(trimString("   spaces around  ")); // Output: spaces around
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • We define a function modifyString that takes an action string (action).
  • It returns a function that takes a string (str).
  • The inner function uses a switch statement to perform the specified action on the string based on the provided action.
  • We create separate functions for specific actions like toUpper, toLower, and trimString using partial application.

3. Curried String Formatting:

This example showcases currying to create a reusable string formatter:

function formatString(prefix, suffix) {
  return function(str) {
    return `${prefix}${str}${suffix}`;
  };
}

const announcement = formatString("[ Announcement]: ", "!");

console.log(announcement("JavaScript is awesome")); // Output: [ Announcement]: JavaScript is awesome!
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • We define a function formatString that takes a prefix string (prefix) and a suffix string (suffix).
  • It returns a function that takes a string (str).
  • The returned function combines the prefix, string, and suffix to create the formatted output.
  • We create a function announcement using partial application with a specific prefix and suffix for announcements.
  • These examples demonstrate how currying allows you to create reusable functions for various string manipulations and formatting tasks in JavaScript.

While not essential for every situation, currying provides a valuable tool for functional programmers and those seeking to write cleaner, more maintainable JavaScript code. It's a technique worth exploring to enhance your functional programming skills and potentially improve the structure and readability of your JavaScript projects.

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (2)

Collapse
 
dscheglov profile image
Dmytro Shchehlov • Edited

Great post!

But the example with string manipulation could be a little bit optimized:

function modifyString(action) {
    switch (action) {
      case "uppercase":
        return str => str.toUpperCase();
      case "lowercase":
        return str => str.toLowerCase();
      case "trim":
        return str => str.trim();
      default:
        return str => str;
    }
}
Enter fullscreen mode Exit fullscreen mode

It is not a classic curring but works in result it works in the same way

Collapse
 
fazy221 profile image
Faizan Raza

Great explanation!

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay