Blog

JavaScript is a versatile and powerful language used for building everything from simple web pages to complex web applications. Two concepts that often confuse beginners but are vital for mastering JavaScript are closures and currying. This blog post aims to demystify these concepts, explain how they work, and illustrate their usefulness with real-world examples. By the end of this post, you’ll have a solid understanding of closures and currying and be able to apply them in your projects.

Table of Contents

1. Introduction
2. What is a Closure?
3. What is Currying?
4. Real-World Use Case: A Shopping Cart Application
5. Conclusion

1. Introduction

Before we delve into the technical details, let’s set the stage by understanding why closures and currying are important. JavaScript is a functional programming language, meaning functions are treated as first-class citizens. This characteristic allows for powerful patterns and techniques, including closures and currying. These concepts help in creating cleaner, more maintainable, and reusable code.

2. What is a Closure?

Definition and Explanation

A closure is a function that has access to its own scope, the scope of the outer function, and the global scope. Closures are created every time a function is created, at function creation time. In simpler terms, a closure is a function bundled together with references to its surrounding state (the lexical environment).

How Closures Work

To understand closures, it’s essential to understand JavaScript’s function execution context and lexical scoping:

• Execution Context: When a function is executed, a new execution context is created. This context contains information about the function’s scope, including variables, arguments, and the this keyword.
• Lexical Scoping: In JavaScript, the scope is determined at compile time based on the structure of the code. This is known as lexical scoping. Functions can access variables defined in their own scope, their parent scopes, and the global scope.

A closure is formed when a function “remembers” its lexical scope even when the function is executed outside that scope. This behavior allows the function to access variables from the scope in which it was originally defined.

Practical Examples of Closures

Example 1: Basic Closure

function outerFunction() {
    let outerVariable = "I'm outside!";

    function innerFunction() {
        console.log(outerVariable);
    }

    return innerFunction;
}

const closure = outerFunction();
closure(); // Output: "I'm outside!"

In this example, innerFunction is a closure. Even after outerFunction has finished executing, innerFunction retains access to outerVariable because it “remembers” its lexical environment.

Example 2: Counter with Closures

A common use case for closures is creating a function with private variables. Here’s an example of a simple counter:

function createCounter() {
    let count = 0;

    return function() {
        count++;
        console.log(count);
    };
}

const counter = createCounter();
counter(); // Output: 1
counter(); // Output: 2
counter(); // Output: 3

In this example, the count variable is private to the createCounter function. The inner function returned by createCounter forms a closure that retains access to count. This allows us to maintain state across multiple calls to the inner function, effectively creating a counter.

3. What is Currying?

Definition and Explanation

Currying is a technique in functional programming where a function with multiple arguments is transformed into a sequence of functions, each taking a single argument. Currying allows you to break down a function with multiple parameters into a series of functions that each take one parameter and return a new function.

How Currying Works

Currying works by taking a function that accepts multiple arguments and decomposing it into multiple functions that each accept a single argument. This transformation is particularly useful for creating more specific functions from more general ones.

The basic idea can be represented as:

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

Here, f is a function that takes two arguments, a and b. The curried version transforms f into a series of nested functions, each taking one argument.

Practical Examples of Currying

Example 1: Basic Currying

function add(a) {
    return function(b) {
        return a + b;
    };
}

const addFive = add(5);
console.log(addFive(3)); // Output: 8
console.log(addFive(10)); // Output: 15

In this example, the add function is curried. The add(5) call returns a new function that adds 5 to its argument. This allows us to create specific addition functions from a general-purpose add function.

Example 2: Advanced Currying with Arrow Functions

Currying can be elegantly implemented using arrow functions in ES6:

const multiply = a => b => a * b;

const multiplyByTwo = multiply(2);
console.log(multiplyByTwo(4)); // Output: 8
console.log(multiplyByTwo(6)); // Output: 12

Here, multiply is a curried function that takes two arguments in a curried manner. The first call, multiply(2), returns a new function that multiplies its argument by 2.

4. Real-World Use Case: A Shopping Cart Application

To illustrate the practical use of closures and currying, let’s consider a real-world scenario: building a shopping cart system for an e-commerce website.

