Avoid slow Javascript code
Tags: javascript, beginners, tutorial, webdev
Published: 2021-06-14 20:10:00

## Table of contents 
  * [Introduction](#intro)
  * [Unused Variables](#unused)
  * [Loop Activity](#loop)
  * [Javascript Loading](#loading)
  * [Decreasing Dom Access](#domacess)
  * [Conclusion](#conclusion)

### Introduction <a name="intro"></a>

In this article, we will discuss a few topics that can help your *Javascript* code perform well and fast. We will be going over some common mistakes to help us understand what makes our code run smoother and a bit more efficient. Later on we will discuss about Algorithms and Data structures, but that is a little more advanced. So for starters, let us first learn the common mistakes that make bad code. 

Let's start off by asking ourselves how exactly do we write faster code? Is there some sort of secret *key words*? Special methods or functions? Or an advanced framework? Actually no. There are no special functions or methods into making our code run faster. It's actually a bit more simpler than that. We can start off with *unused variables* and move forward from there. 

### Unused Variables <a name="unused"></a>

I am pretty sure we have all seen the most common error in our console when working with _JS_.

`variable is defined but never used` 

This is a very common mistake that a lot of beginners tend to just ignore because the variable sometimes wont have any value. So commonly we'll assume it has no affect to the code if it's not breaking it. But *unused* variables will cause performance issues since it is just taking up *space* in our browser. To put into simple terms, don't create variables if you don't plan on using them at all. 

If you were to host a pizza party and invited 4 friends and each friend would eat exactly 2 slices of pizza, and each pizza comes with 8 slices. Would you order only the amount you need or will you order more pizzas even after knowing that your friends will only eat 2 slices? I'm sure we wouldn't want to waste any food or money, so in coding terms why would you create a variable and not use it, it would just be a waste and take up space.

### Loop activity <a name="loop"></a>

When working with *loops* in our code, the loop will make an iteration over and over until returned true or false. This can cause a lot of heavy work to the **CPU** especially if we are looping through a big data structure with many objects. To help us make our loop a bit more efficient we can help by putting our _assignments_ or _statements_ outside of the loop so we don't iterate through the properties each time when we only need to access them once. 

For example, here inside our loop we are accessing the `arr.length` every single time the loop iterates over and over, which can cause the code to perform slow over time, especially if we are working with a big database and need to find specific data. 

```
var i;
for (i = 0; i < arr.length; i++) {}
```

To help us implement a better `for loop` we can setup our variables outside of our `for loop` function so we can already have access to our array length instead iterating every-time and accessing through the loop. For example, we can assign our `i` and `arr.length` outside our loop and pass it in to make the loop run faster. 

```
var i;
var l = arr.length;
for (i = 0; i < l; i++) {}
```

Accessing the length outside the loop can sometimes make it easier to read for the developer, but also just like that you have implemented a faster loop iterator.


### Javascript Loading <a name="loading"></a>

A lot of new developers don't really know where to place their script tags in the html file when first starting off. It is highly recommended that you put your `javascript` script file tags at the *bottom* of the html page so the browser is allowed to load up before loading in the functionality. This actually does make a huge difference in loading time for browsers. If the script tag is at the start of the *HTML* file, the browser will first download the script code before even loading anything else from the browser, rendering activity could even be blocked. You can also add your script to the browser after the page has loaded. 

```
<script>
window.onload = function() {
  var element = document.createElement("script");
  element.src = "javaScriptCode.js";
  document.body.appendChild(element);
};
</script>
```


### Decrease DOM Access <a name="domaccess"></a>

Selecting or in other words *Accessing* the HTML DOM is very slow. We want to keep the number of *elements* we are selecting small, this will help with loading, speed, and will benefit smaller devices too. If we ever need to access a DOM element more than once, we can simply store it inside a local variable and access it only once.

```
var elm;
elm = document.getElementById("demo");
elm.innerHTML = "Hello";
```

It might not seem like a lot but honestly these small mistakes can make a big difference when working with complex applications with tons of lines of code.

## Conclusion <a name="conclusion"></a>

I hope by the end of this article you managed to learn how to create and understood what is going on in every line of code. It is very important to understand how your code fully works, not only does it help you become a better developer but can also help you use the tools you are working with more efficient.

These articles are mostly intended for personal use on becoming a better programmer, writer, and grow my programming skills. Feel free to drop any feedback or corrections that you believe that should be made to help me and others. Thank you for your time for sticking this far! 



- [Twitter](https://twitter.com/CleverOscarDev)
- [LinkedIn](https://www.linkedin.com/in/clever-oscar/)
- [Github](https://github.com/CleverOscar)