# The Return Early Pattern Explained with JavaScript Examples

**URL:** <https://forum.freecodecamp.org/t/the-return-early-pattern-explained-with-javascript-examples/19364>\
**Category:** freeCodeCamp Contributors\
**Tags:** guide\
**Created:** [July 11, 2016, 5:45pm UTC](https://forum.freecodecamp.org/t/the-return-early-pattern-explained-with-javascript-examples/19364 "2016-07-11T17:45:34Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![camperbot](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/camperbot/32/18364_2.png) [@camperbot](https://forum.freecodecamp.org/u/camperbot)\
**Post date:** [July 11, 2016, 5:45pm UTC](https://forum.freecodecamp.org/t/the-return-early-pattern-explained-with-javascript-examples/19364/1 "2016-07-11T17:45:34Z")

</div>

The return early pattern in JavaScript is a simple way to reduce the number of `else` statements within a function body to zero. There are many reasons to prefer this pattern over using `else` statements.

- Reducing the total amount of code on the page
- Reduce line length by reducing logical complexity
- Improve Readability

The essence of the return early pattern is to replace the need for `else` conditionals in JavaScript functions by using the `return` keyword in the body of the `if` statement.

Let us create function that behaves differently under certain conditions (note: this is a trivial and contrived example just to get the point across).

```auto
function willItBlend(someObject) {
  var ItWillBlend;

  if (someObject.blendable ==== 'It will blend') {
    itWillBlend = true;
  } else {
    itWillBlend = false;
  }

  return itWillBlend;
}

```

While this does seem readable, let us add another condition to verify that the function was indeed called with an object instead of `undefined` .

```auto
function willItBlend(someObject) {
  var itWillBlend;

  if (typeof someObject === 'object') {
    if (someObject.blendable ==== 'It will blend') {
      itWillBlend = true;
    } else {
      itWillBlend = false;
    }
  } else {
    itWillBlend = false;
  }

  return itWillBlend;
}

```

This function is clear and its name is descriptive but is seems unnecessarily complicated. Can we use the return early pattern to increase readability and decrease the number of `else` statements? Let us give it a try.

```auto
function willItBlend(someObject) {
  if (typeof someObject !== 'object') {
    return false;
  }

  if (someObject.blendable !== 'It will blend') {
    return false;
  }

  return true;
}

```

Using the return early pattern, we were able to remove all the unnecessary else statements and make our functions purpose and signature (the typeof of argument it expects) much clearer and concise.

### Bonus: One conditional statement

We can further refactor this function to only use one if statement. Check it out:

```auto
function willItBlend(someObject) {
  if (
    typeof someObject !== 'object' ||
    someObject.blendable !== 'It will blend'
    ) {
    return false;
  }

  return true;
}

```

### Bonus: Ternary Operator

The function can be even further refactored to use a single line of code by using a ternary operator:

```auto
function willItBlend(someObject) {
  return typeof someObject !== 'object' || someObject.blendable !== 'It will blend' ? false : true;
}

```

---

<div class="post-metadata">

**Author:** ![glukki](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/glukki/32/163226_2.png) [@glukki](https://forum.freecodecamp.org/u/glukki)\
**Post date:** [March 10, 2017, 9:26pm UTC](https://forum.freecodecamp.org/t/the-return-early-pattern-explained-with-javascript-examples/19364/2 "2017-03-10T21:26:51Z")

</div>

The “Bonus” part code looks overcomplicated, IMO

---

<div class="post-metadata">

**Author:** ![anon52159105](https://avatars.discourse-cdn.com/v4/letter/a/45deac/32.png) [@anon52159105](https://forum.freecodecamp.org/u/anon52159105)\
**Post date:** [August 6, 2017, 11:25pm UTC](https://forum.freecodecamp.org/t/the-return-early-pattern-explained-with-javascript-examples/19364/3 "2017-08-06T23:25:31Z")

</div>

Closed on August 6, 2017, 11:25pm UTC