# Functional Programming in JavaScript – Functions as First-Class Citizens

Yesterday, I explored **JavaScript Prototypes and Prototypal Inheritance** and understood how JavaScript's object system works underneath the `class` syntax.

Today, I shifted my focus from objects and inheritance to another important programming style:

**Functional Programming.**

JavaScript treats functions as **first-class citizens**, which means functions can be stored in variables, passed as arguments, and returned from other functions.

I explored:

*   First-Class Functions
    
*   Callback Functions
    
*   Higher-Order Functions
    
*   Pure Functions
    
*   Side Effects
    
*   `map()`
    
*   `filter()`
    
*   `reduce()`
    
*   `forEach()`
    

Let's dive in.

* * *

# What is Functional Programming?

**Functional Programming (FP)** is a programming style where functions are treated as the primary building blocks of a program.

Instead of focusing mainly on changing data and object state, functional programming often emphasizes:

*   Reusable functions
    
*   Predictable behavior
    
*   Avoiding unnecessary side effects
    
*   Transforming data
    
*   Composing smaller functions
    

JavaScript supports functional programming because functions are first-class values.

* * *

# Functions Are First-Class Citizens

In JavaScript, functions can be treated like any other value.

We can store a function inside a variable:

```javascript
const greet = function () {

    console.log("Hello!");

};
```

Then call it:

```javascript
greet();
```

We can also store an arrow function:

```javascript
const add = (a, b) => a + b;

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

Functions can therefore be:

*   Stored in variables
    
*   Passed to other functions
    
*   Returned from functions
    
*   Stored inside arrays and objects
    

* * *

# Passing Functions as Arguments

We can pass a function to another function.

```javascript
function greetUser(name) {

    console.log(`Hello ${name}`);

}

function processUser(callback) {

    callback("Saurabh");

}

processUser(greetUser);
```

Here:

```text
greetUser
    ↓
passed to
    ↓
processUser
    ↓
callback()
```

This is the foundation of **callback functions**.

* * *

# What is a Callback Function?

A **callback** is a function passed into another function so that it can be executed later or at a specific point.

Example:

```javascript
function calculate(a, b, callback) {

    return callback(a, b);

}

function add(a, b) {

    return a + b;

}

console.log(
    calculate(10, 20, add)
);
```

Output:

```text
30
```

The `add` function is being passed as a callback.

* * *

# Higher-Order Functions

A **higher-order function** is a function that:

*   Accepts another function as an argument
    
*   Returns a function
    
*   Or does both
    

Example:

```javascript
function operate(a, b, operation) {

    return operation(a, b);

}

const result = operate(
    10,
    5,
    (a, b) => a * b
);

console.log(result);
```

Here `operate()` is a higher-order function because it accepts another function.

* * *

# Why Higher-Order Functions Matter

Higher-order functions allow us to create reusable logic.

Instead of writing:

```javascript
function addNumbers(a, b) {
    return a + b;
}

function multiplyNumbers(a, b) {
    return a * b;
}
```

we can create a generic operation:

```javascript
function calculate(a, b, operation) {

    return operation(a, b);

}
```

Now the behavior can be changed by passing different functions.

* * *

# Pure Functions

A **pure function** is a function that:

1.  Produces the same output for the same input.
    
2.  Doesn't modify external state or cause observable side effects.
    

Example:

```javascript
function add(a, b) {

    return a + b;

}
```

Every time we call:

```javascript
add(10, 20);
```

we get:

```text
30
```

The function doesn't depend on outside variables.

* * *

# Impure Functions

Consider:

```javascript
let total = 0;

