JS Functional Programming Concepts

For your Week-04 Task-2, your mentor expects you to understand the Functional Programming concepts first and then implement the utility library (curry(), compose(), pipe(), deepFreeze()). Below are the concepts with clear definitions and examples.

Week-04 Task-2: Functional Programming Concepts

1. Functional Programming (FP)

Definition

Functional Programming is a programming paradigm where programs are built using functions. It focuses on pure functions, immutable data, avoiding side effects, and using functions as values.

Example

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

console.log(add(10, 20)); // 30

Enter fullscreen mode Exit fullscreen mode

Here, the program is built around functions.

2. Pure Function

Definition

A pure function always returns the same output for the same input and does not modify external data or produce side effects.

Example

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

console.log(multiply(2, 5)); // 10
console.log(multiply(2, 5)); // 10

Enter fullscreen mode Exit fullscreen mode

The output is always the same.

Not a Pure Function

let count = 0;

function increment() {
    count++;
    return count;
}

Enter fullscreen mode Exit fullscreen mode

Output:

1
2
3

Enter fullscreen mode Exit fullscreen mode

The output changes because it depends on external state.

3. Immutability

Definition

Immutability means data should not be modified after it is created. Instead of changing existing data, create a new copy with the changes.

Mutable Example

let user = {
    name: "Sai"
};

user.name = "Rahul";

console.log(user);

Enter fullscreen mode Exit fullscreen mode

Output

{ name: "Rahul" }

Enter fullscreen mode Exit fullscreen mode

The original object was changed.

Immutable Example

let user = {
    name: "Sai"
};

let updatedUser = {
    ...user,
    name: "Rahul"
};

console.log(user);
console.log(updatedUser);

Enter fullscreen mode Exit fullscreen mode

Output

{ name: "Sai" }

{ name: "Rahul" }

Enter fullscreen mode Exit fullscreen mode

The original object is unchanged.

4. Higher-Order Function (HOF)

Definition

A Higher-Order Function is a function that takes another function as an argument or returns another function.

Example

function greet(name) {
    return "Hello " + name;
}

function process(fn, value) {
    console.log(fn(value));
}

process(greet, "Sai");

Enter fullscreen mode Exit fullscreen mode

Output

Hello Sai

Enter fullscreen mode Exit fullscreen mode

process() receives another function (greet) as an argument.

Built-in Higher-Order Functions

• map()
• filter()
• reduce()
• forEach()

5. map()

Definition

map() creates a new array by applying a function to every element of the original array.

Example

const numbers = [1, 2, 3, 4];

const squares = numbers.map(num => num * num);

console.log(squares);

Enter fullscreen mode Exit fullscreen mode

Output

[1, 4, 9, 16]

Enter fullscreen mode Exit fullscreen mode

The original array is not changed.

6. filter()

Definition

filter() creates a new array containing only the elements that satisfy a condition.

Example

const numbers = [1, 2, 3, 4, 5, 6];

const even = numbers.filter(num => num % 2 === 0);

console.log(even);

Enter fullscreen mode Exit fullscreen mode

Output

[2, 4, 6]

Enter fullscreen mode Exit fullscreen mode

7. reduce()

Definition

reduce() reduces an array into a single value by repeatedly combining elements.

Example

const numbers = [1, 2, 3, 4];

const sum = numbers.reduce((acc, curr) => acc + curr, 0);

console.log(sum);

Enter fullscreen mode Exit fullscreen mode

Output

10

Enter fullscreen mode Exit fullscreen mode

Explanation:

0 + 1 = 1
1 + 2 = 3
3 + 3 = 6
6 + 4 = 10

Enter fullscreen mode Exit fullscreen mode

8. Currying

Definition

Currying is the process of converting a function that takes multiple arguments into a sequence of functions that each take one argument.

Normal Function

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

console.log(add(10, 20, 30));

Enter fullscreen mode Exit fullscreen mode

