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 uponfunction saveCustomer(customer) {if (isCustomerValid(customer)) {database.save(customer)} else {alert('customer is invalid')}}

// ternary equivalentfunction saveCustomer(customer) {return isCustomerValid(customer)? database.save(customer): alert('customer is invalid')}

// ES6 styleconst 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-iffunction 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 magicconst 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_JavaScript’s for loop has served us well, but it is now obsolete and should be retired in favor of newer functional…_hackernoon.com

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._Function composition has got to be my favorite part of functional programming. I hope to provide you with a good real…_hackernoon.com

Rethinking JavaScript: Break is the GOTO of loops_In my last article, Death of the for Loop, I tried to convince you to abandon the for loop for a more functional…_medium.com

Rethinking JavaScript: Eliminate the switch statement for better code_In my last 3 articles I convinced you to remove the if statement, kill the for loop, and never use break._medium.com

Functional JavaScript: Resolving Promises Sequentially_I love the new Promise library that ships with ES6, though one thing has been left out, a function to sequentially…_medium.com