느린 자바스크립트 코드 피하기

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.

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.

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.

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>

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.

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!