Shopping Cart with Closures

We’ll use closures to manage the state of the shopping cart, such as adding items, removing items, and calculating the total cost.

function createShoppingCart() {
    let cart = [];

    return {
        addItem(item) {
            cart.push(item);
            console.log(`${item.name} added to the cart.`);
        },
        removeItem(itemName) {
            cart = cart.filter(item => item.name !== itemName);
            console.log(`${itemName} removed from the cart.`);
        },
        getTotal() {
            return cart.reduce((total, item) => total + item.price, 0);
        },
        getItems() {
            return cart;
        }
    };
}

const cart = createShoppingCart();
cart.addItem({ name: 'Laptop', price: 1000 });
cart.addItem({ name: 'Mouse', price: 50 });
cart.addItem({ name: 'Keyboard', price: 100 });

console.log(`Total: $${cart.getTotal()}`); // Output: Total: $1150
cart.removeItem('Mouse');
console.log(`Total after removing Mouse: $${cart.getTotal()}`); // Output: Total: $1100
console.log(cart.getItems());

In this example, the createShoppingCart function returns an object with methods to interact with the cart. The cart array is a private variable maintained by a closure, allowing the methods to access and manipulate it while keeping it encapsulated.

Currying in Discount Calculation

Now, let’s use currying to apply a discount to items in the shopping cart.

const applyDiscount = discount => price => price - price * discount;

const tenPercentOff = applyDiscount(0.1);
const twentyPercentOff = applyDiscount(0.2);

const discountedPrice1 = tenPercentOff(100);
const discountedPrice2 = twentyPercentOff(200);

console.log(`Price after 10% discount: $${discountedPrice1}`); // Output: Price after 10% discount: $90
console.log(`Price after 20% discount: $${discountedPrice2}`); // Output: Price after 20% discount: $160

Here, applyDiscount is a curried function that takes a discount rate and returns a new function that applies that discount to a given price. This approach allows us to create reusable discount functions like tenPercentOff and twentyPercentOff.

Combining Closures and Currying

Let’s enhance our shopping cart to support applying discounts to each item using currying.

function createShoppingCart() {
    let cart = [];

    return {
        addItem(item) {
            cart.push(item);
            console.log(`${item.name} added to the cart.`);
        },
        applyDiscountToItem(discount) {
            return function(itemName) {
                cart = cart.map(item =>
                    item.name === itemName
                        ? { ...item, price: item.price - item.price * discount }
                        : item
                );
            };
        },
        getTotal() {
            return cart.reduce((total, item) => total + item.price, 0);
        },
        getItems() {
            return cart;
        }
    };
}

const cart = createShoppingCart();
cart.addItem({ name: 'Laptop', price: 1000 });
cart.addItem({ name: 'Mouse', price: 50 });
cart.addItem({ name: 'Keyboard', price: 100 });

const applyTenPercent = cart.applyDiscountToItem(0.1);
applyTenPercent('Laptop');
applyTenPercent('Mouse');

console.log(`Total after discounts: $${cart.getTotal()}`); // Output: Total after discounts: $1035
console.log(cart.getItems());

In this

enhanced shopping cart, we use a curried function applyDiscountToItem to apply a discount to specific items in the cart. The function returns another function that takes the item name as an argument, making it easy to apply the discount to multiple items.

5. Conclusion

Closures and currying are powerful features in JavaScript that enable you to write cleaner, more modular, and reusable code. Closures allow functions to access variables from their lexical scope, even after the outer function has executed. This feature is essential for maintaining state in applications, creating private variables, and implementing function factories.

Currying, on the other hand, allows you to transform a function with multiple arguments into a series of functions, each taking a single argument. This technique is particularly useful for creating specific functions from general ones, enhancing code reusability and readability.

In this blog post, we’ve explored these concepts in depth and provided practical examples, including a real-world use case of a shopping cart application. By mastering closures and currying, you can write more expressive and flexible JavaScript code, making your applications more robust and easier to maintain.

As you continue your journey in JavaScript, keep experimenting with closures and currying. You’ll find that these concepts open up new possibilities and help you solve problems in elegant ways. Happy coding!