Embrace Intermediate Variables and Early Returns in JavaScript

Writing readable code is tough, but it’s worth it. Start by using intermediate variables. These variables break down complex logic into simple, understandable steps.

Let’s say you’re building a function to handle user authentication. The function needs to check several things: whether the username and password are correct (1), whether the account is active (2), and whether the user has agreed to the latest terms of service (3).

1
if (isCorrectPassword(username, password)
2
    && isAccountActive(username)
3
    && hasAgreedToTerms(username)) {
4
    // Proceed with login
5
}

This might do the job. But imagine you need to add more conditions later on. Suddenly, the if-statement becomes harder to read and maintain. Each new condition adds another layer of complexity.

Simplify with Intermediate Variables

One way to clean up this code is by introducing intermediate variables with meaningful names.

1
const isAuthenticated = isCorrectPassword(username, password);
2
const isActive = isAccountActive(username);
3
const isCompliant = hasAgreedToTerms(username);
4

5
if (isAuthenticated && isActive && isCompliant) {
6
    // Proceed with login
7
}

Now, instead of trying to parse a long if-statement, you can see at a glance what the code is checking for. The logic is the same, but the readability is greatly improved.

Consider a scenario where you need to process a user’s order. The order should only be processed if the user is logged in (1), the cart isn’t empty (2), and the payment method is valid (3).

1
const isLoggedIn = checkUserLogin(user);
2
const hasItemsInCart = cart.items.length > 0;
3
const isPaymentValid = validatePaymentMethod(user.paymentMethod);
4

5
if (isLoggedIn && hasItemsInCart && isPaymentValid) {
6
    // Process the order
7
}

With these intermediate variables, anyone reading the code can quickly understand the preconditions for processing an order.

The Power of Early Returns

Code doesn’t have to be a puzzle for the next person who reads it. Readable code is key, and early returns let you zero in on the important parts of your logic without getting lost in unnecessary details.

Nested if-statements make code harder to follow. Let’s look at a common pattern.

1
if (isAuthenticated) {
2
    if (isActive) {
3
        if (isCompliant) {
4
            // Proceed with login
5
        }
6
    }
7
}

We can all agree this is a horrible approach. Deeply nested structures that are difficult to manage, especially as more conditions are added. Instead, use early returns to flatten the structure and make the code easier to read.

1
if (!isAuthenticated) return;
2
if (!isActive) return;
3
if (!isCompliant) return;
4

5
// Proceed with login

With early returns, you immediately exit the function when a condition isn’t met. This allows you to focus on the main task without unnecessary nesting.

Why Early Returns Make Sense

Early returns help keep your code simple and to the point. This approach is particularly useful in real-world applications where functions can have many preconditions.

1
function submitForm(data) {
2
    if (!data.name) return 'Name is required';
3
    if (!data.email) return 'Email is required';
4
    if (!isValidEmail(data.email)) return 'Email is invalid';
5

6
    // Submit the form
7
    sendToServer(data);
8
    return 'Form submitted successfully';
9
}`

Inside the submitForm function, we’re checking for missing or invalid fields and return early if something is wrong. The rest of the function is only concerned with the actual submission.

By using early returns and intermediate variables, you can transform complex, hard-to-read code into something much more manageable.