32 JavaScript Best Practices for Beginners

As a follow-up to "30 HTML and CSS Best Practices", this week, we'll review JavaScript!

• 
  HTML & CSS
  30 HTML Best Practices for Beginners
  Jeffrey Way

1. Use === Instead of ==

JavaScript uses two different kinds of equality operators: === and !== are the strict equality operators, while ==  and != are the non-strict operators. It is considered best practice to always use strict equality when comparing.

"If two operands are of the same type and value, then === produces true and !== produces false." - JavaScript: The Good Parts

However, when working with == and !=, you'll run into issues when working with different types. When the values you're comparing have different types, the non-strict operators will try to coerce their values, and you may get unexpected results.

2. eval() Is Bad

For those unfamiliar, the eval() function gives us access to JavaScript's compiler. Essentially, we can execute a string's result by passing it as a parameter of eval().

Not only will this decrease your script's performance substantially, but it also poses a huge security risk because it grants far too much power to the passed-in text. Avoid it!

3. Don't Use Shorthand

Technically, you can get away with omitting most curly braces and semi-colons. Most browsers will correctly interpret the following:

if (someVariableExists)
   x = false

However, consider this:

if (someVariableExists)
   x = false
   anotherFunctionCall();

You might think that the code above would be equivalent to:

if (someVariableExists) {
   x = false;
   anotherFunctionCall();
}

Unfortunately, you'd be wrong. In reality, it means:

if (someVariableExists) {
   x = false;
}
anotherFunctionCall();

As you'll notice, the indentation mimics the functionality of the curly brace. Needless to say, this is a terrible practice that should be avoided at all costs. The only time that curly braces should be omitted is with one-liners, and even this is a highly debated topic.

if(2 + 2 === 4) return 'nicely done';

Always Consider the Future

What if, at a later date, you need to add more commands to this if statement? In order to do so, you would need to rewrite this block of code. Bottom line—tread with caution when omitting.

4. Use JSLint

JSLint is a debugger written by Douglas Crockford. Simply paste in your script, and it'll quickly scan for any noticeable issues and errors in your code.

"JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems." - JSLint Documentation

Before signing off on a script, run it through JSLint just to be sure that you haven't made any mindless mistakes.

5. Place Scripts at the Bottom of Your Page

This tip has already been recommended in the previous article in this series. As it's highly appropriate, though, I'll paste in the information.

Remember—the primary goal is to make the page load as quickly as possible for the user. When loading a script, the browser can't continue until the entire file has been loaded. Thus, the user will have to wait longer before noticing any progress.

If you have JS files whose only purpose is to add functionality—for example, after a button is clicked—go ahead and place those files at the bottom, just before the closing body tag. This is absolutely a best practice.

Better

<p>And now you know my favorite kinds of corn. </p>
<script type="text/javascript" src="path/to/file.js"></script>
<script type="text/javascript" src="path/to/anotherFile.js"></script>
</body>
</html>

6. Declare Variables Outside of the For Statement

When executing lengthy for statements, don't make the engine work any harder than it must. For example:

Bad

for(let i = 0; i < someArray.length; i++) {
   let container = document.getElementById('container');
   container.innerHtml += 'my number: ' + i;
   console.log(i);
}

Notice how we must determine the length of the array for each iteration, and how we traverse the DOM to find the "container" element each time—highly inefficient!

Better

let container = document.getElementById('container');
for(let i = 0, len = someArray.length; i < len;  i++) {
   container.innerHtml += 'my number: ' + i;
   console.log(i);
}

7. The Fastest Way to Build a String

Don't always reach for your handy-dandy for statement when you need to loop through an array or object. Be creative and find the quickest solution for the job at hand.

let arr = ['item 1', 'item 2', 'item 3', ...];
let list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

I won’t bore you with benchmarks; you’ll just have to believe me (or test for yourself). This is by far the fastest method!

Using native methods like join(), regardless of what’s going on behind the abstraction layer, is usually much faster than any non-native alternative. — James Padolsey, james.padolsey.com

8. Use Template Literals

