What to do and not do in JavaScript

We’re gonna go through some of the best practices you can do in JavaScript that’ll save you a headache when coding and definitely be helpful to anyone that reads your code. Speaking of which, first piece of advice would be to leave in some comments (not too much of course). We want to leave messages to anyone that reads the code, including yourself.

To start off no global variables. No new. No == (=== instead). We don’t want global variables because it can simply be overwritten and with local variables, they are used in the context needed.

const and let

Try to use only const and let when declaring local variables rather than var, simply because var works a bit oddly whereas with const and let, their functions work just like you’d expect with const not being able to be reassigned and let able to.

Speaking of declarations, put those at the top of the file or function so that it’s easier to see and when it’s called, it’ll be easier to check back on also avoiding redeclaring it.

x = ?

And when you declare these variables, try to initialize them just so that it’s clearer what their purpose is and so you can avoid undefined values.(Also, try to not declare simple things such as strings or numbers. It makes the code harder to work with and slower to execute.)

Continuing with declarations try to just avoid new blank(), because you can simply just write what it is which is clearer and easier to read. For example,

let x = []

let x = new Array()

It’s just easier on the eyes and functions the same.

== vs ===

Moving on from declarations, there are two options when comparing == and ===. We want to always use === simply because == will convert the types of the two values being compared so that they match so with ==

0 == “” would be true

whereas with === it wouldn’t be the case because it is comparing both the type and value. A common mistake is using = as well instead and not realizing because it would simply rewrite the value, making it appear as if it’s working rather than checking to see if they are equal so be careful!

{ }

The curly brackets will make or break it half the time. You always always always want to make sure you have a closing bracket and it be in the right place. If you’re using Visual Studio Code, installing Bracket Pair Colorizer will help so much visually.

On top of this, be explicit with your coding! Don’t try to short hand and avoid using the curly brackets because it can funk up your code.

if(something)

x = true

function()

Here the coder isn’t using curly brackets and is assuming that if something then x will be true and the function will run. Well JavaScript reads it like this

if something {

x = true

}

function()

And so that code isn’t being run as to how one would think it should be, which could have been completely avoided if curly brackets were explicitly used so make sure to always always use them!

Script Placement

In your html, we call on the JavaScript using the script tag, and you have two options here. You can a defer inside which will not run the script until the page has been loaded or you can simply have the script tag on the bottom doing the same thing. Either works, but make sure to do one, otherwise you might run into a lot of issues.

Function per Task

This is advice that can be applicable to a lot of languages, but it’s something I found myself not doing way too often in JavaScript. We don’t want one function that just does everything. It’s better and cleaner to separate functions to do one task. With this model we can call on these smaller functions and re use them as they become re applicable.

Now before you give up thinking it’s too much to take in, don’t worry! It’s fine to make mistakes so long as you learn from them and become a better coder from it! You can only get better and so with these newly enforced practices, go out there and have fun!