Gift Egbonyi

Posted on Nov 20

Why you should stop writing long functions

#webdev #performance #beginners #javascript

Hey friends! 👋

Let’s talk about something every beginner struggles with:

Why you should stop writing long functions and how to break them into smaller ones

Long functions feel "easy" when you're starting out.
You want the code to work, and you don't understand how to break them into smaller functions, or in what order to call these small functions, so everything goes into one place.

But over time, those bulky functions turn into:

untraceable bugs
code that’s hard to read
features that are difficult to update
unnecessary stress

Smaller functions make your code cleaner and easier to reason about.

This is what I mean.

1️⃣ Long functions hide mistakes

Take this example:

const processUser = (data) => {
  // Validate
  if (!data.email.includes("@")) throw new Error("Invalid email");

  // Format
  const name = data.name.trim().toUpperCase();

  // Save
  localStorage.setItem("user", JSON.stringify({ name, email: data.email }));

  // Notify
  alert("User saved!");
}

It works.
But it mixes validation, formatting, saving and notifications features in one place.
If something breaks, you probably mightn't spot the issue very fast.

2️⃣ Smaller functions focus on one job

Now, let’s split it:

const validateUser = (data) => {
  if (!data.email.includes("@")) throw new Error("Invalid email");
}

const formatUser = (data) => {
  return {
    name: data.name.trim().toUpperCase(),
    email: data.email
  };
}

const saveUser = (user) => {
  localStorage.setItem("user", JSON.stringify(user));
}

const notify = () => {
  alert("User saved!");
}

const processUser = (data) => {
  validateUser(data);
  const user = formatUser(data);
  saveUser(user);
  notify();
}

Now you can see exactly what’s happening at a glance.

3️⃣ Smaller functions make testing easier

Which one would you rather test?

This?

processUser({ name: "Gift", email: "gift@gmail.com" });

or these?

validateUser(data);
formatUser(data);
// etc.

Why experts like short functions that focus on one feature:

let you test one idea at a time.
spot bugs earlier.
other developers can easily read your code,
helpful when you use a JavaScript framework like React.js which is components based.
helpful in next.js.

4️⃣ I promise, your future self will thank you!

Readable code isn’t for others alone.
It’s for you in two months when you no longer remember what you wrote.

Splitting functions forces you to:

name things clearly
structure your logic
avoid hidden behaviours

It’s a habit that pays off quickly.

How to break a long function into smaller pieces

A simple approach:

✔️ Step 1: Look for sections that do different jobs

Validation, fetching, formatting, rendering and separate them.

✔️ Step 2: Extract each section into its own function

Give each one a short, clear name.

✔️ Step 3: Keep each function focused

One idea per function.
If a function starts doing two things, break it again.

✔️ Step 4: Call them in order

Your main function becomes a clean “storyline”.

Quick before/after

❌ Before

One big block:

function checkout(cart) {
  // validate
  // calculate
  // update UI
  // save to server
}

✔️ After

Small clear steps:

const validateCart = (cart) => {}
const calculateTotal = (cart) => {}
const updateUI = (total) => {}
const saveToServer = (cart) => {}

const checkout = (cart) => {
  validateCart(cart);
  const total = calculateTotal(cart);
  updateUI(total);
  saveToServer(cart);
}

Much easier to maintain.

🙋🏾‍♀️ Wrap-Up

Short functions make your code:

cleaner
easier to debug
painless to update
easier for other developers to read
kinder on your future self

Start small. Refactor bit by bit.
Your codebase and your future self will thank you.
That’s it for today!
What should we talk about next Wednesday? Drop it below 👇

Connect with me on GitHub

Was this tutorial helpful? Got questions? Drop them in the 💬, I love feedback.

I’m keeping these light, fun, and useful, one small project at a time.
If you enjoyed this, leave a 💬 or 🧡 to let me know.

Follow me for more short, beginner-friendly JavaScript lessons every week.

I'm still hunting for full stack roles,
contract or full-time.
Please check out my [Portfolio](https://gift-egbonyi.onrender.com)

Portfolio

Web trails:
LinkedIn | X (Twitter)

See you next Wednesday 🚀, hopefully, on time!

Till then, write clean code and stay curious. 🦋

DEV Community