Like any program, JavaScript programs can get slow fast if we aren't careful with writing our code.

In this article, we'll look at how to fix our JavaScript code so that users will have a better experience with our app.

Inefficient Iterations

Iterations can take up a lot of time in JavaScript. We can remove loops from our code by using higher-order JavaScript array methods like filter , find , findIndex , map , reduce , every , some , etc.

With those methods, we can replace loops with these methods so that we can get rid of our iteration code, which is probably slower than those native methods that are listed.

For instance, to find an item in an array, instead of writing the following code with a loop:

const findEven = (arr) => {
  const results = [];
  for (const a of arr) {
    if (a % 2 === 0) {
      results.push(a);
    }
  }
  return results;
}

We can write the following code to do that:

const result = [1, 2, 3].filter(a => a % 2 === 0);

As we can see, the filter method is much shorter and browsers have optimized this method so that it'll probably be faster than our loop.

Our loop is long and it loops through everything and checks each entry. It can't be faster than what's implemented in our browsers natively.

Therefore, we should use array native methods as much as possible instead of writing out the iteration code by hand whenever possible.

Unorganized Code

The loose structure of JavaScript can be problematic if we keep them disorganized.

We organize our code better to reduce code bloat by removing dead code, putting functions into classes and also dividing our code into modules so that not everything is loaded everywhere.

Dead code just takes up space in our code files and does nothing, so they should be removed.

They include unused imports, variables, functions, etc.

If we have related functions that manipulate the same thing, then we can put them into classes.

For instance, if we have the following code:

const person = {};
const changeFirstName = (firstName) => {
  person.firstName = firstName;
}
const changeLastName = (lastName) => {
  person.lastName = lastName;
}

Then we can put them all in a class by writing the following:

class Person {
  changeFirstName(firstName) {
    this.firstName = firstName;
  }
  changeLastName(lastName) {
    this.lastName = lastName;
  }
}

In the code above, we put both functions into the same to encapsulate the methods and also the firstName and lastName .

We can also create multiple instances of the Person object without defining separate object literals so that's also an advantage of classes.

Since ES6, JavaScript modules has been a standard feature of JavaScript. They let us divide our code and hide code that we don't want to be exposed to the outside.

It also lets us selectively import members from it so that we can reduce the amount of code that's loaded in each module.

Therefore, we should use them. To do that, we can write the following code:

module.js

export const foo = 1;
export const bar = 2;

index.js

import { foo } from "./module";
console.log(foo);

In the code above, we have both foo and bar available for import from module.js but we only chose to import foo since in index.js since that's all we wanted.

This reduces the amount of code that we load from each script.

Use HTTP/2

HTTP/2 is the latest standard of HTTP. HTTP is used to load everything and make requests to send and receive data from any app.

It uses multiplexing so that multiple requests and responses can be sent at the same time. This is something that isn't available in previous versions of HTTP and will speed things up a lot.

We can take advantage of that by moving to HTTPS.

Conclusion

We should change our loop code to calling higher-order array methods like map and filter if possible.

Also, we should make our code shorter by removing dead code, including variables and functions that we don't want.

We can also move functions into their own class if they're related so that they're all encapsulated in one place and we can use them to define new objects instead of creating objects all from scratch.

Modules also let us selectively import code so that we can only use the code we want.

Finally, HTTP/2 will speed up requests since multiple requests can be completed at once.