function addToTotal(amount) {

    total += amount;

}
```

The function modifies external state.

Its behavior depends on the current value of `total`.

This makes it an **impure function**.

Impure functions aren't always bad, but understanding side effects helps us control application complexity.

* * *

# What are Side Effects?

A **side effect** is something a function does beyond simply returning a value.

Examples include:

*   Changing a global variable
    
*   Modifying an object outside the function
    
*   Updating the DOM
    
*   Writing to storage
    
*   Making an API request
    
*   Logging to the console
    

For example:

```javascript
document.body.textContent = "Hello";
```

This changes something outside the function's return value.

* * *

# Array Methods

Functional programming becomes especially useful when working with arrays.

JavaScript provides methods such as:

```text
map()
filter()
reduce()
forEach()
```

These methods commonly accept callback functions.

* * *

# forEach()

`forEach()` executes a function once for every element.

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

numbers.forEach((number) => {

    console.log(number);

});
```

Output:

```text
1
2
3
4
```

`forEach()` is useful when we want to perform an action for each item.

* * *

# map()

`map()` creates a **new array** by transforming each element.

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

const doubled = numbers.map(
    number => number * 2
);

console.log(doubled);
```

Output:

```text
[2, 4, 6, 8]
```

The original array remains unchanged.

* * *

# filter()

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

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

const evenNumbers = numbers.filter(
    number => number % 2 === 0
);

console.log(evenNumbers);
```

Output:

```text
[2, 4, 6]
```

* * *

# reduce()

`reduce()` is used to combine array elements into a single accumulated value.

For example, calculating a total:

```javascript
const numbers = [10, 20, 30];

const total = numbers.reduce(
    (sum, number) => sum + number,
    0
);

console.log(total);
```

Output:

```text
60
```

The second argument:

```javascript
0
```

is the initial accumulator value.

* * *

# map() vs filter() vs reduce()

| Method | Purpose | Returns |
| --- | --- | --- |
| `forEach()` | Perform an action | `undefined` |
| `map()` | Transform elements | New array |
| `filter()` | Select elements | New array |
| `reduce()` | Combine elements | Single value |

A simple way to remember them:

```text
map     → Transform
filter  → Select
reduce  → Combine
forEach → Perform an action
```

* * *

# Chaining Array Methods

We can combine these methods.

Example:

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

const result = numbers
    .filter(number => number % 2 === 0)
    .map(number => number * 2);

console.log(result);
```

Output:

```text
[4, 8, 12]
```

The process is:

```text
Original Array
      ↓
   filter()
      ↓
Even Numbers
      ↓
    map()
      ↓
Doubled Numbers
```

This style is extremely common in modern JavaScript.

* * *

# Functional Programming and React

These concepts become especially important when working with React.

For example:

```javascript
const names = users.map(
    user => user.name
);
```

Or filtering data:

```javascript
const activeUsers = users.filter(
    user => user.active
);
```

These patterns appear constantly when building user interfaces.

* * *

# Avoiding Mutation

Functional programming often encourages avoiding unnecessary mutation.

Instead of:

```javascript
const numbers = [1, 2, 3];

numbers.push(4);
```

we can create a new array:

```javascript
const numbers = [1, 2, 3];

const updatedNumbers = [
    ...numbers,
    4
];
```

Now the original array remains unchanged.

This idea becomes particularly important when working with React state.

* * *

# Best Practices

✔ Keep functions small and focused.

✔ Prefer pure functions when practical.

✔ Avoid unnecessary mutation.

✔ Use `map()` for transformation.

✔ Use `filter()` for selection.

✔ Use `reduce()` for accumulation.

✔ Use `forEach()` when you simply need to perform an action for each element.

✔ Use meaningful callback parameter names.

* * *

# My Biggest Takeaway

Today, I learned that JavaScript functions are much more powerful than simply blocks of reusable code.

Because functions are **first-class values**, I can pass them around, return them, and use them to build flexible abstractions.

The array methods were especially important:

`map()` **→ Transform**

`filter()` **→ Select**

`reduce()` **→ Combine**

`forEach()` **→ Perform an action**

These concepts are going to be extremely useful as I move toward **React**, because modern frontend development relies heavily on transforming and rendering collections of data.