05-javascript.md

Javascript

Summary

1. Global
2. Identation
3. Commits
4. English
5. Task number
6. Status
7. Message convention
8. HTML
9. Syntax
10. Comments
11. Character Encoding
12. Attribute Order
13. Performance
14. Base Code
15. CSS
16. Syntax
17. Comments
18. Declaration Order
19. Name
20. Performance
21. Media Queries
22. Javascript
23. Syntax
24. Comments
25. Variables
26. Performance

Syntax

Always use a semicolon.

// Good
const $items = document.querySelectorAll('.items');

// Bad
const $items = document.querySelectorAll('.items')

Use single quotes.

// Good
let string = 'Default';
const target = $element.getAttribute('data-target');

// Bad
let string = "Default";
const target = $element.getAttribute("data-target");

Keep else on the same line lock if.

// Good
if ( true ) {
  ...
} else {
  ...
}

// Bad
if ( true ) {
  ...
}
else {
  ...
}

Use space between operators.

// Good
for (i = 0; i < 10; i++) {
  ...
}

// Bad
for (i=0;i<10;i++) {
  ...
}

Use space outside the (), but not inside.

// Good
if (condition) {
  statement
}

// Bad
if( condition ){
  statement
}

Always use {} for conditional blocks.

// Good
if (condition) {
  statement
} else if (condition) {
  statement
} else {
  statement
}

// Bad
if (condition) statement;
else if (condition) statement;
else statement;

To check equality, always use ===.

// Good
if (foo === 'foo') {
  statement
}

// Bad
if (foo == 'foo') {
  statement
}

⬆ back to the top

Comments

Use // for single line comment.

// Good
// Description

// Bad
/**
 * Description
 */

Use the comment from one line above the related code.

// Good
// set the default status to true
const status = this._status || true;

// Bad
const status = this._status || true; // set the default status to true

Use /** ... */ para blocos de comentários

// Good
/**
 * Description
 * @param {String} Description of the param
 */

// Bad
//
// Description
//

You may have comments to share prefix.

• FIXME - a problem that needs to be reviewed
• TODO - suggestion for a solution to the problem that needs to be implemented

// FIXME: shouldn't use a global here
total = 0;

// TODO: total should be configurable by an options param
this.total = 0;

A syntax tip to write the reviews is the JSDuck.

/**
 * @class Class name
 * @param {String} Description of the param
 * @extends name of the 
 * Documentation for the class
 */

 /**
 * @event click
 * Documentation for the event
 * @param {String} Description of the param
 */

/**
 * @method Method name
 * Documentation for the method
 * @param {String} Description of the param
 * @return {String} Description of the return
 */

/**
 * @property {Boolean} [property=false]
 * Description
 */

/**
 * @class Class name
 * Documentation for the class
 *
 * @constructor
 * Documentation for the constructor
 * @param {String} Description of the param
 */

⬆ back to the top

Variables

Always use let or const to declare variables. But will result in global variables.

// Good
const gallery = new Gallery();

// Bad
gallery = new Gallery();

Use the statement let or const by variable.

// Good
const items = getItems();
const name = 'name';
const status = 'open';

// Bad
const items = getItems(),
    name = 'name',
    status = 'open';

Group its const and then the lets.

// Good
const status = true;
const items = getItems();
let name;
let i;
let length;

// Bad
let i, len, status,
    items = getItems(),
    status = true;

// Bad
let i;
const items = getItems();
let status;
const status = true;
let len;

Create the variables which need them.

// Good
function checkName(hasName) {
  if (hasName === 'test') {
    return false;
  }

  const name = getName();

  if (name === 'test') {
    this.setName('');
    return false;
  }

  return name;
}

// Bad - unnecessary function call
function checkName(hasName) {
  const name = getName();

  if (hasName === 'test') {
    return false;
  }

  if (name === 'test') {
    this.setName('');
    return false;
  }

  return name;
}

Do not chain variable assignments. By chaining variable assignments, it creates implicit global variables.

// Good
(function example() {
  let a = 1;
  let b = a;
  let c = a;
}());

console.log(a); // undefined
console.log(b); // undefined
console.log(c); // undefined

// the same applies for `const`

// Bad
(function example() {
  // JavaScript interprets this as
  // let a = ( b = ( c = 1 ) );
  // The let keyword only applies to variable a; variables b and c become
  // global variables.
  let a = b = c = 1;
}());

console.log(a); // undefined
console.log(b); // 1
console.log(c); // 1

Evitar o uso de incrementos e decrementos unários (++, --).

// Good
let array = [1, 2, 3];
let num = 1;
let increment = num += 1;
let decrement = num -= 1;

array.forEach((value) => {
  value += 1;
});

// Bad
let array = [1, 2, 3];
let num = 1;
let increment = num ++;
let decrement = -- num;

for(let i = 0; i < array.length; i++){
  let value = array[i];
  ++value;
}

⬆ back to the top

Performance

⬆ back to the top