JS Good Practices

I've been learning JS and I am liking it a lot so far. I am using https://www.learn-js.org/ because I like their format and style, but some conventions on the site are outdated and are not the most efficient practice.

Take the most obvious example - the website's use of var instead of let or const. Another example is the use of string concatenation. Because this is an introductory course, the examples primarily show this technique - Ex. console.log("Hello " + variable). I've been told using template literals is the best technique and I agree - Ex. console.log(`Hello ${variable}`). It's just like f-string formatting in Python which is just plain awesome! The final practice I have been told is to skip the semicolons at the end of statements because JS uses Automatic Semicolon Insertion.

My question is What are good practices and habits in JS as well as practices to avoid? Feel free to list your favorite techniques and pet peeves in the comments - I'm eager to read them!

Credit to

@MrEconomical

and

@AtticusKuhn

for the 3 listed tips!

Answered by eco27 [earned 5 cycles]

Voters

Comments

hot new top

Profile icon

eco27

nice to see that you are learning some javascript!
here are a few more good practices to consider:

use === instead of == - the difference is that == does a type conversion before checking equality so you get stuff like true == [] being true, while === does not do a type conversion but rather checks strict equality
DO NOT USE EVAL - eval is a dangerous function and with unsanitized input it could totally break your application
use lambdas everywhere - arrow functions are a great addition and can make code much more readable and also neater. the only thing to be aware of is that the this context inside the lambda is the same as the this context outside!
have good formatting in general cough cough
@AtticusKuhn
cough cough such as spacing out operators, indenting properly, and so on. you can check out Code Formatting for more tips on code formatting.
always use innerText instead of innerHTML - innerHTML is dangerous as it sets the HTML of an element directly, and any malicious scripts with <script> could be injected. This is known as an XSS so always use innerText to avoid these issues
embrace asynchronicity - async programming is definitely a challenge for beginners especially if they haven't had much experience with async in the past. Don't try to avoid it or do some loopholes to make it sync, rather go with the async nature of javascript and learn how to use it to make your applications even more powerful.

I hope these tips helped, and good luck on your future JavaScript endeavors!

Profile icon

Roar123

@MrEconomical

Thanks for the very comprehensive list! I'm still confused about what you mean by asynchronicity. Statements are executed in the program at different times rather than at the same time?

Profile icon

eco27

@Roar123

take this example:


setTimeout(() => {
    console.log("1 second wait")
}, 1000)
console.log("hello")

Profile icon

Roar123

@MrEconomical

Ok. I don't know arrow functions yet but I'll look into them.

Profile icon

[deleted]

Two that I can think of off hand.

Use descriptive variable and function names
Split the logic of your program into functions. Ideally each one will do just one thing

A little light reading:

Google style guide: https://google.github.io/styleguide/jsguide.html
Airbnb style guide: https://github.com/airbnb/javascript

Profile icon

Roar123

@malvoliothegood

Thanks for the response! Is the preferred variable naming convention camelCase or snake_case? I know Python is snake_case but I've seen a lot of camelCase for JS.

Profile icon

[deleted]

@Roar123

Camel case has been the norm for years.