Why Ken from Street Fighter can help you code better 🤔

Introduction

If you're a developer, you probably know this feeling: you come across a function that stretches over multiple lines, full of conditions and nested loops, and you wonder how you're going to survive it. 😵
Well, imagine for a moment that Ken from Street Fighter does a "hurricane kick" through your function. Do you visualize the chaos? That's exactly what happens when a function is too deeply nested.

In his must-read book Clean Code, Robert Martin (aka Uncle Bob) suggests a simple but effective rule to avoid this kind of situation: limit the number of indentations in a function. This approach helps prevent a cascade of conditions and loops that make the code hard to read, maintain, and understand.

Let’s take a look at why it’s so important, and especially how to apply this rule in your projects.

Why limit indentations?

Indentation is what you do automatically when you add a new condition or loop to your code. While it may seem harmless at first, each additional level of indentation makes the function harder to read and understand. Here’s why:

1. Deeply nested code becomes hard to read 📉
   Each additional level of indentation weighs down the structure of the function. If you need to navigate through several levels of conditions to understand what’s going on, it increases the time it takes to decipher the code's behavior.

2. Cognitive complexity increases 💻
   The more indentations there are, the more mental load is required to follow the logical flow of the function. This makes understanding harder and introduces the risk of errors. You find yourself juggling multiple scenarios at once, which is far from ideal.

3. Deeply nested code often reveals a function that does too much ⚙️
   A function with many indentation levels often indicates that it has multiple responsibilities. However, a function should have a single, clear mission, as emphasized by the Single Responsibility Principle (SRP) from SOLID.

How to reduce indentations in your code ✨

Now that you understand why excessive indentations are problematic, let’s see how to reduce them. Here are three tips to make your code cleaner and more readable:

1. Invert conditions to avoid nested code blocks

Often, you’ll find a large if condition that nests more code inside. A good practice is to invert the logic of that condition and use a return or continue earlier to exit the function quickly. This helps to reduce the levels of nesting and keep the function flatter.

// Nested code
function processOrder(order) {
  if (order.isValid()) {
    if (order.hasStock()) {
      // processing code
    }
  }
}

// Code with inverted condition
function processOrder(order) {
  if (!order.isValid()) return
  if (!order.hasStock()) return

  // processing code
}

2. Extract sub-functions to clarify logic

If you notice your function starting to accumulate indentations, it might be time to extract parts of the logic into sub-functions. This allows you to segment the behavior into smaller functions, each with a clear mission.

// Original function with multiple responsibilities
function processPayment(order) {
  if (order.isValid()) {
    if (order.hasStock()) {
      if (order.isPaid()) {
        // payment processing
      }
    }
  }
}

// Simplified function with sub-functions
function processPayment(order) {
  if (!isOrderProcessable(order)) return
  handlePayment(order)
}

function isOrderProcessable(order) {
  return order.isValid() && order.hasStock() && order.isPaid()
}

function handlePayment(order) {
  // payment processing
}

3. A function should do one thing

This is a fundamental principle of Clean Code: each function should have only one responsibility. If you see that your function is doing multiple things (for example, checking the validity of an order, processing the payment, sending an email, etc.), break it down into several functions. A function that does one thing is easier to understand, test, and maintain.

// Bad example: too many responsibilities
function completeOrder(order) {
  if (order.isValid()) {
    processPayment(order)
    sendConfirmationEmail(order)
  }
}

// Good example: each function has a single responsibility
function completeOrder(order) {
  if (!order.isValid()) return

  processOrderPayment(order)
}

function processOrderPayment(order) {
  processPayment(order)
  sendConfirmationEmail(order)
}

In summary 📝

As demonstrated by our analogy with Ken from Street Fighter, a function with too many indentations is just as destructive for your code’s readability as a spinning kick is for an opponent. 🌀
That’s why it’s crucial to limit the depth of indentations to make your code more readable and easier to understand.

So, remember: waterfalls are great 💧, but cascading if, for, or while... should be avoided at all costs. ❌

Has this article inspired you to clean up your code? 🧼 If so, grab your functions, reduce the indentations, and become the master of "clean code"! 👊