JavaScript Statement Syntax

This article discusses JavaScript syntax. The syntax for a programming language defines "rules" or "guidelines" for creating error-free programs. For example, we've seen that reserved keywords define rules with variables and functions.

After reading this article, consider these questions:

  • What is expanded syntax?
  • What rules govern the use of multiple words for identifiers?
  • What syntax defines the use of camel case in JavaScript?
  • How are comments written in JavaScript?

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.


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/await, let/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!


Source: Mozilla, https://developer.mozilla.org/en-US/docs/MDN/Guidelines/Code_guidelines/JavaScript#general_javascript_guidelines
Creative Commons License This work is licensed under a Creative Commons Attribution-ShareAlike 2.5 License.