Airbnb JavaScript Style Guide() {

Índice

Tipos

Objetos

 // ruim
 var superHomem = {
 'class' : 'super heroi',
 'default': { clark: kent },
 'private': true 
 };
 ```

 **[[⬆]](#TOC)**

## <a name='arrays'>Arrays</a>

- Use a sintaxe literal para a criação de Arrays.

 ```javascript
 // ruim
 var items = new Array();
 // bom
 var items = [];
 ```

- Por [questões de performance](http://jsperf.com/array-direct-assignment-vs-push/5) prefira declaração direta de novo valor em vez de utilizar Array#push

 ```javascript
 var tamanhoArray = items.length,
 itemsCopia = [],
 i;
 // ruim
 for (i = 0; i < tamanhoArray; i++) {
 itemsCopia.push(items[i])
 }
 // bom
 for (i = 0; i < tamanhoArray; i++) {
 itemsCopia[i] = items[i];
 }
 ```

 **[[⬆]](#TOC)**


## <a name='strings'>Strings</a>

- Utilize aspas simples `''` para strings

 ```javascript
 // ruim
 var nome = "João Silva";
 // bom
 var nome = 'João Silva';
 // ruim
 var nomeCompleto = "João" + this.sobrenome;
 // bom
 var nomeCompleto = 'João' + this.sobrenome;
 ```

- Strings maiores que 80 caracteres devem ser escritas em múltiplas linhas, usando concatenação.

 ```javascript
 // ruim
 var mensagemErro = 'Esta é uma mensagem de erro muito longa. Ela tem mais de 80 caracteres e é dificíl de ler, aumentando a chance de ter algum erro nela. Seria melhor divir ela em mais linhas.';
 // escapar quebras de linha também é ruim
 // porque dificulta encontrar erros e prejudica a compressão do código
 var mensagemErro = 'Esta é uma mensagem de erro muito longa.\
 Ela tem mais de 80 caracteres e é dificíl de ler, aumentando \
 a chance de ter algum erro nela. \
 Seria melhor divir ela em mais linhas.';
 // bom
 var mensagemErro = 'Esta é uma mensagem de erro muito longa.' +
 'Ela tem mais de 80 caracteres e é dificíl de ler, ' +
 'aumentando a chance de ter algum erro nela. ' +
 'Seria melhor divir ela em mais linhas.';
 ```

- Quando estiver construindo uma string, prefira Array#join em vez de concatenar strings. Principalmente por causa do IE: [jsPerf](http://jsperf.com/string-vs-array-concat/2).

 ```javascript
 var items,
 messagens,
 tamanho, i;
 messagens = [{
 estado : 'successo',
 texto : 'Este funcionou.'
 },{
 estado : 'successo',
 texto : 'Este também funcionou'
 },{
 estado : 'erro',
 texto : 'Mas este não funcionou.'
 }];
 tamanho = messagens.length;
 // ruim
 function inbox(messagens) {
 items = '<ul>';
 for (i = 0; i < length; i++) {
 items += '<li>' + messagens[i].texto + '</li>';
 }
 return items + '</ul>';
 }
 // bom
 function inbox(messagens) {
 items = [];
 for (i = 0; i < length; i++) {
 items[i] = '<li>' + messagens[i].texto + '</li>';
 }
 return '<ul>' + items.join('') + '</ul>';
 }
 ```

 **[[⬆]](#TOC)**


## <a name='funcoes'>Funções</a>

- Expressões de funções:

 ```javascript
 // expressão de função anônima
 var anonima = function() {
 return true;
 };
 // expressão de função nomeada
 var funcaoNomeada = function funcaoNomeada() {
 return true;
 };
 // expressão de função auto-executável
 (function() {
 console.log('Welcome to the Internet. Please follow me.');
 })();
 ```

- Nunca declare uma função em bloco que não seja de função. Melhor atribuir a função para uma variavel. Os Navegadores irão permitir, mas a interpretação disso é problemática, podendo gerar erros em algum momento.

 ```javascript
 // ruim
 if (usuarioAtual) {
 function teste() {
 console.log('Nooon.');
 }
 }
 // bom
 if (usuarioAtual) {
 var teste = function teste() {
 console.log('Isso!');
 };
 }
 ```

- Nunca nomeie um parâmetro como ```arguments```. Isso sobrescrevá o objeto ```arguments``` que é passado para cada função.
 ```javascript
 // ruim
 function errado(nome, opcoes, arguments) {
 console.log( nome, opcoes, arguments )
 }
 // bom
 function certo(nome, opcoes, args) {
 console.log( nome, opcoes, args )
 }
 ```

 **[[⬆]](#TOC)**



## <a name='propriedades'>Propriedades</a>

- Use ponto ```.``` para acessar propriedades.

 ```javascript
 var luke = {
 jedi : true,
 idade : 28
 };
 // ruim
 var mestreJedi = luke['jedi'];
 // bom
 var mestreJedi = luke.jedi;
 ```

- Use colchetes ```[]``` para acessar propriedades através de uma variável.

 ```javascript
 var luke = {
 jedi : true,
 idade : 28
 };
 function retornaPropriedade(propriedade) {
 return luke[propriedade];
 }
 var mestreJedi = retornaPropriedade('jedi');
 ```

 **[[⬆]](#TOC)**

## <a name='variaveis'>Variáveis</a>

- Sempre use ```var``` para declarar variáveis. Não fazer isso irá resultar em variáveis globais. Devemos evitar poluir o namespace global.


 ```javascript
 // ruim
 habilidade = new SuperPoder();
 // bom
 var habilidade = new SuperPoder();
 ```

 - Use somente uma declaração ```var``` para múltiplas variáveis e declares cada variável em uma nova linha, mantendo a identação.

 ```javascript
 // ruim
 var items = buscaItems();
 var possuiTime = true;
 var dragonball = 'z';
 // bom
 var items = buscaItems(),
 possuiTime = true,
 dragonball = 'z';
 ```

- Declare as variáveis não inicializadas por último. Será útil depois quando você precisar declarar o valor dependendo do valor de outra já declarada.
 ```javascript
 // ruim
 var i, tamanho, dragonball,
 items = buscaItems(),
 possuiTime = true;
 // ruim
 var i, items = buscaItems(),
 dragonball,
 possuiTime = true,
 tamanho;
 // bom
 var items = buscaItems(),
 possuiTime = true,
 dragonball,
 i, tamanho;
 ```

- Declare as variáveis no topo do escopo onde ela se encontra. Isso ajuda a evitar problemas com declaração de variáveis e [Hoisting](#hoisting).
 ```javascript
 // ruim
 function() {
 teste();
 console.log('fazendo algo..');
 //..mais código..
 var nome = buscaNome();
 if (nome === 'teste') {
 return false;
 }
 return nome;
 }
 // bom
 function() {
 var nome = buscaNome();
 teste();
 console.log('fazendo algo..');
 //..mais código..
 if (nome === 'teste') {
 return false;
 }
 return nome;
 }
 // ruim
 function() {
 var nome = buscaNome();
 if (!arguments.length) {
 return false;
 }
 return true;
 }
 // bom
 function() {
 if (!arguments.length) {
 return false;
 }
 var nome = buscaNome();
 return true;
 }
 ```

 **[[⬆]](#TOC)**


## <a name='hoisting'>Hoisting</a>

- Variable declarations get hoisted to the top of their scope, their assignment does not.

 ```javascript
 // we know this wouldn't work (assuming there
 // is no notDefined global variable)
 function example() {
 console.log(notDefined); // => throws a ReferenceError
 }
 // creating a variable declaration after you
 // reference the variable will work due to
 // variable hoisting. Note: the assignment
 // value of `true` is not hoisted.
 function example() {
 console.log(declaredButNotAssigned); // => undefined
 var declaredButNotAssigned = true;
 }
 // The interpretor is hoisting the variable
 // declaration to the top of the scope.
 // Which means our example could be rewritten as:
 function example() {
 var declaredButNotAssigned;
 console.log(declaredButNotAssigned); // => undefined
 declaredButNotAssigned = true;
 }
 ```

- Anonymous function expression hoist their variable name, but not the function assignment.

 ```javascript
 function example() {
 console.log(anonymous); // => undefined
 anonymous(); // => TypeError anonymous is not a function
 var anonymous = function() {
 console.log('anonymous function expression');
 };
 }
 ```

- Named function expressions hoist the variable name, not the function name or the function body.

 ```javascript
 function example() {
 console.log(named); // => undefined
 named(); // => TypeError named is not a function
 superPower(); // => ReferenceError superPower is not defined
 var named = function superPower() {
 console.log('Flying');
 };
 // the same is true when the function name
 // is the same as the variable name.
 function example() {
 console.log(named); // => undefined
 named(); // => TypeError named is not a function
 var named = function named() {
 console.log('named');
 };
 }
 }
 ```

- Function declarations hoist their name and the function body.

 ```javascript
 function example() {
 superPower(); // => Flying
 function superPower() {
 console.log('Flying');
 }
 }
 ```

- For more information refer to [JavaScript Scoping & Hoisting](http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting) by [Ben Cherry](http://www.adequatelygood.com/)

 **[[⬆]](#TOC)**



## <a name='conditionals'>Conditional Expressions & Equality</a>

- Use `===` and `!==` over `==` and `!=`.
- Conditional expressions are evaluated using coercion with the `ToBoolean` method and always follow these simple rules:

 + **Objects** evaluate to **true**
 + **Undefined** evaluates to **false**
 + **Null** evaluates to **false**
 + **Booleans** evaluate to **the value of the boolean**
 + **Numbers** evalute to **false** if **+0, -0, or NaN**, otherwise **true**
 + **Strings** evaluate to **false** if an empty string `''`, otherwise **true**

 ```javascript
 if ([0]) {
 // true
 // An array is an object, objects evaluate to true
 }
 ```

- Use shortcuts.

 ```javascript
 // ruim
 if (name !== '') {
 // ...stuff...
 }
 // bom
 if (name) {
 // ...stuff...
 }
 // ruim
 if (collection.length > 0) {
 // ...stuff...
 }
 // bom
 if (collection.length) {
 // ...stuff...
 }
 ```

- For more information see [Truth Equality and JavaScript](http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108) by Angus Croll

 **[[⬆]](#TOC)**


## <a name='blocks'>Blocks</a>

- Use braces with all multi-line blocks.

 ```javascript
 // ruim
 if (test)
 return false;
 // bom
 if (test) return false;
 // bom
 if (test) {
 return false;
 }
 // ruim
 function() { return false; }
 // bom
 function() {
 return false;
 }
 ```

 **[[⬆]](#TOC)**


## <a name='comments'>Comments</a>

- Use `/** ... */` for multiline comments. Include a description, specify types and values for all parameters and return values.

 ```javascript
 // ruim
 // make() returns a new element
 // based on the pased in tag name
 //
 // @param <String> tag
 // @return <Element> element
 function make(tag) {
 // ...stuff...
 return element;
 }
 // bom
 /**
 * make() returns a new element
 * based on the pased in tag name
 *
 * @param <String> tag
 * @return <Element> element
 */
 function make(tag) {
 // ...stuff...
 return element;
 }
 ```

- Use `//` for single line comments. Place single line comments on a newline above the subject of the comment. Put an emptyline before the comment.
 ```javascript
 // ruim
 var active = true; // is current tab

 // bom
 // is current tab
 var active = true;

 // ruim
 function getType() {
 console.log('fetching type...');
 // set the default type to 'no type'
 var type = this._type || 'no type';

 return type;
 }

 // bom
 function getType() {
 console.log('fetching type...');

 // set the default type to 'no type'
 var type = this._type || 'no type';

 return type;
 }
 ```
 **[[⬆]](#TOC)**
## <a name='whitespace'>Whitespace</a>
- Use soft tabs set to 2 spaces
 ```javascript
 // ruim
 function() {
 ∙∙∙∙var name;
 }

 // ruim
 function() {
 ∙ var name;
 }

 // bom
 function() {
 ∙∙var name;
 }
 ```
- Place 1 space before the leading brace.
 ```javascript
 // ruim
 function test(){
 console.log('test');
 }

 // bom
 function test() {
 console.log('test');
 }

 // ruim
 dog.set('attr',{
 age: '1 year',
 breed: 'Bernese Mountain Dog'
 });

 // bom
 dog.set('attr', {
 age: '1 year',
 breed: 'Bernese Mountain Dog'
 });
 ```
- Place an empty newline at the end of the file.
 ```javascript
 // ruim
 (function(global) {
 // ...stuff...
 })(this);
 ```
 ```javascript
 // bom
 (function(global) {
 // ...stuff...
 })(this);

 ```
 **[[⬆]](#TOC)**
- Use indentation when making long method chains.
```javascript
// ruim
$('#items').find('.selected').highlight().end().find('.open').updateCount();
// bom
$('#items')
 .find('.selected')
 .highlight()
 .end()
 .find('.open')
 .updateCount();
// ruim
var leds = stage.selectAll('.led').data(data).enter().append("svg:svg").class('led', true)
 .attr('width', (radius + margin) * 2).append("svg:g")
 .attr("transform", "translate(" + (radius + margin) + "," + (radius + margin) + ")")
 .call(tron.led);
// bom
var leds = stage.selectAll('.led')
 .data(data)
 .enter().append("svg:svg")
 .class('led', true)
 .attr('width', (radius + margin) * 2)
 .append("svg:g")
 .attr("transform", "translate(" + (radius + margin) + "," + (radius + margin) + ")")
 .call(tron.led);

Leading Commas

Semicolons

Type Coercion

Naming Conventions

Accessors

Constructors

Modules

jQuery

ECMAScript 5 Compatability

Testing

Performance

Resources

The JavaScript Style Guide Guide

Contributors

License

};