Function Composition | #2629 | LeetCode Solution

Author: neptune | 09th-Sep-2023
#JavaScript #LeetCode

Problem : Function Composition | #2629 | LeetCode

Given an array of functions [f1, f2, f3, ..., fn], return a new function fn that is the function composition of the array of functions.

The function composition of [f(x), g(x), h(x)] is fn(x) = f(g(h(x))).

The function composition of an empty list of functions is the identity function f(x) = x.

You may assume each function in the array accepts one integer as input and returns one integer as output.

Example 1:

Input: functions = [x => x + 1, x => x * x, x => 2 * x], x = 4

Output: 65


Evaluating from right to left ...

Starting with x = 4.

2 * (4) = 8

(8) * (8) = 64

(64) + 1 = 65

Example 2:

Input: functions = [x => 10 * x, x => 10 * x, x => 10 * x], x = 1

Output: 1000


Evaluating from right to left ...

10 * (1) = 10

10 * (10) = 100

10 * (100) = 1000

Example 3:

Input: functions = [], x = 42

Output: 42


The composition of zero functions is the identity function



     * @param {Function[]} functions

     * @return {Function}


    var compose = function (functions) {

        return function (x) {

            if (functions.length === 0) {

                return x;

            } else {

                let result = x;

                for (let i = functions.length - 1; i >= 0; i--) {

                    result = functions[i](result);


                return result;





     * const fn = compose([x => x + 1, x => 2 * x])

     * fn(4) // 9



Let's break down the code step by step:

1. The code defines a function called `compose` which takes one parameter, `functions`. It's intended to create a new function by composing an array of functions together.

2. Inside the `compose` function, a new function is returned. This returned function takes one parameter, `x`, which is the input value to be processed by the composed functions.

3. The function checks if the `functions` array is empty by examining its length using `functions.length === 0`. If it's empty, it simply returns the input value `x` because there are no functions to apply.

4. If the `functions` array is not empty, the code initialises a variable `result` with the value of `x`. This variable will be used to accumulate the result of applying the composite functions.

5. It then enters a `for` loop that iterates through the `functions` array in reverse order, starting from the last function in the array and moving towards the first.

6. Inside the loop, each function in the `functions` array is applied to the `result`, and the updated value is stored back in the `result` variable. This effectively composes the functions in reverse order, with the last function being applied first.

7. After the loop has processed all the functions, the final `result` value represents the output of applying the composite functions to the input `x`.

8. The final `result` value is returned as the result of the function created by `compose`.

In summary, the `compose` function takes an array of functions and returns a new function that applies these functions to an input value `x`, composing them in reverse order. This allows you to create a single function that combines multiple functions to process input data. In the example provided, `compose` is used to create a new function `fn` that applies two functions: `x => x + 1` and `x => 2 * x`, resulting in the output `9` when `fn(4)` is called.

Related Blogs
To Be Or Not To Be | #2704 | LeetCode Solution
Author: neptune | 03rd-Sep-2023
#JavaScript #LeetCode
Write a function that helps developers test their code. It should take in any value and return an object with the following two functions...

Apply Transform Over Each Element in Array | #2635 | LeetCode Solution
Author: neptune | 05th-Sep-2023
#JavaScript #LeetCode
Given an integer array `arr` and a mapping function `fn`, return a new array with a transformation applied to each element...

Counter | #2620 | LeetCode Solution
Author: neptune | 02nd-Sep-2023
#JavaScript #LeetCode
Given an integer n, return a counter function. This counter function returns n and then n + 1, n + 2, etc...

Counter 2 | #2665 | LeetCode Solution
Author: neptune | 04th-Sep-2023
#JavaScript #LeetCode
Write function 'createCounter' It accept an initial integer 'init' It should return an object with three functions- increment() , decrement(), reset()...

Arrow Functions in JavaScript | ES6
Author: neptune | 26th-Mar-2023
#JavaScript #React.js
In this article, we will explore the syntax and usage of arrow functions in detail, along with some examples...

Array Reduce Transformation | #2626 | LeetCode Solution
Author: neptune | 09th-Sep-2023
#JavaScript #LeetCode
Given an integer array `nums` and a reducer function `fn`, and an initial value `init`, return a reduced array...

Chunk Array | #2677 | LeetCode Solution
Author: neptune | 19th-Sep-2023
#JavaScript #LeetCode
Given an array arr and a chunk `size`, return a `chunked` array...

Different ways to handle state in React applications
Author: neptune | 21st-Jun-2023
#JavaScript #React.js
This article explores different ways to manage states in React, including local component state, context API, and state management libraries like Redux...

Add Two Promises | #2723 | LeetCode Solution
Author: neptune | 12th-Sep-2023
#JavaScript #LeetCode
Given two promises `promise1` and `promise2`, return a new `promise`. `promise1` and `promise2` will both resolve with a number...

Filter Elements from Array | #2634 | LeetCode Solution
Author: neptune | 06th-Sep-2023
#JavaScript #LeetCode
Given an integer array `arr` and a filtering function `fn`, return a filtered array `filteredArr`...

Is Object Empty | #2727 | LeetCode | JavaScript Solution
Author: neptune | 01st-Sep-2023
#JavaScript #LeetCode
Given an object or an array, return if it is empty...

Managing Virtual Environments in React JavaScript Projects
Author: neptune | 28th-Jun-2023
#JavaScript #React.js
Virtual environments are a valuable tool in React JavaScript projects as they allow developers to isolate dependencies, manage package versions, and maintain project consistency...

Allow One Function Call | #2666 | LeetCode Solution
Author: neptune | 11th-Sep-2023
#JavaScript #LeetCode
Given a function `fn`, return a new function that is identical to the original function except that it ensures `fn` is called at most once...

All You Need to Know About Pure Functions & Impure Functions in JavaScript
Author: neptune | 02nd-Apr-2023
#JavaScript #React.js
You should try to use pure functions whenever possible and avoid using impure functions unless necessary...

Memoize | #2634 | LeetCode Solution
Author: neptune | 12th-Sep-2023
#JavaScript #LeetCode
A memoized function is a function that will never be called twice with the same inputs. Instead it will return a cached value...

Array Prototype Last | #2619 | LeetCode Solution
Author: neptune | 20th-Sep-2023
#JavaScript #LeetCode
Write code that enhances all arrays such that you can call the `array.last()` method on any array and it will return the last element...

From REST to GraphQL: The Future of API Design
Author: neptune | 25th-Feb-2024
Unlike traditional REST APIs, GraphQL provides a more flexible and intuitive approach to data querying and retrieval...

A Guide to Writing Clean, Readable, and Maintainable Code in JavaScript
Author: neptune | 23rd-Feb-2024
By incorporating these principles into your coding practices, you contribute to creating code that is not only functional but also maintainable and easily understandable by your peers...

6 Brilliant JavaScript Frameworks for Every Developer
Author: neptune | 16th-Feb-2024
JavaScript's web development with frameworks like Synaptic.js for neural networks, OpenCV.js for multimedia processing, D3.js for dynamic data visualizations, Compromise.js for efficient NLP, ConvNet...

State in React: Component State and Controlling Behavior
Author: neptune | 21st-Feb-2024
#JavaScript #React.js
React, a popular JavaScript library for building user interfaces, introduces the concept of state and lifecycle methods to help developers manage the dynamic nature of components...

Decode Secret Language of React: Game-Changer for Web Developers
Author: neptune | 25th-Feb-2024
#JavaScript #React.js
JSX is a syntax extension for JavaScript recommended by React for describing what the UI should look like...

View More