Ways to Refactor JavaScript Code You May Have Missed

JavaScript is an easy to learn programming language. It’s easy to write programs that run and does something. However, it’s hard to write a piece of clean JavaScript code.

In this article, we’ll look at some ways to refactor code that you may have missed.
Use Object Parameters

Object parameters are parameters which are objects. With object parameters, we don’t care about the order we pass in the properties.

Also, we don’t have to worry about having too many arguments passed in because it’s only one argument with multiple properties.

Furthermore, we don’t have to worry about adding and removing parameters breaking our code because it’s still one object.

The destructuring assignment syntax can decompose objects into variables, so we can use properties the same way that we use variables.

To refactor our JavaScript code with this pattern, we convert our parameters by combining them all into one object parameter.

An example of using object parameters is as follows:

const greet = ({
 greeting,
 firstName,
 lastName
}) => `${greeting}, ${firstName} ${lastName}`;

In the code above, we have one object parameter that has 3 properties, greeting , firstName , and lastName , and then we extracted them and use them as variables with the destructuring syntax.

Then we can call it as follows:

const greeting = greet({
 greeting: 'Hello',
 firstName: 'jane',
 lastName: 'smith'
})

Then we see that greeting is 'Hello, jane smith’ .
Replace Anonymous Callbacks with Named Callbacks

Anonymous functions don’t have names so they’re less clear since they don’t have names to disambiguate what they’re doing.

To make them easier to read and understand, we can extract them outside their methods and then assign them to a constant and pass that constant in.

For instance, we can write the following code to extract a callback to a constant:

const double = a => a * 2;
const arr = [1, 2, 3].map(double);

In the code above, we have the double constant, which is assigned the function:

a => a * 2;

and it’s used by the map method below it to double each value of each item in the array.

Now we know that the callback is used to double each entry’s value without having to read the callback’s code.
Replace Primitive with Object

If we have lots of primitives that we want to assign to a variable, as we do with changing states, we can put them all into an object and then use them.

This way, they’re all in one place and then we don’t have to change them everywhere if we have to change them.

Since JavaScript don’t have enums, we can use Set s to put our values into it.

For instance, we can add all our values into a set as follows:

const statuses = new Set(['loading', 'success', 'error', 'pending'])const setStatus = (status) => {
 if (statuses.has(status)) {
 return status;
 }
 }

In the code above, we have the statuses set which has multiple statuses. Then in the setStatus function, we check if the status exists in the statuses set before returning the status.

Then we can be sure that we set a valid status in our code. This works like an enum without having an enum defined as we can only set the values that are listed in the set.

Photo by Jonatan Pie on Unsplash

Decompose Conditional Into a Variable or Function

Conditional expressions, especially long ones, are hard to read. This is because they just list a bunch of conditions joined together with parentheses with and, or, or parentheses.

To make them easier to read, we can assign boolean expressions into a variable or return the expressions in a function so that we can understand what the conditions are checking without looking at the conditional expressions itself.

For instance, we can write the following code to assign a conditional expression into a variable:

const hasWinner = score === 100 || remainingPlayer === 0;

In the code above, we know that the code is checking for a winner in a game because we see that we assigned the boolean expression into the hasWinner constant.

Without the boolean, it’s hard to know that we’re checking if a game has a winner. We only know that we’re checking score is 100 and remainingPlayer is 0. It’s hard to know what they mean when they’re joined together.

We can also return the boolean expression in a function as follows:

const hasWinner = () => score === 100 || remainingPlayer === 0;

Then it’s only evaluated when hasWinner is called instead of all the time.
Conclusion

Object parameters let us pass in more argument with adding more arguments as we can pass them in as properties and destructure them in our function.

If we have lots of primitive values that repeat, we can put them all in one object. Then we can use the object to check for those items before setting the value to make sure that they’re valid.

Finally, we can set boolean expressions into functions or variables, and we can do the same thing for callbacks to make them clear.


WRITTEN BY

John Au-Yeung