Stop Making These 5 Javascript Style Mistakes

Quick tips to make your code readable and maintainable.

Javascript Clean Code

How many times have you opened an old project to find confusing code that easily breaks when you add something new to it? We’ve all been there.

In a hope to lessen the amount of unreadable javascript in the world, I present to you the following examples. All of which I have been guilty of in the past.

Using Array Destructuring For Functions With Multiple Return Values

Suppose we have a function that returns multiple values. One possible implementation is to use array destructuring as follows:

While the above approach works fine, it does introduce some complexities.

When we call the function and assign the values to a,b,c,d we need to be attentive to the order that the data is returned in. A small mistake here may become a nightmare to debug down the road.

Additionally, it is not possible to specify exactly which values we would like from the function. What if we only needed c and d ?

Instead, we can use object destructuring.

Now we can easily select the data we require from the function.

This also future-proofs our code by allowing us to add additional return-variables over time without breaking things.

Not Using Object Destructuring For Function Parameters

Suppose we have a function which takes an object as an argument and performs some operation on the object’s properties. A naive approach might look something like this:

The above approach works as intended however, we are creating two unnecessary temporary references startDate and endDate .

A better implementation uses object destructuring on the subscription object to get the startDate and the endDate in one line.

We can take this one step further by performing the object destructuring directly on the argument.

Much more elegant wouldn’t you agree?

Copying Arrays Without Using the Spread Operator

Using a for-loop to iterate over an array and copy its elements into a new array is verbose and rather ugly.

The spread operator can be used to the same effect in a clear and concise manner.

Using Var

Using const guarantees a variable cannot be reassigned. This reduces bugs in our code and makes it easier to understand.

If you really need to reassign a variable, always prefer let over var .

This is because let is block-scoped whereas var is function-scoped.

Block-scoped tells us that a variable may only be accessed inside of the code block it is defined in. Trying to access the variable outside of the block gives us a ReferenceError.

Function-scoped tells us that a variable may only be accessed inside of the function it is defined in.

Both let and const are both block-scoped.

Not Using Template Literals

Manually concatenating strings together is rather cumbersome to type and can be confusing to read. Here’s an example:

Template literals provide us with a readable and concise syntax which supports string interpolation.

Template literals also provide an easy way to embed new lines. All you need to do is press the enter key on your keyboard as you normally would.

Final Words

Thanks for reading!


TranIt.Co Comments - Leave your comment or ask a question