Output

60

Enter fullscreen mode Exit fullscreen mode

Curried Function

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

console.log(add(10)(20)(30));

Enter fullscreen mode Exit fullscreen mode

Output

60

Enter fullscreen mode Exit fullscreen mode

9. Composition

Definition

Function composition combines multiple functions into a single function, where the output of one function becomes the input of the next.

Example

function double(x) {
    return x * 2;
}

function square(x) {
    return x * x;
}

console.log(square(double(5)));

Enter fullscreen mode Exit fullscreen mode

Output

100

Enter fullscreen mode Exit fullscreen mode

10. compose()

Definition

compose() executes functions from right to left.

Example

const compose = (f, g) => x => f(g(x));

const double = x => x * 2;
const square = x => x * x;

console.log(compose(square, double)(5));

Enter fullscreen mode Exit fullscreen mode

Execution

double(5)

↓

10

↓

square(10)

↓

100

Enter fullscreen mode Exit fullscreen mode

11. pipe()

Definition

pipe() executes functions from left to right.

Example

const pipe = (f, g) => x => g(f(x));

const double = x => x * 2;
const square = x => x * x;

console.log(pipe(double, square)(5));

Enter fullscreen mode Exit fullscreen mode

Execution

double(5)

↓

10

↓

square(10)

↓

100

Enter fullscreen mode Exit fullscreen mode

Difference Between compose() and pipe()

compose() pipe() Right → Left Left → Right compose(square, double)(5) pipe(double, square)(5) square(double(5)) square(double(5))

Both produce the same result if the functions are arranged appropriately, but the direction of execution is different.

12. Referential Transparency

Definition

An expression is referentially transparent if it can be replaced by its value without changing the program’s behavior.

Example

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

console.log(add(2, 3));

Enter fullscreen mode Exit fullscreen mode

You can replace:

add(2, 3)

Enter fullscreen mode Exit fullscreen mode

with:

5

Enter fullscreen mode Exit fullscreen mode

and the program behaves the same.

13. Side Effects

Definition

A side effect is any operation that changes something outside the function, such as modifying a variable, updating the DOM, making an API call, writing to a file, or printing to the console.

Example

let total = 0;

function add(value) {
    total += value;
}

Enter fullscreen mode Exit fullscreen mode

The function changes external state (total), so it has a side effect.

14. Side-Effect Isolation

Definition

Side-effect isolation means keeping impure operations separate from pure business logic.

Example

function calculateTotal(price, tax) {
    return price + tax;
}

const total = calculateTotal(100, 18);
console.log(total);

Enter fullscreen mode Exit fullscreen mode

• calculateTotal() is pure.
• console.log() is the side effect.

Keeping them separate makes the code easier to test and maintain.

15. deepFreeze()

Definition

deepFreeze() recursively freezes an object and all of its nested objects, making them immutable.

Example

const user = {
    name: "Sai",
    address: {
        city: "Bangalore"
    }
};

deepFreeze(user);

// These changes will fail (or throw in strict mode)
user.name = "Rahul";
user.address.city = "Hyderabad";

Enter fullscreen mode Exit fullscreen mode

The object remains unchanged.

Summary

Concept One-Line Definition Functional Programming Programming using functions, pure logic, and immutable data. Pure Function Same input → Same output, no side effects. Immutability Never modify existing data; create new data instead. Higher-Order Function Takes or returns another function. map() Transforms every element into a new array. filter() Returns only elements matching a condition. reduce() Combines an array into a single value. Currying Converts a multi-argument function into a chain of single-argument functions. Composition Combines multiple functions together. compose() Executes functions from right to left. pipe() Executes functions from left to right. Referential Transparency Replace an expression with its value without changing behavior. Side Effect Any change outside the function. Side-Effect Isolation Keep pure logic separate from side effects. deepFreeze() Recursively freezes an object to make it immutable.