Article Categories

Selected Reading

What are Partial functions in JavaScript?

Javascript Web Development Object Oriented Programming

Partial functions in JavaScript allow you to create specialized versions of functions by pre-filling some of their arguments. They take a function and some arguments, returning a new function that remembers those arguments and waits for the remaining ones.

This technique is useful for creating reusable function variants and implementing functional programming patterns like currying.

Basic Partial Function Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Partial Functions</title>
</head>
<body>
    <h1>Partial Functions in JavaScript</h1>
    <div id="result"></div>
    <button onclick="demonstratePartial()">Run Examples</button>

    <script>
        // Create a partial function
        function partialFunction(f) {
            return function (a) {
                return function (b) {
                    return f(a, b);
                };
            };
        }

        // Original function
        function multiply(a, b) {
            return a * b;
        }

        function demonstratePartial() {
            let result = document.getElementById('result');
            
            // Step 1: Create partial function
            let partialMultiply = partialFunction(multiply);
            result.innerHTML = "Step 1: partialFunction(multiply) = " + partialMultiply + "<br>";
            
            // Step 2: Apply first argument
            let multiplyBy22 = partialMultiply(22);
            result.innerHTML += "Step 2: partialFunction(multiply)(22) = " + multiplyBy22 + "<br>";
            
            // Step 3: Apply second argument and get result
            let finalResult = multiplyBy22(33);
            result.innerHTML += "Step 3: partialFunction(multiply)(22)(33) = " + finalResult + "<br><br>";
            
            // Practical example
            result.innerHTML += "<strong>Practical Usage:</strong><br>";
            let double = partialMultiply(2);
            let triple = partialMultiply(3);
            
            result.innerHTML += "double(5) = " + double(5) + "<br>";
            result.innerHTML += "triple(4) = " + triple(4) + "<br>";
        }
    </script>
</body>
</html>

Using bind() for Partial Application

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Partial with bind()</title>
</head>
<body>
    <h1>Partial Functions with bind()</h1>
    <div id="bindResult"></div>
    <button onclick="demonstrateBind()">Run bind() Examples</button>

    <script>
        function add(a, b, c) {
            return a + b + c;
        }

        function demonstrateBind() {
            let result = document.getElementById('bindResult');
            
            // Create partial function using bind()
            let addTo10 = add.bind(null, 10);
            let addTo10And5 = add.bind(null, 10, 5);
            
            result.innerHTML = "Original: add(2, 3, 4) = " + add(2, 3, 4) + "<br>";
            result.innerHTML += "Partial: addTo10(3, 4) = " + addTo10(3, 4) + "<br>";
            result.innerHTML += "More Partial: addTo10And5(4) = " + addTo10And5(4) + "<br>";
        }
    </script>
</body>
</html>

Practical Use Case

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Partial Functions - Practical Example</title>
</head>
<body>
    <h1>Event Handlers with Partial Functions</h1>
    <div id="practicalResult"></div>
    <button id="btn1">Button 1</button>
    <button id="btn2">Button 2</button>
    <button id="btn3">Button 3</button>

    <script>
        function logClick(buttonName, message, event) {
            let result = document.getElementById('practicalResult');
            result.innerHTML += buttonName + ": " + message + "<br>";
        }

        // Create partial functions for each button
        let btn1Handler = logClick.bind(null, "Button 1", "First button clicked!");
        let btn2Handler = logClick.bind(null, "Button 2", "Second button clicked!");
        let btn3Handler = logClick.bind(null, "Button 3", "Third button clicked!");

        // Attach event listeners
        document.getElementById('btn1').addEventListener('click', btn1Handler);
        document.getElementById('btn2').addEventListener('click', btn2Handler);
        document.getElementById('btn3').addEventListener('click', btn3Handler);
    </script>
</body>
</html>

Key Benefits

Code Reusability: Create specialized function versions without duplicating code
Function Composition: Build complex operations from simpler parts
Event Handling: Pre-configure event handlers with specific parameters
API Consistency: Maintain consistent interfaces while varying behavior

Comparison: Manual vs bind()

Method	Flexibility	Readability	Performance
Manual Currying	High	Complex for beginners	Good
bind() Method	Medium	Clear and concise	Slightly slower

Conclusion

Partial functions are powerful tools for creating reusable, specialized function variants. Use manual currying for maximum control or bind() for simpler, more readable partial application.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next