Strings that we create with double or single quotes have a lot of limitations. You might want to replace some of your strings with template literals to make working with them a lot easier. Template literals are created using the backtick character (`), and they offer many advantages. You can put expressions inside them or create multi-line strings.

let person = 'Monty';
let fruits = 'apples';
let activity = 'playing games';
let day = 'Monday';

let sentence1 = person + ' will be eating ' + fruits + ' and ' + activity + ' on ' + day + '.';
console.log(sentence1);
// Output: Monty will be eating apples and playing games on Monday.

let sentence2 = `${person} will be eating ${fruits} and ${activity} on ${day}.`;
console.log(sentence2);
// Output: Monty will be eating apples and playing games on Monday.

As you can see, we did not have to constantly move in and out of our template literal, as we had to with a regular string literal created with single or double quotes. This reduces the chances of any typing-related errors and helps us write cleaner code.

9. Reduce Globals

"By reducing your global footprint to a single name, you significantly reduce the chance of bad interactions with other applications, widgets, or libraries." — Douglas Crockford

let name = 'Jeffrey';
let lastName = 'Way';

function doSomething() {...}

console.log(name); // Jeffrey -- or window.name

Better

let DudeNameSpace = {
   name : 'Jeffrey',
   lastName : 'Way',
   doSomething : function() {...}
}
console.log(DudeNameSpace.name); // Jeffrey

Notice how we've "reduced our footprint" to just the ridiculously named DudeNameSpace object.

10. Consider Using let and const 

The let keyword allows us to create local variables that are scoped within their own block. The const keyword allows us to create local block-scoped variables whose value cannot be reassigned. You should consider using the keywords let and const in appropriate situations when declaring your variables. Keep in mind that the keyword const only prevents reassignment. It does not make the variable immutable.

var person_name = "Adam";
let name_length = person_name.length;
const fav_website = "code.tutsplus.com";

if(person_name.length < 5) {
    var person_name = "Andrew";
    let name_length = person_name.length;
    
    // Throws an error if not commented out!
    // fav_website = "webdesign.tutsplus.com";

    console.log(`${person_name} has ${name_length} characters.`);
    // Output: Andrew has 6 characters.
}

console.log(`${person_name} has ${name_length} characters.`);
// Output: Andrew has 4 characters.

In the above example, the value of the person_name variable was updated outside the if block as well, after we modified it inside the block. On the other hand, name_length was block-scoped, so it retained its original value outside the block.

11. Comment Your Code

It might seem unnecessary at first, but trust me, you want to comment your code as well as possible. What happens when you return to the project months later, only to find that you can't easily remember what your line of thinking was? Or what if one of your colleagues needs to revise your code? Always, always comment important sections of your code.

// Cycle through array and echo out each name. 
for(var i = 0, len = array.length; i < len; i++) {
   console.log(array[i]);
}

12. Embrace Progressive Enhancement

Always compensate for when JavaScript is disabled. It might be tempting to think, "The majority of my viewers have JavaScript enabled, so I won't worry about it." However, this would be a huge mistake.

Have you taken a moment to view your beautiful slider with JavaScript turned off? (Download the Web Developer Toolbar for an easy way to do so.) It might break your site completely. As a rule of thumb, design your site assuming that JavaScript will be disabled. Then, once you've done so, begin to progressively enhance your layout!

13. Don't Pass a String to setInterval or setTimeOut

Consider the following code:

setInterval(
"document.getElementById('container').innerHTML += 'My new number: ' + i", 3000
);

Not only is this code inefficient, but it also functions in the same way as the eval function would. Never pass a string to setInterval and setTimeOut. Instead, pass a function name.

setInterval(someFunction, 3000); 

14. Use {} Instead of new Object()

There are multiple ways to create objects in JavaScript. Perhaps the more traditional method is to use the new constructor, like so:

var o = new Object();
o.name = 'Jeffrey';
o.lastName = 'Way';
o.someFunction = function() {
   console.log(this.name);
}

However, this method receives the "bad practice" stamp. It's not actually harmful, but it is a bit verbose and unusual. Instead, I recommend that you use the object literal method.

Better

var o = {
   name: 'Jeffrey',
   lastName = 'Way',
   someFunction : function() {
      console.log(this.name);
   }
};

Note that if you simply want to create an empty object, {} will do the trick.

var o = {};

"Object literals enable us to write code that supports lots of features yet still provide a relatively straightforward process for the implementers of our code. No need to invoke constructors directly or maintain the correct order of arguments passed to functions." — dyn-web.com

15. Use [] Instead of new Array()

The same applies for creating a new array.

Okay

var a = new Array();
a[0] = "Joe";
a[1] = 'Plumber';

Better

var a = ['Joe','Plumber'];

"A common error in JavaScript programs is to use an object when an array is required or an array when an object is required. The rule is simple: when the property names are small sequential integers, you should use an array. Otherwise, use an object." — Douglas Crockford

16. Use the Spread Operator

Have you ever been in a situation where you wanted to pass all the items of an array as individual elements to some other function or you wanted to insert all the values from one array into another? The spread operator (...) allows us to do exactly that. Here is an example:

let people = ["adam", "monty", "andrew"]
let more_people = ["james", "jack", ...people, "sajal"]

console.log(more_people)
// Output: Array(6) [ "james", "jack", "adam", "monty", "andrew", "sajal" ]

17. Be Careful With for ... in Statements

When looping through items in an object, you might find that you retrieve method functions or other inherited properties as well. In order to work around this, always wrap your code in an if statement which filters with hasOwnProperty.

for (key in object) {
   if (object.hasOwnProperty(key) {
      ...then do something...
   }
}

This tip is from JavaScript: The Good Parts, by Douglas Crockford.

18. Read, Read, Read...

While I'm a huge fan of web development blogs (like this one!), there really isn't a substitute for a book when grabbing some lunch, or just before you go to bed. Always keep a web development book on your bedside table. Here are some of my JavaScript favorites.

• Object-Oriented JavaScript
• JavaScript: The Good Parts
• Learning JavaScript

Read them... multiple times. I still do!

19. Self-Executing Functions

Rather than calling a function, it's quite simple to make a function run automatically when a page loads or a parent function is called. Simply wrap your function in parentheses, and then append an additional set, which essentially calls the function.

(function doSomething() {
   return {
      name: 'jeff',
      lastName: 'way'
   };
})();

20. Raw JavaScript Is Always Quicker Than Using a Library

JavaScript libraries, such as jQuery and lodash, can save you an enormous amount of time when coding—especially with AJAX operations. Having said that, always keep in mind that a library can never be as fast as raw JavaScript (assuming you code correctly).

jQuery's each() method is great for looping, but using a native for statement will always be an ounce quicker.

21. Quickly Assign Variable Values With Destructuring

We've already learned about the spread operator in JavaScript earlier in the article. Destructuring is somewhat similar in the sense that it also unpacks values stored inside arrays. The difference is that we can assign these unpacked values to unique variables.

The syntax is similar to creating an array using the [] shorthand. However, this time the brackets go on the left side of the assignment operator. Here is an example:

let [person, fruit, , day] = ['Monty', 'apple', 'reading', 'tomorrow'];

var sentence = `${person} will eat an ${fruit} ${day}.`;

console.log(sentence);
// Output: Monty will eat an apple tomorrow.

Did you notice how we just skipped the assignment of the third array element to any variable by not passing a variable name? This allows us to avoid variable assignments for values we don't need.

22. Iterators and for ... of Loops

Iterators in JavaScript are objects which implement the next() method to return an object that stores the next value in a sequence and true or false depending on whether or not there are any more values left. This means that you can create your own iterator objects if you implement the iterator protocol.

JavaScript also has some built-in iterators like String, Array, Map, etc. You can iterate over them using for ... of loops. This is more concise and less error-prone compared to regular for loops.

let people = ["Andrew", "Adam", "James", "Jack"];
let people_count = people.length;

for(let i = 0; i < people_count; i++) {
    console.log(people[i]);
}
/*
Andrew
Adam
James
Jack
*/

for(person of people) {
    console.log(person);
}
/*
Andrew
Adam
James
Jack
*/

With a for...of loop, we don't have to keep track of the total length of the array or the current index. This can reduce code complexity when creating nested loops.

23. async and await

You can use the async keyword to create asynchronous functions, which always return a promise either explicitly or implicitly. Asynchronous functions that you create can take advantage of the await keyword by stopping execution until the resolution of returned promises. The code outside your async function will keep executing normally.

async function delayed_hello() {

    console.log("Hello Adam!");

    let promise = new Promise((resolve) => {
        setTimeout(() => resolve("Hello Andrew!"), 2000)
    });

    let result = await promise;

    console.log(result);
}

console.log("Hello Monty!");

delayed_hello();

console.log("Hello Sajal!");

/*
Hello Monty!
Hello Adam!
Hello Sajal!
Hello Andrew!
*/

In the above example, "Hello Andrew" is logged after two seconds, while all other hellos are logged immediately. The call to the delayed_hello() function logs "Hello Adam" immediately but waits for the promise to resolve in order to log "Hello Andrew".

24. Use Arrow Functions

Another essential feature added to JavaScript recently is arrow functions. They come with a slew of benefits. To begin with, they make the functional elements of JavaScript more appealing to the eye and easier to write.

Take a look at how we would implement a filter without arrow functions:

const nums = [1,2,3,4,5,6,7,8];

const even_nums = nums.filter( function (num) { return num%2 == 0; } )

Here the callback function we pass to the filter returns true for any even number.

Arrow functions make this much more readable and concise though: 

const nums = [1,2,3,4,5,6,7,8];

const even_nums = nums.filter(num => num%2 == 0)

Another notable benefit of arrow functions is that they do not define a scope, instead being within the parent scope. This prevents many of the issues that can occur when using this keyword. There are no bindings for this in the arrow functions. this has the same value inside the arrow function as it does in the parent scope. However, this means arrow functions can't be used as constructors or methods.

25. Use the Javascript includes() Method

The includes() method in JavaScript determines whether or not a string contains the specified characters, or whether an array contains the specified element. If the string or element is found, this function returns true; otherwise, it returns false.

const str = 'This String contains the word accept';
console.log(str.includes('accept'));

//output:true

It's worth noting that the includes() method on Strings is case sensitive. If you want to match a string no matter the case, just make the target string lowercase first.

const str = 'This String contains the word accept';
console.log(str.toLowerCase().includes('string'));

//output: true

26. Run Promises in Parallel

It is preferable to run your asynchronous tasks in parallel as it can make your app much faster and more responsive. If your tasks don't rely on the results from one another, simply wrap them in Promise.all and run them in parallel.

It is really great to combine async / await and Promise.all, but you must be careful to think through what parts happen sequentially and what parts happen in parallel. Here's an example of fetching the text from an array of URLs concurrently with Promise.all and await.

const urls = ["https://en.wikipedia.org/wiki/Canada", "https://en.wikipedia.org/wiki/Nigeria", "https://en.wikipedia.org/wiki/Vietnam"]

const countryInfo = await Promise.all(urls.map( async url =>
  const resp = await fetch(url);
  return resp.text();
}));

This will map the URLs in the array to an array of async functions. Each async function will fetch the text from the URL and return it. Since this is an async function, it is actually a Promise. Promise.all will wait on those promises and return the array of text that they loaded when they are all complete.

27. Use Regex When Extracting or Working With Strings

Regex (regular expressions) is a really powerful and even fun tool. If you find yourself doing complicated searches and manipulations on strings using methods like indexOf() and substring(), you should reach for regex instead.

Regular expressions enable you to search for complex patterns, and replace or extract text matching those patterns.

A classic use of regex is to validate input. For example, the following regex can be used to validate a US 5 digit zip code:

const zipRegex = /\d{5}/

console.log(zipRegex.test("12345"))
//output: true

console.log(zipRegex.text("B3K 1R2"))
//output: false

28. Put JavaScript in a Separate File

JavaScript can be written in a <script> tag in your HTML, or it can be kept in its own file and linked within your HTML. This helps keep different sorts of code isolated from one another this manner, and makes your code more understandable and well-organized.

Keeping your JavaScript in separate files outside of the HTML facilitates the reuse of code across multiple HTML files. It provides for easier code reading, and it saves loading time since web browsers can cache external JavaScript files.

29. Use Splice to Remove Items from An Array

I've seen developers use the delete method to remove an item from an array. This i incorrect, because the delete function substitutes the object with undefined rather than removing it. In JavaScript, the best approach to remove an element from an array based on its value is to use the indexOf() function to discover the index number of that value in the array, and then use the splice() function to delete that index value.

var items = ["apple","orange","berries","strawberry"];
items.splice(2,1);

console.log(items);
//output: ['apple', 'orange', 'strawberry']

30. Learn Unit Testing

When I first started adding unit tests as a developer, I frequently discovered bugs. Tests are the most effective way to ensure that your code is error-free. Jest is a great place to start, but there are other options that are just as easy to use. Before any code is deployed, it should be subjected to unit testing to ensure that it fulfills quality standards. This promotes a dependable engineering environment that prioritizes quality. Unit testing saves time and money during the product development life cycle, and it helps developers design better, more efficient code.

That's All, Folks

So there you have it: 23 essential tips for beginning JavaScripters. Thanks for reading. 

And be sure to check out the thousands of JavaScript items available on Envato Market. There's sure to be something there to help you with your JavaScript development.

• 
  HTML5
  10 Best HTML5 Audio Players
  Daniel Strongin
• 
  HTML5
  17 Best HTML5 Game Templates of 2022 With Source Code
  Franc Lucas
• 
  HTML5
  19 Best HTML5 and JavaScript Game Engines and Templates
  Franc Lucas
• 
  jQuery
  24 Best jQuery Image Sliders
  Daniel Strongin

This post has been updated with contributions from Monty Shokeen and Ezekiel Lawson. Monty is a full-stack developer who also loves to write tutorials, and to learn about new JavaScript libraries. Ezekiel is a front-end developer who focuses on writing clean, maintainable code with web technologies like JavaScript, Vue.js, HTML, and CSS.