JavaScript Best Practices

We've covered several introductory concepts for JavaScript programming in this course and how to debug your code. We'll review some coding guidelines and best practices you'll use as a JavaScript developer to ensure consistency, readability, security, and accessibility. Read this article to learn about some of the best practices for developing programs.

General JavaScript guidelines


Use expanded syntax

For JavaScript we use expanded syntax, with each line of JS on a new line, the opening brace of a block on the same line as its associated statement, and the closing brace on a new line. This maximizes readability, and again, promotes consistency on MDN.

Do this

function myFunc() {
  console.log('Hello!');
};

Not this

function myFunc() { console.log('Hello!'); };

We also have a few specific rules around spacing inside language features. You should include spaces between operators and operands, parameters, etc.

This is more readable

if(dayOfWeek === 7 && weather === 'sunny') {
  goOnTrip('beach', 'car', ['ice cream', 'bucket and spade', 'beach towel']);
}

than this

if(dayOfWeek===7&&weather==='sunny'){
  goOnTrip('beach','car',['ice cream','bucket and spade','beach towel']);
}

In addition, keep these specifics in mind:

  • Don't include padding spaces after opening brackets or before closing brackets — (myVar), not ( myVar ).
  • All statements must end with semicolons (";"). We require them in all of our code samples even though they're technically optional in JavaScript because we feel that it leads to code that is clearer and more precise about where each statement ends.
  • Use single quotes in JavaScript, wherever single quotes are needed in syntax.
  • There should be no space between a control statement keyword, function, or loop keyword and its opening parenthesis (e.g. if() { ... }function myFunc() { ... }, for(...) { ... }).
  • There should be a space between the parentheses and the opening curly brace in such cases as described in the previous bullet.

JavaScript comments

Use JS-style comments to comment code that isn't self-documenting:

// This is a JavaScript-style comment

Put your comments on separate lines preceding the code they are referring to:

function myFunc() {
  // Output the string 'Hello' to the browser's JS console
  console.log('Hello');
  // Create a new paragraph, fill it with content, and append it to the <body>
  let para = document.createElement('p');
  para.textContent = 'My new paragraph';
  document.body.appendChild(para);
}

Also note that you should leave a space between the slashes and the comment, in each case.


Use modern JS features

For general usage, you can use modern well-supported JS features (such as arrow functions, promises, async/awaitlet/const, template literals, and spread syntax) in MDN examples. We include them in many places in these guidelines, as we believe the web industry has generally gotten to the point where such features are familiar enough to be understandable. And for those that don't use them yet, we'd like to play our part in helping people to evolve their skills.

Note: By "general usage", we mean general example writing. Reference pages covering specific JS features obviously need to use the features they are documenting!