Early return pattern in JavaScript

#webdev #javascript #beginners #tutorial

This concept might sound fancy but I bet you are already using it and maybe you didn't know it had a name. It is an approach mainly used to keep readability of methods and functions and it is not specific to Javascript.

The Early Return pattern is a coding technique where a function or method is stopped as soon as a specific condition is met and evaluates to true. Instead of proceeding with the rest of the function's logic, the method immediately returns a value or performs an action based on the condition's outcome.

Let's dive deeper into this definition using an example. We have a very simple function with two parameteres of type integer that returns their sum.


const addTwoIntegers = (firstInteger, secondInteger) => {
  return firstInteger + secondInteger;
};

Looks about right, doesn't it? But let's say that we want to throw an error if one of the arguments is not an integer.


const addTwoIntegers = (firstInteger, secondInteger) => {
  let result;

  if (Number.isInteger(firstInteger) && Number.isInteger(secondInteger)) {
    result = firstInteger + secondInteger;
  } else {
    throw new Error("Both arguments need to be integers!");
  }

  return result;
};

Chrisis averted. Now another requirement gets added: both integers need to be positive.

const addTwoIntegers = (firstInteger, secondInteger) => {
  let result;

  if (Number.isInteger(firstInteger) && Number.isInteger(secondInteger)) {
    if (firstInteger > 0 && secondInteger > 0) {
      result = firstInteger + secondInteger;
    } else {
      throw new Error("Both integers need to be positive!");
    }
  } else {
    throw new Error("Both arguments need to be integers!");
  }

  return result;
};

I believe you already notice the code becoming harder to read. Imagine that more requirements would be added to the function and we would need to implement all of them. We could of course do this using multiple if-else statements or we could go back to our defintion and try to re-write our function using the early return pattern. For this, we would write everything that we wouldn't want to happen in our function at the top, and everything that we want to happen at the bottom. In simple terms, we will be reversing the conditions we wrote in the initial example.

 const addTwoIntegers = (firstInteger, secondInteger) => {
  let result;

  if (!Number.isInteger(firstInteger) || !Number.isInteger(secondInteger)) {
    throw new Error("Both arguments need to be integers!");
  }
  if (firstInteger <= 0 || secondInteger <= 0) {
    throw new Error("Both integers need to be positive!");
  }

  return result;
};

The code in our last example is easier to read because we removed nested conditionals. Also, the expected result of our function is written at the end, so it's easy to find.

NOTE
In some situation, this pattern has no real advantage, so be mindful of when to use it. It is recommened to return early if we have simple conditions that can be checked at the beginning of a function or method.

Refrence materials: