Rethinking JavaScript: The if statement

Thinking functionally has opened my mind about programming. It has given me a greater depth of understanding of code. It has also led me on a quest in which I found myself questioning many of the core features of the language.

I have recently been questioning the if statement itself.

Having written an entire application completely void of a singleif statement, I have found if to be optional.

If you are unfamiliar with functional programming this probably sounds like the rantings of a mad man, but stick with me a bit and allow me to explain.

Learning multiple ways to solve the same problem amplifies your mental toolkit by magnitudes.

First, meet the if statement replacement, the ternary operator:

condition ? expr1 : expr2

Functional programming has taught me to write small functions like this:(don’t yell at me for not currying, that’s for another article)

const add = (x, y) => x + y

The if statement doesn’t fit into this type of function, but the ternary operator does!

const isGreaterThan5 = x => x > 5 ? 'Yep' : 'Nope'

Soon I began to find almost every instance of an if statement could be replaced with an equivalent ternary operation.

// typical code you might stumble upon
function saveCustomer(customer) {
  if (isCustomerValid(customer)) {
    database.save(customer)
  } else {
    alert('customer is invalid')
  }
}
// ternary equivalent
function saveCustomer(customer) {
  return isCustomerValid(customer)
    ? database.save(customer)
    : alert('customer is invalid')
}
// ES6 style
const saveCustomer = customer =>
  isCustomerValid(customer)
    ? database.save(customer)
    : alert('customer is invalid')

Then I started to think how the ternary operator could fit into an else if statement. I was able to do this with a nested ternary, but it was really messy and not easy to understand.

Until I started to get creative with my formatting.

// old school else-if
function customerValidation(customer) {
  if (!customer.email) {
    return error('email is require')
  } else if (!customer.login) {
    return error('login is required')
  } else if (!customer.name) {
    return error('name is required')
  } else {
    return customer
  }
}
// ES6 style custom formatted ternary magic
const customerValidation = customer =>
  !customer.email   ? error('email is required')
  : !customer.login ? error('login is required')
  : !customer.name  ? error('name is required')
                    : customer

Now you can clearly see all the conditions defined on the left hand side and the values returned on the right side.

Even though it is possible to replace every if statement with a ternary operator, I am not saying you should do so. This is just another tool for you to use and consider.

This Rethinking JavaScript article is just one in a series. More to come in the near future!

I would love to hear your feedback and thoughts on how you would rethink theif statement. Do you have a scenario where you are unsure how this will work? Tell me, let me know!

Continue to Part 2 Rethinking JavaScript: Death of the For Loop.

Rethinking JavaScript: Death of the For Loop

I know it’s a small thing, but it makes my day when I get those follow notifications on Medium and Twitter (@joelnet). Or if you think I’m full of shit, tell me in the comments below.

Cheers!

Related Articles

Functional JavaScript: Function Composition For Every Day Use.

Rethinking JavaScript: Break is the GOTO of loops

Rethinking JavaScript: Eliminate the switch statement for better code

Functional JavaScript: Resolving Promises Sequentially

Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!