What is Functional Programming, and How Can You Do It in JavaScript?

You: “Hey, I keep hearing about functional programming. It sounds cool, but what is it really, and how is it different from what I already do in JavaScript?”

Me: Great question! Let’s break it down step-by-step and compare functional programming (FP) with the traditional imperative way of coding.

---

? What’s the Difference Between Functional and Imperative?

In imperative programming, you write step-by-step instructions on how to do something. It’s all about the sequence of tasks—updating variables, using loops, and modifying state directly.

In functional programming, you focus on what you want to do. You use pure functions, avoid direct mutations, and leverage declarative tools like map, filter, and reduce.

Let’s see this with side-by-side examples using a CRUD (Create, Read, Update, Delete) scenario for managing a list of users.

---

?️ Example 1: Adding a User

Imperative Way

Here’s an imperative example where we mutate the original array:

let users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

function addUser(users, newUser) {
  users.push(newUser); // Directly modifies the array
}

addUser(users, { id: 3, name: 'Charlie' });
console.log(users);

Issues:

1. Mutation: The push() method modifies the original array.
2. Side Effects: If other parts of the code depend on users, they might be affected unexpectedly.

---

Functional Way

Here’s the functional approach, where we return a new array instead of mutating it:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

const addUser = (users, newUser) => [...users, newUser]; // Returns a new array

const newUsers = addUser(users, { id: 3, name: 'Charlie' });
console.log('Original:', users);
console.log('New:', newUsers);

Benefits:

1. No Mutation: The original users array remains untouched.
2. Predictable: Pure functions make it easy to understand the behavior.

---

?️ Example 2: Updating a User

Imperative Way

Here’s an example where we directly change an object inside the array:

let users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

function updateUser(users, id, newName) {
  for (let i = 0; i 



<p><strong>Issues</strong>:  </p>

<ol>
<li>
<strong>Mutation</strong>: The object inside the array is directly updated.
</li>
<li>
<strong>Verbosity</strong>: The for loop explicitly tells the computer <em>how</em> to update the user.
</li>
</ol>


<hr>

<h3>
  
  
  <strong>Functional Way</strong>
</h3>

<p>Here’s how we do it functionally using map and immutability:<br>
</p>

<pre class="brush:php;toolbar:false">const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

const updateUser = (users, id, newName) =>
  users.map(user =>
    user.id === id ? { ...user, name: newName } : user
  );

const updatedUsers = updateUser(users, 1, 'Alicia');
console.log('Original:', users);
console.log('Updated:', updatedUsers);

Benefits:

1. No Mutation: We return a new array and leave the original untouched.
2. Declarative: map focuses on what we want—transform the array—without managing loops explicitly.

---

?️ Example 3: Deleting a User

Imperative Way

Here’s the imperative version using a loop and direct modifications:

let users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

function addUser(users, newUser) {
  users.push(newUser); // Directly modifies the array
}

addUser(users, { id: 3, name: 'Charlie' });
console.log(users);

Issues:

1. Mutation: splice() modifies the original array.
2. Complexity: Manual looping makes it harder to read.

---

Functional Way

Using filter, we can declaratively express the intention:

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

const addUser = (users, newUser) => [...users, newUser]; // Returns a new array

const newUsers = addUser(users, { id: 3, name: 'Charlie' });
console.log('Original:', users);
console.log('New:', newUsers);

Benefits:

1. No Mutation: filter creates a new array.
2. Clean & Readable: The code clearly communicates the intent—keep users except the one with the given ID.

---

? Summary Table: Functional vs Imperative

Aspect	Imperative	Functional
Data Mutation	Mutates the original data (e.g., push, splice)	Avoids mutation; creates new data structures
Readability	Step-by-step, more verbose	Declarative and concise
Side Effects	More prone to unexpected side effects	Pure functions eliminate side effects
Focus	How to achieve a task (manual looping)	What to achieve (use higher-order functions)
Tools Used	Loops, conditionals	map, filter, reduce, spread operator

Aspect

---

Imperative

Functional

Data Mutation

Mutates the original data (e.g., push, splice)

Avoids mutation; creates new data structures

Readability

Step-by-step, more verbose

Declarative and concise

Side Effects

More prone to unexpected side effects

Pure functions eliminate side effects

Focus

How to achieve a task (manual looping)

What to achieve (use higher-order functions)

Tools Used

Loops, conditionals

map, filter, reduce, spread operator

---

? Why Choose Functional Programming?

Your code becomes easier to

reason about and test. Avoiding side effects makes bugs less likely. It’s more concise

and

declarative, reducing mental load.

You: “Got it! Functional programming focuses on writing predictable, clean code without mutating data. And it’s easier to read!” Me: Exactly! By shifting from imperative to functional, you’ll unlock the real power of JavaScript. Start small—use map, filter, and reduce—and soon you’ll be coding functionally like a pro. Ready to give it a try? Your future self will thank you! ?

The above is the detailed content of What is Functional Programming, and How Can You Do It in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!