开源软件名称：

开源软件地址：

开源编程语言：

开源软件介绍：

Airbnb JavaScript Style Guide() {

Un enfoque altamente razonable para JavaScript

Nota: Esta guía asume que usas Babel, adicionalmente de tener instalado babel-preset-airbnb o su equivalente. También asume que tienes instalado shims/pollyfills en tu aplicación, con airbnb-browser-shims o su equivalente.

Otras Guías de Estilos

• ES5 (Obsoleto)
• React
• CSS-in-JavaScript
• CSS & SASS
• Ruby

Tabla de Contenido

1. Tipos
2. Referencias
3. Objetos
4. Arreglos
5. Destructuring
6. Cadenas de Texto
7. Funciones
8. Notación de Funciones de Flecha
9. Clases y Constructores
10. Módulos
11. Iteradores y Generadores
12. Propiedades
13. Variables
14. Hoisting
15. Expresiones de comparación e igualdad
16. Bloques
17. Comentarios
18. Espacios en blanco
19. Comas
20. Puntos y Comas
21. Casting de Tipos y Coerción
22. Convenciones de nomenclatura
23. Funciones de Acceso
24. Eventos
25. jQuery
26. Compatibilidad con EcmaScript 5
27. Estilos de EcmaScript6+ (ES2015+)
28. Pruebas
29. Desempeño
30. Recursos
31. En la cancha
32. Traducciones
33. La guía de la Guía de Estilos JavaScript
34. Charla con nosotros sobre Javascript
35. Colaboradores
36. Licencia

Tipos

• Primitivos: Cuando accedes a un tipo primitivo, manejas directamente su valor

  • string
  • number
  • boolean
  • null
  • undefined

  const foo = 1;
  let bar = foo;
  
  bar = 9;
  
  console.log(foo, bar); // => 1, 9

• Complejo: Cuando accedes a un tipo complejo, manejas la referencia a su valor.

  • object
  • array
  • function

  const foo = [1, 2];
  const bar = foo;
  
  bar[0] = 9;
  
  console.log(foo[0], bar[0]); // => 9, 9

[⬆ regresar a la Tabla de Contenido]

Referencias

• Usa const para todas tus referencias; evita usar var.

¿Por qué? Esto asegura que no reasignes tus referencias, lo que puede llevar a bugs y dificultad para comprender el código.

// mal
var a = 1;
var b = 2;

// bien
const a = 1;
const b = 2;

• Si vas a reasignar referencias, usa let en vez de var.

¿Por qué? El bloque let es de alcance a nivel de bloque a diferencia del alcance a nivel de función de var.

// mal
var count = 1;
if (true) {
  count += 1;
}

// bien, usa el let
let count = 1;
if (true) {
  count += 1;
}

• Nota que tanto let como const tienen alcance a nivel de bloque.

// const y let solo existen en los bloques donde
// estan definidos
{
  let a = 1;
  const b = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError

Objetos

• Usa la sintaxis literal para la creación de un objeto.

  // mal
  const item = new Object();
  
  // bien
  const item = {};

• No uses palabras reservadas para nombres de propiedades. No funciona en IE8 Más información. No hay problema de usarlo en módulos de ES6 y en código de servidor.

  // mal
  const superman = {
    default: { clark: 'kent' },
    private: true
  };
  
  // bien
  const superman = {
    defaults: { clark: 'kent' },
    hidden: true
  };

• Usa sinónimos legibles en lugar de palabras reservadas.

  // mal
  const superman = {
    class: 'alien'
  };
  
  // mal
  const superman = {
    klass: 'alien'
  };
  
  // bien
  const superman = {
    type: 'alien'
  };

[⬆ regresar a la Tabla de Contenido]

Arreglos

• Usa la sintaxis literal para la creación de arreglos

  // mal
  const items = new Array();
  
  // bien
  const items = [];

• Usa Array#push, en vez de asignación directa, para agregar elementos a un arreglo.

  const someStack = [];
  
  // mal
  someStack[someStack.length] = 'abracadabra';
  
  // bien
  someStack.push('abracadabra');

• Usa spread de arrays para copiar arreglos.

  const len = items.length;
  const itemsCopy = [];
  let i;
  
  // mal
  for (i = 0; i < len; i++) {
    itemsCopy[i] = items[i];
  }
  
  // bien
  const itemsCopy = [...items];

• Para convertir un objeto "array-like" (similar a un arreglo) a un arreglo, usa Array#from.

  const foo = document.querySelectorAll('.foo');
  const nodes = Array.from(foo);

[⬆ regresar a la Tabla de Contenido]

Destructuring

• Usa object destructuring cuando accedas y uses múltiples propiedades de un objeto.

  ¿Por qué? Destructuring te ahorra crear referencias temporales para esas propiedades.

  // mal
  function getFullName(user) {
    const firstName = user.firstName;
    const lastName = user.lastName;
  
    return `${firstName} ${lastName}`;
  }
  
  // bien
  function getFullName(user) {
    const { firstName, lastName } = user;
    return `${firstName} ${lastName}`;
  }
  
  // mejor
  function getFullName({ firstName, lastName }) {
    return `${firstName} ${lastName}`;
  }

• Usa array destructuring.

  const arr = [1, 2, 3, 4];
  
  // mal
  const first = arr[0];
  const second = arr[1];
  
  // bien
  const [first, second] = arr;

• Usa object destructuring para múltiple valores de retorno, no array destructuring.

  ¿Por qué? Puedes agregar nuevas propiedades en el tiempo o cambiar el orden de las cosas sin afectar la forma en que se llama.

  // mal
  function processInput(input) {
    // then a miracle occurs
    return [left, right, top, bottom];
  }
  
  // el que llama necesita pensar en el orden de la data de retorno
  const [left, __, top] = processInput(input);
  
  // bien
  function processInput(input) {
    // then a miracle occurs
    return { left, right, top, bottom };
  }
  
  // el que llama elige solo la data que necesita
  const { left, top } = processInput(input);

[⬆ regresar a la Tabla de Contenido]

Cadenas de Texto

• Usa comillas simples '' para las cadenas de texto

  // mal
  const name = "Bob Parr";
  
  // bien
  const name = 'Bob Parr';

• Las cadenas de texto con una longitud mayor a 100 caracteres deben ser escritas en múltiples líneas usando concatenación.

Nota: Cuando se usa sin criterio, las cadenas de texto largas pueden impactar en el desempeño. jsPerf & Discusión

// mal
var errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';

// bien
var errorMessage = 'This is a super long error that was thrown because\
of Batman. When you stop to think about how Batman had anything to do \
with this, you would get nowhere fast.';

// bien
var errorMessage = 'This is a super long error that was thrown because' +
  'of Batman. When you stop to think about how Batman had anything to do ' +
  'with this, you would get nowhere fast.';

• Cuando se crean cadenas de texto de forma programática, usa template strings (cadena de plantillas) en vez de concatenación.

¿Por qué? Los template strings te dan mayor legibilidad, sintaxis concisa con nuevas líneas apropiadas y capacidades de interpolación.

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

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

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

• Nunca uses eval() en una cadena de texto, abre una caja de Pandora de vulnerabilidades.

[⬆ regresar a la Tabla de Contenido]

Funciones

• Usa declaración de función en vez de expresiones de función.

¿Por qué? Las declaraciones de función son nombradas, por lo que son más sencillas de identificar en las pilas de llamadas. Además todo el contenido de una declaración de función es hoisted, mientras que solo la referencia de una expresión de función es hoisted. Esta regla hace posible que siempre se usen Arrow Functions en vez de las funciones de expresión.

 // mal
 const foo = function () {
 };

 // bien
 function foo() {
 }

• Nunca declares una función en un bloque que no sea de función (if, while, etc). En vez de ello, asigna la función a una variable. Los navegadores te permitirán hacerlo pero todos ellos lo interpretarán de modo diferente, lo que es lamentable.

Nota: ECMA-262 define un bloque como una lista de sentencias. Una declaración de función no es una sentencia. Lee la nota de ECMA-262 sobre este inconveniente.

// mal
if (currentUser) {
  function test() {
    console.log('Nope.');
  }
}

// bien
let test;
if (currentUser) {
  test = () => {
    console.log('Yup.');
  };
}

• Nunca nombres a un parámetro como arguments, esto tendrá precedencia sobre el objeto arguments que es brindado en cada ámbito de función.

  // mal
  function nope(name, options, arguments) {
    // ...algo...
  }
  
  // bien
  function yup(name, options, args) {
    // ...algo...
  }

[⬆ regresar a la Tabla de Contenido]

Notación de Funciones de Flecha

• Cuando debas usar funciones anónimas (como cuando pasas un callback inline), usa la notación de funciones de flecha.

  ¿Por qué? Crea una versión de la función que ejecuta en el contexto de this, lo que usualmente es lo que deseas, además que tiene una sintaxis más concisa.

  ¿Por qué no? Si tienes una función complicada, debes mover esa lógica fuera de su expresión de función nombrada.

  // mal
  [1, 2, 3].map(function (x) {
    const y = x + 1;
    return x * y;
  });
  
  // bien
  [1, 2, 3].map((x) => {
    const y = x + 1;
    return x * y;
  });

• Si el cuerpo de la función consiste en una sola sentencia retornando una expresión sin efectos colaterales, omite las llaves y usa el retorno implícito. De otro modo, mantén las llaves y usa una sentencia de retorno.

  ¿Por qué? Un edulcorante sintáctico. Se lee bien cuando múltiples funciones están encadenadas entre sí.

  // mal
  [1, 2, 3].map(number => {
    const nextNumber = number + 1;
    `A string containing the ${nextNumber}.`;
  });
  
  // bien
  [1, 2, 3].map(number => `A string containing the ${number}.`);
  
  // bien
  [1, 2, 3].map((number) => {
    const nextNumber = number + 1;
    return `A string containing the ${nextNumber}.`;
  });
  
  // bien
  [1, 2, 3].map((number, index) => ({
    [index]: number,
  }));
  
  // Sin efectos colaterales para retorno implícito
  function foo(callback) {
    const val = callback();
    if (val === true) {
      // Do something if callback returns true
    }
  }
  
  let bool = false;
  
  // mal
  foo(() => bool = true);
  
  // bien
  foo(() => {
    bool = true;
  });

• En caso que la expresión se expanda en varias líneas, envuélvela en paréntesis para una mejor legibilidad.

  ¿Por qué? Se observa claramente dónde empieza y termina la función.

  // mal
  ['get', 'post', 'put'].map(httpMethod => Object.prototype.hasOwnProperty.call(
      httpMagicObjectWithAVeryLongName,
      httpMethod,
    )
  );
  
  // bien
  ['get', 'post', 'put'].map(httpMethod => (
    Object.prototype.hasOwnProperty.call(
      httpMagicObjectWithAVeryLongName,
      httpMethod,
    )
  ));

• Si tu función tiene un solo argumento y no usa llaves, omite los paréntesis. De otra forma, siempre incluye paréntesis alrededor de los argumentos por claridad y consistencia. Nota: es también aceptable siempre usar paréntesis, en cuyo caso usa la opción de "always" para eslint o no incluyas disallowParenthesesAroundArrowParam para jscs.

  ¿Por qué? Menos basura visual.

  // mal
  [1, 2, 3].map((x) => x * x);
  
  // bien
  [1, 2, 3].map(x => x * x);
  
  // bien
  [1, 2, 3].map(number => (
    `A long string with the ${number}. It’s so long that we don’t want it to take up space on the .map line!`
  ));
  
  // mal
  [1, 2, 3].map(x => {
    const y = x + 1;
    return x * y;
  });
  
  // bien
  [1, 2, 3].map((x) => {
    const y = x + 1;
    return x * y;
  });

• Evita confundir la sintaxis de función de flecha (=>) con los operadores de comparación (<=, >=).

  // mal
  const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;
  
  // mal
  const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;
  
  // bien
  const itemHeight = item => (item.