Start Over: The Simple Way to Accomplish Nesting Level 0

Use Case: Make your code more succinct and easier to read by eliminating nested if-else statements.

Regardless of your programming experience, if you've ever created a program wherein a certain value is compared against multiple independent conditionals, you've probably violated a programming faux pas known as the 'pyramid of doom'.

The pyramid of doom is the result of nesting if-else statements inside of each other. Something like this:

if (name !== false) {
	if (directory.includes(name)) {
		if (newMembers.includes(name)) {
			if (name.charAt(0) !== 'T') {
				...
			}
		}
	}
}

This is a small example, but, if we rotated it, can you see how that might look like a pyramid?

if (name !== false) {
	if (directory.includes(name)) {
		if (newMembers.includes(name)) {
			if (name.charAt(0) !== 'T') {
				...
			}
		}
	}
}

Here are some more extreme examples - google.com.

More importantly (and really what makes the pyramid of doom so bad) is can you see how this might make your code hard to read, both for others and for yourself? Which statement are we currently residing in? Where does each statement end?

We're going to create a simple greeting/logging function called greetMember that will log hello to people and check whether or not they exist in our member database (or array, for our purposes in this post).

So, let's set up an array of current member's names and create a function to greet our members in a not so non-pyramid-friendly way:

var members = ['Tyler', 'Stephen', 'Chad']

function greetMember(name, callback) {
	if (!name) {
		callback(`Sorry, what's your name?`)
	} else {
		if (!members.includes(name)) {
			callback(`Welcome, ${name}!`)
		} else {
			callback(`Good to see you again, ${name}!`)
		}
	}
}

We're checking first that the name variable exists. If it doesn't, we're calling our callback function with the string argument 'Sorry, what's your name?'. If it does exist, then we're checking whether or not the name exists in our members array and then calling the callback accordingly.

Not terrible. We're only nesting one if-else statement inside of another one. Even though our problem is small, we want to create good habits in our code, so let's rewrite the above function with a nesting-free alternative.

function greetMember(name, callback) {
	if (!name) {
		return callback(`Sorry, what's your name?`)
	}
	if (!members.includes(name)) {
		return callback(`Welcome, ${name}!`)
	}
	return callback(`Good to see you again, ${name}!`)
}

In this better version, we're still calling the same conditional statements, however we're putting them one after the other and using the return keyword to return the callback function at each step along the way. Doing this exits the function immediately so that our program won't continue to run the rest of the unncessary function.

For example, if the name variable doesn't exist, then we'll return our callback function with the string argument 'Sorry, what's your name?' and our program will exit the function. If it does exist, we'll check the next conditional statement. If members does include name then, ultimately, we'll reach the last line of our function and return the callback with the string argument 'Good to see you again, name!'

Then, we can call our greetMember function as such:

greetMember('Phil',console.log)
// Welcome, Phil!

Referencing the 'use case' mentioned at the beginning of this post, eliminating nested if-else statements with return statements:

• Makes our code easier to read
• Makes our program more efficient by exiting functions