Google and Airbnb are currently the most popular JavaScript styles, so if you’ve been writing in JavaScript for a long time, I suggest you compare them.

Here are my 13 most interesting rules from the Google Code Style Guide, to share with you:

Use Spaces instead of tabs

In addition to line terminators, whitespace is the only character that represents whitespace in system files, which means that TAB cannot be used as an indent.

This guide specifies two Spaces instead of four for indentation.

// bad
function foo() {,,,,let name;
}

// bad
function bar() {,let name;
}

// good
function baz() {,,let name;
}
Copy the code

The essential semicolon

Each statement must end with a semicolon; do not rely on the compiler to insert semicolons automatically.

Although I can’t understand why anyone would object to a semicolon, like the “TAB and space” argument. Google is on the side of the semicolon anyway.

// bad
let luke = {}
let leia = {}
[luke, leia].forEach(jedi= > jedi.father = 'vader')

// good
let luke = {};
let leia = {};
[luke, leia].forEach((jedi) = > {
  jedi.father = 'vader';
});
Copy the code

Don’t use ES6 modularity for now

Do not use ES6 modularity (such as import and export keywords) because the syntax for ES6 modularity has not been finalized.

// Don't do this kind of thing yet:

//------ lib.js ------
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';
Copy the code

Up-down alignment of code is discouraged

Try not to align your code up and down; it’s expensive to maintain.

// bad
{
  tiny:   42.longer: 435};// good
{
  tiny: 42.longer: 435};Copy the code

Do not use the var

Declare local variables using const or let. By default, const is used unless the variable needs to be reassigned.

// bad
var example = 42;

// good
let example = 42;
Copy the code

Arrow functions are a perfect substitute for function

Not only is the arrow function syntax concise and readable, but it fixes the this problem, especially in nested functions.

// bad
[1.2.3].map(function (x) {
  const y = x + 1;
  return x * y;
});

// good
[1.2.3].map((x) = > {
  const y = x + 1;
  return x * y;
});
Copy the code

Replace string concatenation with template strings

Use template strings (split) to handle complex strings, especially multi-line strings.

// bad
function sayHi(name) {
  return 'How are you, ' + name + '? ';
}

// bad
function sayHi(name) {
  return ['How are you, ', name, '? '].join();
}

// bad
function sayHi(name) {
  return `How are you, ${ name }? `;
}

// good
function sayHi(name) {
  return `How are you, ${name}? `;
}
Copy the code

Do not wrap long strings with backslashes

While this is allowed in ES5, it can lead to weird errors and can be misleading to anyone reading the code

Interestingly, Google and Airbnb have very different rules (here’s Airbnb’s rules).

// bad (bad on mobile)
const longString = 'This is a very long string that \ far exceeds the 80 column limit. It unfortunately \ contains long stretches of spaces  due to how the \ continued lines are indented.';

// Bad (Airbnb recommends this and doesn't do anything with long strings.)
const longString = 'This is a very long string that far exceeds the 80 column limit. It does not contain long stretches of spaces since the  concatenated strings are cleaner.';

// good
const longString = 'This is a very long string that ' + 
    'far exceeds the 80 column limit. It does not contain ' + 
    'long stretches of spaces since the concatenated ' +
    'strings are cleaner.';
Copy the code

For loop preferred “for… Of”

In ES6, there are a number of for loops supported. You may have used them all, but if possible, choose for… Of it.

Don’t use eval()

Do not use eval() (except for code loaders), which introduces potential uncertainty because it does not work in a CSP environment.

It is also explicitly mentioned in MDN that eval() is not used.

// bad
let obj = { a: 20.b: 30 };
let propName = getPropName();  // returns "a" or "b"
eval( 'var result = obj.' + propName );

// good
let obj = { a: 20.b: 30 };
let propName = getPropName();  // returns "a" or "b"
let result = obj[ propName ];  // obj[ "a" ] is the same as obj.a
Copy the code

Constants are underlined in capital letters

Constants are capitalized and underlined, all words are capitalized and underlined.

If your code follows this rule, it will greatly increase your code’s readability, but be aware that constants should be written as humps if they are functions.

// bad
const number = 5;

// good
const NUMBER = 5;
Copy the code

Declare one variable at a time

Declare one variable at a time. Do not write let a = 1, b = 2;

// bad
let a = 1, b = 2, c = 3;

// good
let a = 1;
let b = 2;
let c = 3;
Copy the code

Use single quotes, not double quotes

Ordinary strings are delimited by single quotes (‘). If the string contains single quotes, consider using template strings.

// bad
let directive = "No identification of self or mission."

// bad
let saying = 'Say it ain\u0027t so.';

// good
let directive = 'No identification of self or mission.';

// good
let saying = `Say it ain't so`;
Copy the code

Thanks for reading!

Translated from Daniel Simmons – “13 Noteworthy Points from Google’s JavaScript Style Guide”