4 Ways You Can Get Rid of Dirty Side Effects for Cleaner Code in JavaScript
By: Amy J. Andrews
Tags: Javascript Tips, Clean Code, Functional Programming, Javascript Development, Coding

4 Ways You Can Get Rid of Dirty Side Effects for Cleaner Code in JavaScript

Side effects create a huge mental burden in the long run

Photo by Pierre Châtel-Innocenti on Unsplash

According to an analysis, a developer creates 70 bugs per 1000 lines of code on average. As a result, he spends 75% of his time on debugging. So sad!

Bugs are born in many ways. Creating side effects is one of them.

Some people say side effects are evil, some say they’re not.

I’m in the first group. Side effects should be considered evil. And we should aim for side effects free code.

Here are 4ways you can use to achieve the goal.

1. use strict;

Just add use strict; to the beginning of your files. This special string will turn your code validation on and prevent you from using variables without declaring them first.

2. Loop

Take a look at the example below:

var names = [‘amy’, ‘james’, ‘anna’, ‘joey’]; for (var i = 0; i < names.length; i++) {

console.log(names[i]);

}

What could cause side effects in this example?

Notice the indexing variable i, it’s available not only in the for loop scope but also the outside one.

If you log the value of the variable i right beneath the for loop, it should be 4.

for (var i = 0; i < names.length; i++) {

console.log(names[i]);

} console.log(i); // 4

To avoid this side effect, we have two options so far.

Option 1: use forEach

names.forEach(name => {

console.log(name);

});

Using forEach, we don’t need to define an indexing variable anymore. So, no more side effects.

Option 2: prefer using let over var

ES6 comes with a lot of useful features. The let keyword is one of them.

When you define a variable with let, it’s only available in the current scope.

for (let i = 0; i < names.length; i++) {

console.log(names[i]);

} console.log(i); // error: Uncaught ReferenceError: i is not defined

As you can see, it causes an error if you use i outside the scope it’s defined.

3. Immediately Invoked Function Expression (IIFE)

An IIFE is a JavaScript function that runs as soon as it is defined.

One of the benefits of IIEF I found that you can hide variables inside the function to avoid leaking them out, so no side affect will occur.

const Calculation = (function () {

const PI = 3.14;

let mode = 1;



return {

sum: function (a, b) {

return a + b;

}, changeMode: function (newMode) {

this.mode = newMode;

}, printMode: function () {

console.log(this.mode);

}

};

})(); let sum = Calculation.sum(2, 6); // 8

Calculation.changeMode(4);

Calculation.printMode(); // 4

If you want to modify variables, the only way you have is to change the values via the returned functions of IIEF, which would avoid side effects.

4. Pure Functions

Pure functions are functions that will return the same output with the same input.

With that being said, a pure function only depends on its own arguments, doesn’t change variables outside of its scope so that no side effect will happen.

Take this example below for an impure function:

let person = {

name: ‘Amy’,

age: 28

}; function change(person) {

let someone = person;

someone.name = ‘James’; return someone;

} let someone = change(person);

console.log(someone.name) // James

console.log(person.name); // James

The above function is impure because it changes the value of the variable person, which is outside the function. That’s a side effect.

To prevent side effects, we need to transform that function to the pure one:

let person = {

name: ‘Amy’,

age: 28

}; function change(person) {

let someone = {...person}

someone.name = ‘James’;



return someone;

} let someone = change(person);

console.log(someone.name) // James

console.log(person.name); // Amy

Now, it’s pure.

Most of the time, to reduce side effects, it’s good to create pure functions for less surprising bugs.

We don’t need to make all functions pure. We can mix pure and impure functions based on our needs because not all impure functions are bad. Sometimes we need them to serve specific purposes.

Conclusion

Imaging your codebase is side effects free. You will be faster to investigate if having any problems. You will write unit tests easily and quickly. More unit tests means you increase the odds of bug-free for your application.

Hope you like this article.

Do you have other ways to prevent side effects? If so, please share them in the comment below.