Airbnb JavaScript () {

• JavaScript *

****: Babel babel-preset-airbnb airbnb-browser-shims shims/polyfills


Translation

• ES5 ()
• React
• CSS-in-JavaScript
• CSS & Sass
• Ruby

24. Get-Set
26. jQuery
27. ECMAScript 5
28. ECMAScript 6+ (ES 2015+)
33. In the Wild
34. Translation
35. The JavaScript Style Guide Guide
36. Chat With Us About JavaScript
37. Contributors
38. License
39. Amendments

• 1.1 :

  • string
  • number
  • boolean
  • null
  • undefined
  • symbol
  • bigint

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

  • Symbols BigInts polyfill

• 1.2 :

  • object
  • array
  • function

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

• 2.1 const vareslint: prefer-const, no-const-assign

  bug

  // bad
  var a = 1;
  var b = 2;
  
  // good
  const a = 1;
  const b = 2;
  

• 2.2 let vareslint: no-var

  let var

  // bad
  var count = 1;
  if (true) {
    count += 1;
  }
  
  // good, use the let.
  let count = 1;
  if (true) {
    count += 1;
  }
  

• 2.3 let const

  // const  let 
  {
    let a = 1;
    const b = 1;
  }
  console.log(a); // ReferenceError
  console.log(b); // ReferenceError
  

• 3.1 eslint: no-new-object

  // bad
  const item = new Object();
  
  // good
  const item = {};
  

• 3.2

  
  function getKey(k) {
    return `a key named ${k}`;
  }
  
  // bad
  const obj = {
    id: 5,
    name: 'San Francisco',
  };
  obj[getKey('enabled')] = true;
  
  // good
  const obj = {
    id: 5,
    name: 'San Francisco',
    [getKey('enabled')]: true,
  };
  

• 3.3 eslint: object-shorthand

  // bad
  const atom = {
    value: 1,
  
    addValue: function (value) {
      return atom.value + value;
    },
  };
  
  // good
  const atom = {
    value: 1,
  
    // 
    addValue(value) {
      return atom.value + value;
    },
  };
  

• 3.4 eslint: object-shorthand

  const lukeSkywalker = 'Luke Skywalker';
  
  // bad
  const obj = {
    lukeSkywalker: lukeSkywalker,
  };
  
  // good
  const obj = {
    lukeSkywalker,
  };
  

• 3.5

  const anakinSkywalker = 'Anakin Skywalker';
  const lukeSkywalker = 'Luke Skywalker';
  
  // bad
  const obj = {
    episodeOne: 1,
    twoJediWalkIntoACantina: 2,
    lukeSkywalker,
    episodeThree: 3,
    mayTheFourth: 4,
    anakinSkywalker,
  };
  
  // good
  const obj = {
    lukeSkywalker,
    anakinSkywalker,
    episodeOne: 1,
    twoJediWalkIntoACantina: 2,
    episodeThree: 3,
    mayTheFourth: 4,
  };
  

• 3.6 ''eslint: quote-props

  JS

  // bad
  const bad = {
    'foo': 3,
    'bar': 4,
    'data-blah': 5,
  };
  
  // good
  const good = {
    foo: 3,
    bar: 4,
    'data-blah': 5,
  };
  

• 3.7 Object.prototype hasOwnProperty``propertyIsEnumerable``isPrototypeOf

  { hasOwnProperty: false } Object.create(null)

  // bad
  console.log(object.hasOwnProperty(key));
  
  // good
  console.log(Object.prototype.hasOwnProperty.call(object, key));
  
  // best
  const has = Object.prototype.hasOwnProperty; // 
  /* or */
  import has from 'has'; // https://www.npmjs.com/package/has
  // ...
  console.log(has.call(object, key));
  

• 3.8 ... Object.assign rest ... eslint: prefer-object-spread
  • ^.^

// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // this mutates `original` _
delete copy.a; // so does this

// bad
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }

// good es6  ...
const original = { a: 1, b: 2 };
// 
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }

// rest 
const { a, ...noA } = copy; // noA => { b: 2, c: 3 }

• 4.1 eslint: no-array-constructor

  // bad
  const items = new Array();
  
  // good
  const items = [];
  

• 4.2 Array#push

  const someStack = [];
  
  // bad
  someStack[someStack.length] = 'abracadabra';
  
  // good
  someStack.push('abracadabra');
  

• 4.3

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

• 4.4 ... Array.from

  const foo = document.querySelectorAll('.foo');
  
  // good
  const nodes = Array.from(foo);
  
  // best
  const nodes = [...foo];
  

• 4.5 Array.from

  const arrLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };
  
  // bad
  const arr = Array.prototype.slice.call(arrLike);
  
  // good
  const arr = Array.from(arrLike);
  

• 4.6 Array.from ... map

  // bad
  const baz = [...foo].map(bar);
  
  // good
  const baz = Array.from(foo, bar);
  

• 4.7 return return 8.2eslint: array-callback-return

  // good
  [1, 2, 3].map((x) => {
    const y = x + 1;
    return x * y;
  });
  
  // good 
  [1, 2, 3].map(x => x + 1);
  
  // bad -   acc  undefined 
  [[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => {
    const flatten = acc.concat(item);
    acc[index] = flatten;
  });
  
  // good
  [[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => {
    const flatten = acc.concat(item);
    acc[index] = flatten;
    return flatten;
  });
  
  // bad
  inbox.filter((msg) => {
    const { subject, author } = msg;
    if (subject === 'Mockingbird') {
      return author === 'Harper Lee';
    } else {
      return false;
    }
  });
  
  // good
  inbox.filter((msg) => {
    const { subject, author } = msg;
    if (subject === 'Mockingbird') {
      return author === 'Harper Lee';
    }
  
    return false;
  });
  

• 4.8 [ ]

  // bad
  const arr = [
    [0, 1], [2, 3], [4, 5],
  ];
  
  const objectInArray = [{
    id: 1,
  }, {
    id: 2,
  }];
  
  const numberInArray = [
    1, 2,
  ];
  
  // good
  const arr = [[0, 1], [2, 3], [4, 5]];
  
  const objectInArray = [
    {
      id: 1,
    },
    {
      id: 2,
    },
  ];
  
  const numberInArray = [
    1,
    2,
  ];
  

• 5.1 eslint: prefer-destructuring

  Destructuring objects also provides a single site of definition of the object structure that is used in the block, rather than requiring reading the entire block to determine what is used.

  // bad
  function getFullName(user) {
    const firstName = user.firstName;
    const lastName = user.lastName;
  
    return `${firstName} ${lastName}`;
  }
  
  // good
  function getFullName(user) {
    const { firstName, lastName } = user;
    return `${firstName} ${lastName}`;
  }
  
  // best
  function getFullName({ firstName, lastName }) {
    return `${firstName} ${lastName}`;
  }
  

• 5.2 eslint: prefer-destructuring

  const arr = [1, 2, 3, 4];
  
  // bad
  const first = arr[0];
  const second = arr[1];
  
  // good
  const [first, second] = arr;
  

• 5.3

  // bad
  function processInput(input) {
    // 
    return [left, right, top, bottom];
  }
  
  // 
  const [left, __, top] = processInput(input);
  
  // good
  function processInput(input) {
    // oops
    return { left, right, top, bottom };
  }
  
  // 
  const { left, top } = processInput(input);
  

back to top

• 6.1 '' eslint: quotes

  // bad
  const name = "Capt. Janeway";
  
  // bad - 
  const name = `Capt. Janeway`;
  
  // good
  const name = 'Capt. Janeway';
  

• 6.2 100

```javascript
// bad
const 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.';

// bad
const 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.';

// good
const 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.';
```

• 6.3 eslint: prefer-template template-curly-spacing

  // 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}?`;
  }
  

• 6.4 eval()eslint: no-eval

• 6.5 eslint: no-useless-escape

  // bad
  const foo = '\'this\' \i\s \"quoted\"';
  
  // good
  const foo = '\'this\' is "quoted"';
  
  //best
  const foo = `my name is '${name}'`;
  

• 7.1 eslint: func-style

  const func = function () {}

  function func() {}

  babel ()

> [](https://github.com/airbnb/javascript#functions)

    // bad
    function foo() {
      // ...
    }

// bad
    const foo = function () {
      // ...
    };

// good
    // lexical name distinguished from the variable-referenced invocation(s)
    // 
    const short = function longUniqueMoreDescriptiveLexicalFoo() {
      // ...
    };

• 7.2 eslint: wrap-iife

  Immediately Invoked Function expression = IIFE

  IIFE

  // immediately-invoked function expression (IIFE)
  (function () {
    console.log('Welcome to the Internet. Please follow me.');
  }());
  

• 7.3 if``while eslint: no-loop-func

• 7.4 ****ECMA-262 block

  // bad
  if (currentUser) {
    function test() {
      console.log('Nope.');
    }
  }
  
  // good
  let test;
  if (currentUser) {
    test = () => {
      console.log('Yup.');
    };
  }
  

• 7.5 arguments arguments arguments

  // bad
  function foo(name, options, arguments) {
    // ...
  }
  
  // good
  function foo(name, options, args) {
    // ...
  }
  

• 7.6 arguments ... eslint: prefer-rest-params

  ... arguments

  // bad
  function concatenateAll() {
    const args = Array.prototype.slice.call(arguments);
    return args.join('');
  }
  
  // good
  function concatenateAll(...args) {
    return args.join('');
  }
  

• 7.7

  // really bad
  function handleThings(opts) {
    //  arguments
    //  opts  false,  {}
    //  bug
    opts = opts || {};
    // ...
  }
  
  // still bad
  function handleThings(opts) {
    if (opts === void 0) {
      opts = {};
    }
    // ...
  }
  
  // good
  function handleThings(opts = {}) {
    // ...
  }
  

• 7.8

  a

  var b = 1;
  // bad
  function count(a = b++) {
    console.log(a);
  }
  count();  // 1
  count();  // 2
  count(3); // 3
  count();  // 3
  

• 7.9 eslint: default-param-last

  // bad
  function handleThings(opts = {}, name) {
    // ...
  }
  
  // good
  function handleThings(name, opts = {}) {
    // ...
  }
  

• 7.10 eslint: no-new-func

  eval()

  // bad
  var add = new Function('a', 'b', 'return a + b');
  
  // still bad
  var subtract = Function('a', 'b', 'return a - b');
  

• 7.11 eslint: space-before-function-paren space-before-blocks

  //

  // bad
  const f = function(){};
  const g = function (){};
  const h = function() {};
  
  // good
  const x = function () {};
  const y = function a() {};
  

• 7.12 . eslint: no-param-reassign

  // bad
  function f1(obj) {
    obj.key = 1;
  };
  
  // good
  function f2(obj) {
    const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;
  };
  

• 7.13 eslint: no-param-reassign

  arguments V8

  // bad
  function f1(a) {
    a = 1;
    // ...
  }
  
  function f2(a) {
    if (!a) { a = 1; }
    // ...
  }
  
  // good
  function f3(a) {
    const b = a || 1;
    // ...
  }
  
  function f4(a = 1) {
    // ...
  }
  

• 7.14 eslint: prefer-spread

  this apply new

  // bad
  const x = [1, 2, 3, 4, 5];
  console.log.apply(console, x);
  
  // good
  const x = [1, 2, 3, 4, 5];
  console.log(...x);
  
  // bad
  new (Function.prototype.bind.apply(Date, [null, 2016, 8, 5]));
  
  // good
  new Date(...[2016, 8, 5]);
  

• 7.15

  // bad
  function foo(bar,
               baz,
               quux) {
    // ...
  }
  
  // good 
  function foo(
    bar,
    baz,
    quux,
  ) {
    // ...
  }
  
  // bad
  console.log(foo,
    bar,
    baz);
  
  // good
  console.log(
    foo,
    bar,
    baz,
  );
  

• 8.1 eslint: prefer-arrow-callback, arrow-spacing

  this this

  // 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;
  });
  

• 8.2 return return eslint: arrow-parens, arrow-body-style

  // bad
  [1, 2, 3].map((number) => {
    const nextNumber = number + 1;
    `A string containing the ${nextNumber}.`;
  });
  
  // good
  [1, 2, 3].map((number) => `A string containing the ${number + 1}.`);
  
  // good
  [1, 2, 3].map((number) => {
    const nextNumber = number + 1;
    return `A string containing the ${nextNumber}.`;
  });
  
  // good
  [1, 2, 3].map((number, index) => ({
    [index]: number,
  }));
  
  //  return 
  function foo(callback) {
    const val = callback();
    if (val === true) {
      //  callback  true ...
    }
  }
  
  let bool = false;
  
  // bad
  foo(() => bool = true);
  
  

// good foo(() => { bool = true; }); ```

• 8.3

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

• 8.4 . eslint: arrow-parens

  // bad
  [1, 2, 3].map(x => x * x);
  
  // good
  [1, 2, 3].map((x) => x * x);
  
  // bad
  [1, 2, 3].map(number => (
    `A long string with the ${number}. Its so long that we dont want it to take up space on the .map line!`
  ));
  
  // good
  [1, 2, 3].map((number) => (
    `A long string with the ${number}. Its so long that we dont want it to take up space on the .map line!`
  ));
  
  

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

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

• 8.5 =>``<=, >=. eslint: no-confusing-arrow

  // bad
  const itemHeight = (item) => item.height <= 256 ? item.largeSize : item.smallSize;
  
  // bad
  const itemHeight = (item) => item.height >= 256 ? item.largeSize : item.smallSize;
  
  // good
  const itemHeight = (item) => (item.height <= 256 ? item.largeSize : item.smallSize);
  
  // good
  const itemHeight = (item) => {
    const { height, largeSize, smallSize } = item;
    return height <= 256 ? largeSize : smallSize;
  };
  

• 8.6 eslint: implicit-arrow-linebreak

  // bad
  (foo) =>
    bar;
  
  (foo) =>
    (bar);
  
  // good
  (foo) => bar;
  (foo) => (bar);
  (foo) => (
     bar
  )
  

• 9.1 class prototype

  class

  // bad
  function Queue(contents = []) {
    this.queue = [...contents];
  }
  Queue.prototype.pop = function () {
    const value = this.queue[0];
    this.queue.splice(0, 1);
    return value;
  };
  

  // good class Queue { constructor(contents = []) { this.queue = [...contents]; } pop() { const value = this.queue[0]; this.queue.splice(0, 1); return value; } }

• 9.2 extends

  instanceof

  // bad
  const inherits = require('inherits');
  function PeekableQueue(contents) {
    Queue.apply(this, contents);
  }
  inherits(PeekableQueue, Queue);
  PeekableQueue.prototype.peek = function () {
    return this.queue[0];
  }
  
  // good
  class PeekableQueue extends Queue {
    peek() {
      return this.queue[0];
    }
  }
  

• 9.3 this

  // bad
  Jedi.prototype.jump = function () {
    this.jumping = true;
    return true;
  };
  
  Jedi.prototype.setHeight = function (height) {
    this.height = height;
  };
  
  const luke = new Jedi();
  luke.jump(); // => true
  luke.setHeight(20); // => undefined
  
  // good
  class Jedi {
    jump() {
      this.jumping = true;
      return this;
    }
  
    setHeight(height) {
      this.height = height;
      return this;
    }
  }
  
  const luke = new Jedi();
  
  luke.jump()
    .setHeight(20);
  

• 9.4 toString()

  class Jedi {
    constructor(options = {}) {
      this.name = options.name || 'no name';
    }
  
    getName() {
      return this.name;
    }
  
    toString() {
      return `Jedi - ${this.getName()}`;
    }
  }
  

• 9.5 eslint: no-useless-constructor

  // bad
  class Jedi {
    constructor() {}
  
    getName() {
      return this.name;
    }
  }
  
  // bad
  class Rey extends Jedi {
    // 
    constructor(...args) {
      super(...args);
    }
  }
  
  // good
  class Rey extends Jedi {
    constructor(...args) {
      super(...args);
      this.name = 'Rey';
    }
  }
  

• 9.6 eslint: no-dupe-class-members

  bug.

  // bad
  class Foo {
    bar() { return 1; }
    bar() { return 2; }
  }
  
  // good
  class Foo {
    bar() { return 1; }
  }
  
  // good
  class Foo {
    bar() { return 2; }
  }
  

• 9.7 this eslint: class-methods-use-this

  // bad
  class Foo {
    bar() {
      console.log('bar');
    }
  }
  
  // good - this 
  class Foo {
    bar() {
      console.log(this.bar);
    }
  }
  
  // good - constructor  this
  class Foo {
    constructor() {
      // ...
    }
  }
  
  // good -  this
  class Foo {
    static bar() {
      console.log('bar');
    }
  }
  

• 10.1 import/export

  // bad
  const AirbnbStyleGuide = require('./AirbnbStyleGuide');
  module.exports = AirbnbStyleGuide.es6;
  
  // ok
  import AirbnbStyleGuide from './AirbnbStyleGuide';
  export default AirbnbStyleGuide.es6;
  
  // best
  import { es6 } from './AirbnbStyleGuide';
  export default es6;
  

• 10.2 import *

  // bad
  import * as AirbnbStyleGuide from './AirbnbStyleGuide';
  
  // good
  import AirbnbStyleGuide from './AirbnbStyleGuide';
  

• 10.3 import export

  import export

  // bad
  // filename es6.js
  export { es6 as default } from './AirbnbStyleGuide';
  
  // good
  // filename es6.js
  import { es6 } from './AirbnbStyleGuide';
  export default es6;
  

• 10.4 import eslint: no-duplicate-imports

  // bad
  import foo from 'foo';
  //    //
  import { named1, named2 } from 'foo';
  
  // good
  import foo, { named1, named2 } from 'foo';
  
  // good
  import foo, {
    named1,
    named2,
  } from 'foo';
  

• 10.5 eslint: import/no-mutable-exports

  // bad
  let foo = 3;
  export { foo }
  
  // good
  const foo = 3;
  export { foo }
  

• 10.6 export default eslint: import/prefer-default-export

    // bad
    export function foo() {}

// good
    export default function foo() {}

• 10.7 import eslint: import/first

  import

  // bad
  import foo from 'foo';
  foo.init();
  
  import bar from 'bar';
  
  // good
  import foo from 'foo';
  import bar from 'bar';
  
  foo.init();
  

• 10.8 import

  // bad
  import {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path';
  
  // good
  import {
    longNameA,
    longNameB,
    longNameC,
    longNameD,
    longNameE,
  } from 'path';
  

• 10.9 import Webpack loader eslint: import/no-webpack-loader-syntax

  Webpack import webpack.config.js webpack loader

  // bad
  import fooSass from 'css!sass!foo.scss';
  import barCss from 'style!css!bar.css';
  
  // good
  import fooSass from 'foo.scss';
  import barCss from 'bar.css';
  

• 11.1 JavaScript for-in for-ofeslint: no-iterator no-restricted-syntax

  map() / every() / filter() / find() / findIndex() / reduce() / some() / ... , Object.keys() / Object.values() / Object.entries()

  const numbers = [1, 2, 3, 4, 5];
  
  // bad
  let sum = 0;
  for (let num of numbers) {
    sum += num;
  }
  sum === 15;
  
  // good
  let sum = 0;
  numbers.forEach(num => sum += num);
  sum === 15;
  
  // best (use the functional force)
  const sum = numbers.reduce((total, num) => total + num, 0);
  sum === 15;
  
  // bad
  const increasedByOne = [];
  for (let i = 0; i < numbers.length; i++) {
    increasedByOne.push(numbers[i] + 1);
  }
  
  // good
  const increasedByOne = [];
  numbers.forEach(num => increasedByOne.push(num + 1));
  
  // best (keeping it functional)
  const increasedByOne = numbers.map(num => num + 1);
  

• 11.2

  ES5

• 11.3 eslint: generator-star-spacing

  function * - *``function``function* function

  // bad
  function * foo() {
    // ...
  }
  
  // bad
  const bar = function * () {
    // ...
  }
  
  // bad
  const baz = function *() {
    // ...
  }
  
  // bad
  const quux = function*() {
    // ...
  }
  
  // bad
  function*foo() {
    // ...
  }
  
  // bad
  function *foo() {
    // ...
  }
  
  // very bad
  function
  *
  foo() {
    // ...
  }
  
  // very bad
  const wat = function
  *
  () {
    // ...
  }
  
  // good
  function* foo() {
    // ...
  }
  
  // good
  const foo = function* () {
    // ...
  }
  

• 12.1 eslint: dot-notation

  const luke = {
    jedi: true,
    age: 28,
  };
  
  // bad
  const isJedi = luke['jedi'];
  
  // good
  const isJedi = luke.jedi;
  

• 12.2 []

  const luke = {
    jedi: true,
    age: 28,
  };
  
  function getProp(prop) {
    return luke[prop];
  }
  
  const isJedi = getProp('jedi');
  

• 12.3 ** eslint: no-restricted-properties.

  // bad
  const binary = Math.pow(2, 10);
  
  // good
  const binary = 2 ** 10;
  

• 13.1 const let eslint: no-undef prefer-const

  // bad
  superPower = new SuperPower();
  
  // good
  const superPower = new SuperPower();
  

• 13.2 const leteslint: one-var

  ; , Git

  // bad
  const items = getItems(),
      goSportsTeam = true,
      dragonball = 'z';
  
  // bad
  // 
  const items = getItems(),
      goSportsTeam = true;
      dragonball = 'z';
  
  // good
  const items = getItems();
  const goSportsTeam = true;
  const dragonball = 'z';
  

• 13.3 const let

  // bad
  let i, len, dragonball,
      items = getItems(),
      goSportsTeam = true;
  
  // bad
  let i;
  const items = getItems();
  let dragonball;
  const goSportsTeam = true;
  let len;
  
  // good
  const goSportsTeam = true;
  const items = getItems();
  let dragonball;
  let i;
  let length;
  

• 13.4

  let const

  // bad - 
  function checkName(hasName) {
    const name = getName();
  
    if (hasName === 'test') {
      return false;
    }
  
    if (name === 'test') {
      this.setName('');
      return false;
    }
  
    return name;
  }
  
  // good
  function checkName(hasName) {
    if (hasName === 'test') {
      return false;
    }
  
    // 
    const name = getName();
  
    if (name === 'test') {
      this.setName('');
      return false;
    }
  
    return name;
  }
  

• 13.5 eslint: no-multi-assign

  // bad
  (function example() {
    // JavaScript 
    // let a = ( b = ( c = 1 ) );
    // let  a ;  b  c 
    let a = b = c = 1;
  }());
  
  console.log(a); // undefined
  console.log(b); // 1
  console.log(c); // 1
  
  // good
  (function example() {
    let a = 1;
    let b = a;
    let c = a;
  }());
  
  console.log(a); // undefined
  console.log(b); // undefined
  console.log(c); // undefined
  
  // `const` 
  

• 13.6 ++ --. eslint no-plusplus

  eslint num + = 1 num ++ num ++ /

    // bad
  
    const array = [1, 2, 3];
    let num = 1;
    num++;
    --num;
  
    let sum = 0;
    let truthyCount = 0;
    for (let i = 0; i < array.length; i++) {
      let value = array[i];
      sum += value;
      if (value) {
        truthyCount++;
      }
    }
  
    // good
  
    const array = [1, 2, 3];
    let num = 1;
    num += 1;
    num -= 1;
  
    const sum = array.reduce((a, b) => a + b, 0);
    const truthyCount = array.filter(Boolean).length;
  

• 13.7 = / max-leneslint operator-linebreak.

  =

  // bad
  const foo =
    superLongLongLongLongLongLongLongLongFunctionName();
  
  // bad
  const foo
    = 'superLongLongLongLongLongLongLongLongString';
  
  // good
  const foo = (
    superLongLongLongLongLongLongLongLongFunctionName()
  );
  
  // good
  const foo = 'superLongLongLongLongLongLongLongLongString';
  

• 13.8 eslint: no-unused-vars

  // bad
  
  var some_unused_var = 42;
  
  // 
  var y = 10;
  y = 5;
  
  // 
  var z = 0;
  z = z + 1;
  
  // 
  function getX(x, y) {
      return x;
  }
  
  // good
  function getXPlusY(x, y) {
    return x + y;
  }
  
  var x = 1;
  var y = a + 2;
  
  alert(getXPlusY(x, y));
  
  // 'type'   rest 
  // 
  var { type, ...coords } = data;
  // 'coords'  'type'  'data' 
  

• 14.1 var const let typeof .

  //  notDefined
  function example() {
    console.log(notDefined); // => throws a ReferenceError
  }
  
  // 
  //  declaredButNotAssigned  true 
  function example() {
    console.log(declaredButNotAssigned); // => undefined
    var declaredButNotAssigned = true;
  }
  
  // 
  //  
  function example() {
    let declaredButNotAssigned;
    console.log(declaredButNotAssigned); // => undefined
    declaredButNotAssigned = true;
  }
  
  //  constlet
  function example() {
    console.log(declaredButNotAssigned); // => throws a ReferenceError
    console.log(typeof declaredButNotAssigned); // => throws a ReferenceError
    const declaredButNotAssigned = true;
  }
  

• 14.2 var

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

• 14.3

  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');
    };
  }
  
  // 
  function example() {
    console.log(named); // => undefined
  
    named(); // => TypeError named is not a function
  
    var named = function named() {
      console.log('named');
    };
  }
  

• 14.4

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

• JavaScript Scoping & Hoisting by Ben Cherry.

• 15.1 === !== == !=. eslint: eqeqeq

• 15.2 if ToBoolean

  • Objects true
  • Undefined false
  • Null false
  • Booleans the value of the boolean
  • Numbers
    • +0, -0, or NaN false
    • true
  • Strings
    • '' false
    • true

  if ([0] && []) {
    // true
    //  true
  }
  

• 15.3

  // bad
  if (isValid === true) {
    // ...
  }
  
  // good
  if (isValid) {
    // ...
  }
  
  // bad
  if (name) {
    // ...
  }
  
  // good
  if (name !== '') {
    // ...
  }
  
  // bad
  if (collection.length) {
    // ...
  }
  
  // good
  if (collection.length > 0) {
    // ...
  }
  

• 15.4 Angus Croll Truth Equality and JavaScript

• 15.5 case default let``const``function classeslint rules: no-case-declarations.

  switch case case

  // bad
  switch (foo) {
    case 1:
      let x = 1;
      break;
    case 2:
      const y = 2;
      break;
    case 3:
      function f() {
        // ...
      }
      break;
    default:
      class C {}
  }
  
  // good
  switch (foo) {
    case 1: {
      let x = 1;
      break;
    }
    case 2: {
      const y = 2;
      break;
    }
    case 3: {
      function f() {
        // ...
      }
      break;
    }
    case 4:
      bar();
      break;
    default: {
      class C {}
    }
  }
  

• 15.6 eslint rules: no-nested-ternary

// bad const foo = maybe1 > maybe2 ? "bar" : value1 > value2 ? "baz" : null;

// better

const maybeNull = value1 > value2 ? 'baz' : null;

const foo = maybe1 > maybe2
? 'bar'
  : maybeNull;

// best

const maybeNull = value1 > value2 ? 'baz' : null;

const foo = maybe1 > maybe2 ? 'bar' : maybeNull;
```

  <a name="15.7"></a>
  <a name="comparison--unneeded-ternary"></a>
  - [15.7](#comparison--unneeded-ternary) eslint rules: [`no-unneeded-ternary`](http://eslint.org/docs/rules/no-unneeded-ternary.html)

    ```javascript
// bad
    const foo = a ? a : b;
    const bar = c ? true : false;
    const baz = c ? false : true;

    // good
const foo = a || b;
    const bar = !!c;
    const baz = !c;

• 15.8 +, -, *, / eslint: no-mixed-operators

  // bad
  const foo = a && b < 0 || c > 0 || d + 1 === 0;
  
  // bad
  const bar = a ** b - 5 % d;
  
  // bad
  // (a || b) && c 
  if (a || b && c) {
    return d;
  }
  
  // good
  const foo = (a && b < 0) || c > 0 || (d + 1 === 0);
  
  // good
  const bar = (a ** b) - (5 % d);
  
  // good
  if (a || (b && c)) {
    return d;
  }
  
  // good
  const bar = a + b / c * d;
  

back to top

• 16.1 eslint: nonblock-statement-body-position

  // bad
  if (test)
    return false;
  
  // good
  if (test) return false;
  
  // good
  if (test) {
    return false;
  }
  
  // bad
  function foo() { return false; }
  
  // good
  function bar() {
    return false;
  }
  

• 16.2 if else if eslint: brace-style

  // bad
  if (test) {
    thing1();
    thing2();
  }
  else {
    thing3();
  }
  
  // good
  if (test) {
    thing1();
    thing2();
  } else {
    thing3();
  }
  

• 16.3 if return else if return else if return return if eslint: no-else-return

  // bad
  function foo() {
    if (x) {
      return x;
    } else {
      return y;
    }
  }
  
  // bad
  function cats() {
    if (x) {
      return x;
    } else if (y) {
      return y;
    }
  }
  
  // bad
  function dogs() {
    if (x) {
      return x;
    } else {
      if (y) {
        return y;
      }
    }
  }
  
  // good
  function foo() {
    if (x) {
      return x;
    }
  
    return y;
  }
  
  // good
  function cats() {
    if (x) {
      return x;
    }
  
    if (y) {
      return y;
    }
  }
  
  // good
  function dogs(x) {
    if (x) {
      if (z) {
        return y;
      }
    } else {
      return z;
    }
  }
  

• 17.1 if, while

  // bad
  if ((foo === 123 || bar === 'abc') && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening()) {
    thing1();
  }
  
  // bad
  if (foo === 123 &&
    bar === 'abc') {
    thing1();
  }
  
  // bad
  if (foo === 123
    && bar === 'abc') {
    thing1();
  }
  
  // bad
  if (
    foo === 123 &&
    bar === 'abc'
  ) {
    thing1();
  }
  
  // good
  if (
    foo === 123
    && bar === 'abc'
  ) {
    thing1();
  }
  
  // good
  if (
    (foo === 123 || bar === 'abc')
    && doesItLookGoodWhenItBecomesThatLong()
    && isThisReallyHappening()
  ) {
    thing1();
  }
  
  // good
  if (foo === 123 && bar === 'abc') {
    thing1();
  }
  

• 17.2

  // bad
  !isRunning && startRunning();
  
  // good
  if (!isRunning) {
    startRunning();
  }
  

• 18.1 /** ... */

  // bad
  // make() returns a new element
  // based on the passed in tag name
  //
  // @param {String} tag
  // @return {Element} element
  function make(tag) {
  
    // ...
  
    return element;
  }
  
  // good
  /**
   * make() returns a new element
   * based on the passed-in tag name
   */
  function make(tag) {
  
    // ...
  
    return element;
  }
  

• 18.2 //

  // bad
  const active = true;  // is current tab
  
  // good
  // is current tab
  const active = true;
  
  // bad
  function getType() {
    console.log('fetching type...');
    // set the default type to 'no type'
    const type = this._type || 'no type';
  
    return type;
  }
  
  // good
  function getType() {
    console.log('fetching type...');
  
    // set the default type to 'no type'
    const type = this._type || 'no type';
  
    return type;
  }
  
  // also good
  function getType() {
    // set the default type to 'no type'
    const type = this._type || 'no type';
  
    return type;
  }
  

• 18.3 eslint: spaced-comment

  // bad
  //is current tab
  const active = true;
  
  // good
  // is current tab
  const active = true;
  
  // bad
  /**
   *make() returns a new element
   *based on the passed-in tag name
   */
  function make(tag) {
  
    // ...
  
    return element;
  }
  
  // good
  /**
   * make() returns a new element
   * based on the passed-in tag name
   */
  function make(tag) {
  
    // ...
  
    return element;
  }
  

• 18.4 FIXME TODO FIXME``TODO

• 18.5 // FIXME:

  class Calculator extends Abacus {
    constructor() {
      super();
  
      // FIXME: shouldn't use a global here
      total = 0;
    }
  }
  

• 18.6 // TODO:

  class Calculator extends Abacus {
    constructor() {
      super();
  
      // TODO: total should be configurable by an options param
      this.total = 0;
    }
  }
  

• 19.1 eslint: indent

  // bad
  function foo() {
  const name;
  }
  
  // bad
  function bar() {
  const name;
  }
  
  // good
  function baz() {
  const name;
  }
  

• 19.2 eslint: space-before-blocks

  // bad
  function test(){
    console.log('test');
  }
  
  // good
  function test() {
    console.log('test');
  }
  
  // bad
  dog.set('attr',{
    age: '1 year',
    breed: 'Bernese Mountain Dog',
  });
  
  // good
  dog.set('attr', {
    age: '1 year',
    breed: 'Bernese Mountain Dog',
  });
  

• 19.3 if, while eslint: keyword-spacing

  // bad
  if(isJedi) {
    fight ();
  }
  
  // good
  if (isJedi) {
    fight();
  }
  
  // bad
  function fight () {
    console.log ('Swooosh!');
  }
  
  // good
  function fight() {
    console.log('Swooosh!');
  }
  

• 19.4 eslint: space-infix-ops

  // bad
  const x=y+5;
  
  // good
  const x = y + 5;
  

• 19.5 eslint: eol-last

  // bad
  import { es6 } from './AirbnbStyleGuide';
    // ...
  export default es6;
  

  // bad
  import { es6 } from './AirbnbStyleGuide';
    // ...
  export default es6;
  
  

  // good
  import { es6 } from './AirbnbStyleGuide';
    // ...
  export default es6;
  

• 19.6 >2eslint: newline-per-chained-call no-whitespace-before-property

  // bad
  $('#items').find('.selected').highlight().end().find('.open').updateCount();
  
  // bad
  $('#items').
    find('.selected').
      highlight().
      end().
    find('.open').
      updateCount();
  
  // good
  $('#items')
    .find('.selected')
      .highlight()
      .end()
    .find('.open')
      .updateCount();
  
  // bad
  const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true)
      .attr('width', (radius + margin) * 2).append('svg:g')
      .attr('transform', `translate(${radius + margin},${radius + margin})`)
      .call(tron.led);
  
  // good
  const leds = stage.selectAll('.led')
      .data(data)
    .enter().append('svg:svg')
      .classed('led', true)
      .attr('width', (radius + margin) * 2)
    .append('svg:g')
      .attr('transform', `translate(${radius + margin},${radius + margin})`)
      .call(tron.led);
  
  // good
  const leds = stage.selectAll('.led').data(data);
  

• 19.7

  // bad
  if (foo) {
    return bar;
  }
  return baz;
  
  // good
  if (foo) {
    return bar;
  }
  
  return baz;
  
  // bad
  const obj = {
    foo() {
    },
    bar() {
    },
  };
  return obj;
  
  // good
  const obj = {
    foo() {
    },
  
    bar() {
    },
  };
  
  return obj;
  
  // bad
  const arr = [
    function foo() {
    },
    function bar() {
    },
  ];
  return arr;
  
  // good
  const arr = [
    function foo() {
    },
  
    function bar() {
    },
  ];
  
  return arr;
  

• 19.8 eslint: padded-blocks

  // bad
  function bar() {
  
    console.log(foo);
  
  }
  
  // also bad
  if (baz) {
  
    console.log(qux);
  } else {
    console.log(foo);
  
  }
  
  // good
  function bar() {
    console.log(foo);
  }
  
  // good
  if (baz) {
    console.log(qux);
  } else {
    console.log(foo);
  }
  

• 19.9 eslint: no-multiple-empty-lines

// bad
class Person {
  constructor(fullName, email, birthday) {
    this.fullName = fullName;


    this.email = email;


    this.setAge(birthday);
  }


  setAge(birthday) {
    const today = new Date();


    const age = this.getAge(today, birthday);


    this.age = age;
  }


  getAge(today, birthday) {
  // ..
  }
}

// good
class Person {
  constructor(fullName, email, birthday) {
    this.fullName = fullName;
    this.email = email;
    this.setAge(birthday);
	}

  setAge(birthday) {
    const today = new Date();
    const age = getAge(today, birthday);
    this.age = age;
  }

  getAge(today, birthday) {
  	// ..
  }
}

• 19.10 eslint: space-in-parens

  // bad
  function bar( foo ) {
    return foo;
  }
  
  // good
  function bar(foo) {
    return foo;
  }
  
  // bad
  if ( foo ) {
    console.log(foo);
  }
  
  // good
  if (foo) {
    console.log(foo);
  }
  

• 19.11 eslint: array-bracket-spacing

  // bad
  const foo = [ 1, 2, 3 ];
  console.log(foo[ 0 ]);
  
  // good
  const foo = [1, 2, 3];
  console.log(foo[0]);
  

• 19.12 eslint: object-curly-spacing

  // bad
  const foo = {clark: 'kent'};
  
  // good
  const foo = { clark: 'kent' };
  

• 19.13 100 eslint: max-len

  // bad
  const foo = jsonData && jsonData.foo && jsonData.foo.bar && jsonData.foo.bar.baz && jsonData.foo.bar.baz.quux && jsonData.foo.bar.baz.quux.xyzzy;
  
  // bad
  $.ajax({ method: 'POST', url: 'https://airbnb.com/', data: { name: 'John' } }).done(() => console.log('Congratulations!')).fail(() => console.log('You have failed this city.'));
  
  // good
  const foo = jsonData
    && jsonData.foo
    && jsonData.foo.bar
    && jsonData.foo.bar.baz
    && jsonData.foo.bar.baz.quux
    && jsonData.foo.bar.baz.quux.xyzzy;
  
  // good
  $.ajax({
    method: 'POST',
    url: 'https://airbnb.com/',
    data: { name: 'John' },
  })
    .done(() => console.log('Congratulations!'))
    .fail(() => console.log('You have failed this city.'));
  

• 19.14 { } eslint: block-spacing

  // bad
  function foo() {return true;}
  if (foo) { bar = 0;}
  
  // good
  function foo() { return true; }
  if (foo) { bar = 0; }
  

• 19.15 , , eslint: comma-spacing

  // bad
  var foo = 1,bar = 2;
  var arr = [1 , 2];
  
  // good
  var foo = 1, bar = 2;
  var arr = [1, 2];
  

• 19.16 eslint: computed-property-spacing

  // bad
  obj[foo ]
  obj[ 'foo']
  

var x = {[ b ]: a} obj[foo[ bar ]]

// good
obj[foo]
obj['foo']
var x = { [b]: a }
obj[foo[bar]]
```

• 19.17 eslint: func-call-spacing

  // bad
  func ();
  
  func
  ();
  
  // good
  func();
  

• 19.18 key value eslint: key-spacing

  // bad
  var obj = { "foo" : 42 };
  var obj2 = { "foo":42 };
  
  // good
  var obj = { "foo": 42 };
  

• 19.19 eslint: no-trailing-spaces

• 19.20 eslint: no-multiple-empty-lines

// bad - multiple empty lines
var x = 1;


var y = 2;

// bad - 2+ newlines at end of file
var x = 1;
var y = 2;


// bad - 1+ newline(s) at beginning of file

var x = 1;
var y = 2;

// good
var x = 1;
var y = 2;

• 20.1 eslint: comma-style

  // bad
  const story = [
      once
    , upon
    , aTime
  ];
  
  // good
  const story = [
    once,
    upon,
    aTime,
  ];
  
  // bad
  const hero = {
      firstName: 'Ada'
    , lastName: 'Lovelace'
    , birthYear: 1815
    , superPower: 'computers'
  };
  
  // good
  const hero = {
    firstName: 'Ada',
    lastName: 'Lovelace',
    birthYear: 1815,
    superPower: 'computers',
  };
  

• 20.2 : **** eslint: comma-dangle

  git diffs Babel

  // bad -  git diff
  const hero = {
       firstName: 'Florence',
  -    lastName: 'Nightingale'
  +    lastName: 'Nightingale',
  +    inventorOf: ['coxcomb chart', 'modern nursing']
  };
  
  // good -  git diff
  const hero = {
       firstName: 'Florence',
       lastName: 'Nightingale',
  +    inventorOf: ['coxcomb chart', 'modern nursing'],
  };
  

  // bad
  const hero = {
    firstName: 'Dana',
    lastName: 'Scully'
  };
  
  const heroes = [
    'Batman',
    'Superman'
  ];
  
  // good
  const hero = {
    firstName: 'Dana',
    lastName: 'Scully',
  };
  
  const heroes = [
    'Batman',
    'Superman',
  ];
  
  // bad
  function createHero(
    firstName,
    lastName,
    inventorOf
  ) {
    // does nothing
  }
  
  // good
  function createHero(
    firstName,
    lastName,
    inventorOf,
  ) {
    // does nothing
  }
  
  // good ( ... )
  function createHero(
    firstName,
    lastName,
    inventorOf,
    ...heroArgs
  ) {
    // does nothing
  }
  
  // bad
  createHero(
    firstName,
    lastName,
    inventorOf
  );
  
  // good
  createHero(
    firstName,
    lastName,
    inventorOf,
  );
  
  // good  ( ... )
  createHero(
    firstName,
    lastName,
    inventorOf,
    ...heroArgs
  )
  

• 21.1 **** eslint: semi

  JavaScript JavaScript JavaScript

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

// bad - 
const reaction = "No! Thats impossible!"
(async function meanwhileOnTheFalcon() {
  //  `leia`, `lando`, `chewie`, `r2`, `c3p0`
  // ...
}())

// bad -  `undefined`  ASI `return`
function foo() {
  return
    'search your feelings, you know it to be foo'
}

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

// good
const reaction = "No! Thats impossible!";
(async function meanwhileOnTheFalcon() {
  // handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
  // ...
}());

// good
function foo() {
  return 'search your feelings, you know it to be foo';
}

[](https://stackoverflow.com/questions/7365172/semicolon-before-self-invoking-function/7365214%237365214).

• 22.1

• 22.2 : eslint: no-new-wrappers

  // => this.reviewScore = 9;
  
  // bad
  const totalScore = new String(this.reviewScore); // typeof totalScore is "object" not "string"
  
  // bad
  const totalScore = this.reviewScore + ''; //  this.reviewScore.valueOf()
  
  // bad
  const totalScore = this.reviewScore.toString(); //  string
  
  // good
  const totalScore = String(this.reviewScore);
  

• 22.3 : Number parseInt string eslint: radix

  parseInt undefined 0 0x 0X 10 ECMAScript 3 2013

parseInt()

```javascript

const inputValue = '4';

// bad

const val = new Number(inputValue);

// bad

const val = +inputValue;

// bad

const val = inputValue >> 0;

// bad

const val = parseInt(inputValue);

// good
const val = Number(inputValue);

// good
const val = parseInt(inputValue, 10);
```

• 22.4 parseInt

  // good
  /**
   * parseInt 
   *  Bitshifting 
   */
  const val = inputValue >> 0;
  

• 22.5 : 64-32source) 32 Discussion. 32 2,147,483,647:

  2147483647 >> 0 //=> 2147483647
  2147483648 >> 0 //=> -2147483648
  2147483649 >> 0 //=> -2147483647
  

• 22.6 :

  const age = 0;
  
  // bad
  const hasAge = new Boolean(age);
  
  // good
  const hasAge = Boolean(age);
  
  // best
  const hasAge = !!age;
  

• 23.1 eslint: id-length

  // bad
  function q() {
    // ...
  }
  
  // good
  function query() {
    // ...
  }
  

• 23.2 eslint: camelcase

  // bad
  const OBJEcttsssss = {};
  const this_is_my_object = {};
  function c() {}
  
  // good
  const thisIsMyObject = {};
  function thisIsMyFunction() {}
  

• 23.3 eslint: new-cap

  // bad
  function user(options) {
    this.name = options.name;
  }
  
  const bad = new user({
    name: 'nope',
  });
  
  // good
  class User {
    constructor(options) {
      this.name = options.name;
    }
  }
  
  const good = new User({
    name: 'yup',
  });
  

• 23.4 eslint: no-underscore-dangle

  JavaScript API

  // bad
  this.__firstName__ = 'Panda';
  this.firstName_ = 'Panda';
  this._firstName = 'Panda';
  
  // good
  this.firstName = 'Panda';
  

• 23.5 this Function#bind

  // bad
  function foo() {
    const self = this;
    return function () {
      console.log(self);
    };
  }
  
  // bad
  function foo() {
    const that = this;
    return function () {
      console.log(that);
    };
  }
  
  // good
  function foo() {
    return () => {
      console.log(this);
    };
  }
  

• 23.6 export default A A.* import A

  // file 1 contents
  class CheckBox {
    // ...
  }
  export default CheckBox;
  
  // file 2 contents
  export default function fortyTwo() { return 42; }
  
  // file 3 contents
  export default function insideDirectory() {}
  
  // in some other file
  // bad
  import CheckBox from './checkBox'; // PascalCase import/export, camelCase filename
  import FortyTwo from './FortyTwo'; // PascalCase import/filename, camelCase export
  import InsideDirectory from './InsideDirectory'; // PascalCase import/filename, camelCase export
  
  // bad
  import CheckBox from './check_box'; // PascalCase import/export, snake_case filename
  import forty_two from './forty_two'; // snake_case import/filename, camelCase export
  import inside_directory from './inside_directory'; // snake_case import, camelCase export
  import index from './inside_directory/index'; // requiring the index file explicitly
  import insideDirectory from './insideDirectory/index'; // requiring the index file explicitly
  
  // good
  import CheckBox from './CheckBox'; // PascalCase export/import/filename
  import fortyTwo from './fortyTwo'; // camelCase export/import/filename
  import insideDirectory from './insideDirectory'; // camelCase export/import/directory name/implicit "index"
  // ^ supports both insideDirectory.js and insideDirectory/index.js
  

• 23.7 export-default

  function makeStyleGuide() {
    // ...
  }
  
  export default makeStyleGuide;
  

• 23.8 export ////

  const AirbnbStyleGuide = {
    es6: {
    }
  };
  
  export default AirbnbStyleGuide;
  

• 23.9

  // bad
  import SmsContainer from './containers/SmsContainer';
  
  // bad
  const HttpRequests = [
    // ...
  ];
  
  // good
  import SMSContainer from './containers/SMSContainer';
  
  // good
  const HTTPRequests = [
    // ...
  ];
  
  // also good
  const httpRequests = [
    // ...
  ];
  
  // best
  import TextMessageContainer from './containers/TextMessageContainer';
  
  // best
  const requests = [
    // ...
  ];
  

• 23.10

  2. const

> UPPERCASE_VARIABLES 

-  `const`    

• export (EXPORTED_OBJECT.key)

```javascript
// bad

const PRIVATE_VARIABLE = 'should not be unnecessarily uppercased within a file';

// bad

export const THING_TO_BE_CHANGED = 'should obviously not be uppercased';

// bad

export let REASSIGNABLE_VARIABLE = 'do not use let with uppercase variables';

```

// ---

// 

export const apiKey = 'SOMEKEY';

// 

export const API_KEY = 'SOMEKEY';

// ---

// bad - 
export const MAPPING = {
  KEY: 'value'

};

// good
export const MAPPING = {
  key: 'value'
};
```

Get-Set

• 24.1

• 24.2 JavaScript getters/setters getVal() setVal('hello')

  // bad
  class Dragon {
    get age() {
      // ...
    }
  
    set age(value) {
      // ...
    }
  }
  
  // good
  class Dragon {
    getAge() {
      // ...
    }
  
    setAge(value) {
      // ...
    }
  }
  

• 24.3 / boolean isVal() hasVal()

  // bad
  if (!dragon.age()) {
    return false;
  }
  
  // good
  if (!dragon.hasAge()) {
    return false;
  }
  

• 24.4 get() set()

  class Jedi {
    constructor(options = {}) {
      const lightsaber = options.lightsaber || 'blue';
      this.set('lightsaber', lightsaber);
    }
  
    set(key, val) {
      this[key] = val;
    }
  
    get(key) {
      return this[key];
    }
  }
  

• 25.1 DOM Backbone

  // bad
  $(this).trigger('listingUpdated', listing.id);
  
  // ...
  
  $(this).on('listingUpdated', (e, listingID) => {
    // do something with listingID
  });
  

  prefer:

  // good
  $(this).trigger('listingUpdated', { listingID: listing.id });
  
  // ...
  
  $(this).on('listingUpdated', (e, data) => {
    // do something with data.listingID
  });
  

jQuery

• 26.1 jQuery $

  // bad
  const sidebar = $('.sidebar');
  
  // good
  const $sidebar = $('.sidebar');
  
  // good
  const $sidebarBtn = $('.sidebar-btn');
  

• 26.2 jQuery

  // bad
  function setSidebar() {
    $('.sidebar').hide();
  
    // ...
  
    $('.sidebar').css({
      'background-color': 'pink'
    });
  }
  
  // good
  function setSidebar() {
    const $sidebar = $('.sidebar');
    $sidebar.hide();
  
    // ...
  
    $sidebar.css({
      'background-color': 'pink'
    });
  }
  

• 26.3 DOM $('.sidebar ul') > $('.sidebar > ul'). jsPerf

• 26.4 jQuery find

  // bad
  $('ul', '.sidebar').hide();
  
  // bad
  $('.sidebar').find('ul').hide();
  
  // good
  $('.sidebar ul').hide();
  
  // good
  $('.sidebar > ul').hide();
  
  // good
  $sidebar.find('ul').hide();
  

back to top

ECMAScript 5

• 27.1 Kangax ES5 .

ECMAScript 6+ (ES 2015+)

• 28.1 ES6

1. Arrow Functions
2. Classes
3. Object Shorthand
4. Object Concise
5. Object Computed Properties
6. Template Strings
7. Destructuring
8. Default Parameters
9. Rest
10. Array Spreads
11. Let and Const
12. Exponentiation Operator
13. Iterators and Generators
14. Modules

• 28.2 TC39 proposals TC39 stage 3

  , JavaScript JavaScript

• 29.1 Number.isNaN isNaN eslint: no-restricted-globals

  isNaN NaN true

  // bad
  isNaN('1.2'); // false
  isNaN('1.2.3'); // true
  
  // good
  Number.isNaN('1.2.3'); // false
  Number.isNaN(Number('1.2.3')); // true
  

• 29.2 Number.isFinite isFinite. eslint: no-restricted-globals

  Why?

  // bad
  isFinite('2e3'); // true
  
  // good
  Number.isFinite('2e3'); // false
  Number.isFinite(parseInt('2e3', 10)); // true
  

• 30.1 Yup.

  function foo() {
    return true;
  }
  

• 30.2 No, but seriously:
• stub mock
• Airbnb mocha tape
• 100%
• bug bug

• On Layout & Web Performance
• String vs Array Concat
• Try/Catch Cost In a Loop
• Bang Function
• jQuery Find vs Context, Selector
• innerHTML vs textContent for script text
• Long String Concatenation
• Are Javascript functions like map(), reduce(), and filter() optimized for traversing arrays?
• Loading...

back to top

Learning ES6

• Draft ECMA 2015 (ES6) Spec
• ExploringJS
• ES6 Compatibility Table
• Comprehensive Overview of ES6 Features

Read This

• Standard ECMA-262

Tools

• Code Style Linters
  • ESlint - Airbnb Style .eslintrc
  • JSHint - Airbnb Style .jshintrc
  • JSCS - Airbnb Style Preset

Other Style Guides

• Google JavaScript Style Guide
• jQuery Core Style Guidelines
• Principles of Writing Consistent, Idiomatic JavaScript

Other Styles

• Naming this in nested functions - Christian Johansen
• Conditional Callbacks - Ross Allen
• Popular JavaScript Coding Conventions on GitHub - JeongHoon Byun
• Multiple var statements in JavaScript, not superfluous - Ben Alman

Further Reading

• Understanding JavaScript Closures - Angus Croll
• Basic JavaScript for the impatient programmer - Dr. Axel Rauschmayer
• You Might Not Need jQuery - Zack Bloom & Adam Schwartz
• ES6 Features - Luke Hoban
• Frontend Guidelines - Benjamin De Cock

Books

• JavaScript: The Good Parts - Douglas Crockford
• JavaScript Patterns - Stoyan Stefanov
• Pro JavaScript Design Patterns - Ross Harmes and Dustin Diaz
• High Performance Web Sites: Essential Knowledge for Front-End Engineers - Steve Souders
• Maintainable JavaScript - Nicholas C. Zakas
• JavaScript Web Applications - Alex MacCaw
• Pro JavaScript Techniques - John Resig
• Smashing Node.js: JavaScript Everywhere - Guillermo Rauch
• Secrets of the JavaScript Ninja - John Resig and Bear Bibeault
• Human JavaScript - Henrik Joreteg
• Superhero.js - Kim Joar Bekkelund, Mads Mobk, & Olav Bjorkoy
• JSBooks - Julien Bouquillon
• Third Party JavaScript - Ben Vinegar and Anton Kovalyov
• Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript - David Herman
• Eloquent JavaScript - Marijn Haverbeke
• You Don't Know JS: ES6 & Beyond - Kyle Simpson

Blogs

• JavaScript Weekly
• JavaScript, JavaScript...
• Bocoup Weblog
• Adequately Good
• NCZOnline
• Perfection Kills
• Ben Alman
• Dmitry Baranovskiy
• Dustin Diaz
• nettuts

Podcasts

• JavaScript Air
• JavaScript Jabber

back to top

In the Wild

This is a list of organizations that are using this style guide. Send us a pull request and we'll add you to the list.

• 123erfasst: 123erfasst/javascript
• 3blades: 3Blades
• 4Catalyzer: 4Catalyzer/javascript
• Aan Zee: AanZee/javascript
• Adult Swim: adult-swim/javascript
• Airbnb: airbnb/javascript
• AltSchool: AltSchool/javascript
• Apartmint: apartmint/javascript
• Ascribe: ascribe/javascript
• Avalara: avalara/javascript
• Avant: avantcredit/javascript
• Axept: axept/javascript
• BashPros: BashPros/javascript
• Billabong: billabong/javascript
• Bisk: bisk
• Bonhomme: bonhommeparis/javascript
• Brainshark: brainshark/javascript
• CaseNine: CaseNine/javascript
• Cerner: Cerner
• Chartboost: ChartBoost/javascript-style-guide
• ComparaOnline: comparaonline/javascript
• Compass Learning: compasslearning/javascript-style-guide
• DailyMotion: dailymotion/javascript
• DoSomething: DoSomething/eslint-config
• Digitpaint digitpaint/javascript
• Drupal: www.drupal.org
• Ecosia: ecosia/javascript
• Evernote: evernote/javascript-style-guide
• Evolution Gaming: evolution-gaming/javascript
• EvozonJs: evozonjs/javascript
• ExactTarget: ExactTarget/javascript
• Expensify Expensify/Style-Guide
• Flexberry: Flexberry/javascript-style-guide
• Gawker Media: gawkermedia
• General Electric: GeneralElectric/javascript
• Generation Tux: GenerationTux/javascript
• GoodData: gooddata/gdc-js-style
• GreenChef: greenchef/javascript
• Grooveshark: grooveshark/javascript
• Grupo-Abraxas: Grupo-Abraxas/javascript
• Honey: honeyscience/javascript
• How About We: howaboutwe/javascript
• Huballin: huballin
• HubSpot: HubSpot/javascript
• Hyper: hyperoslo/javascript-playbook
• InterCity Group: intercitygroup/javascript-style-guide
• Jam3: Jam3/Javascript-Code-Conventions
• JeopardyBot: kesne/jeopardy-bot
• JSSolutions: JSSolutions/javascript
• Kaplan Komputing: kaplankomputing/javascript
• KickorStick: kickorstick
• Kinetica Solutions: kinetica/javascript
• LEINWAND: LEINWAND/javascript
• Lonely Planet: lonelyplanet/javascript
• M2GEN: M2GEN/javascript
• Mighty Spring: mightyspring/javascript
• MinnPost: MinnPost/javascript
• MitocGroup: MitocGroup/javascript
• ModCloth: modcloth/javascript
• Money Advice Service: moneyadviceservice/javascript
• Muber: muber
• National Geographic: natgeo
• Nimbl3: nimbl3/javascript
• Nulogy: nulogy/javascript
• Orange Hill Development: orangehill/javascript
• Orion Health: orionhealth/javascript
• OutBoxSoft: OutBoxSoft/javascript
• Peerby: Peerby/javascript
• Pier 1: Pier1/javascript
• Qotto: Qotto/javascript-style-guide
• Razorfish: razorfish/javascript-style-guide
• reddit: reddit/styleguide/javascript
• React: facebook.github.io/react/contributing/how-to-contribute.html#style-guide
• REI: reidev/js-style-guide
• Ripple: ripple/javascript-style-guide
• Sainsburys Supermarkets: jsainsburyplc
• SeekingAlpha: seekingalpha/javascript-style-guide
• Shutterfly: shutterfly/javascript
• Sourcetoad: sourcetoad/javascript
• Springload: springload
• StratoDem Analytics: stratodem/javascript
• SteelKiwi Development: steelkiwi/javascript
• StudentSphere: studentsphere/javascript
• SwoopApp: swoopapp/javascript
• SysGarage: sysgarage/javascript-style-guide
• Syzygy Warsaw: syzygypl/javascript
• Target: target/javascript
• TheLadders: TheLadders/javascript
• The Nerdery: thenerdery/javascript-standards
• T4R Technology: T4R-Technology/javascript
• VoxFeed: VoxFeed/javascript-style-guide
• WeBox Studio: weboxstudio/javascript
• Weggo: Weggo/javascript
• Zillow: zillow/javascript
• ZocDoc: ZocDoc/javascript

back to top

Translation

This style guide is also available in other languages:

• Brazilian Portuguese: armoucar/javascript-style-guide
• Bulgarian: borislavvv/javascript
• Catalan: fpmweb/javascript-style-guide
• Chinese (Simplified): lin-123/javascript
• Chinese (Traditional): jigsawye/javascript
• French: nmussy/javascript-style-guide
• German: timofurrer/javascript-style-guide
• Italian: sinkswim/javascript-style-guide
• Japanese: mitsuruog/javascript-style-guide
• Korean: ParkSB/javascript-style-guide
• Russian: leonidlebedev/javascript-airbnb
• Spanish: paolocarrasco/javascript-style-guide
• Thai: lvarayut/javascript-style-guide
• Turkish: eraycetinay/javascript
• Ukrainian: ivanzusko/javascript
• Vietnam: hngiang/javascript-style-guide

The JavaScript Style Guide Guide

• Reference

Chat With Us About JavaScript

• Find us on gitter.

Contributors

• View Contributors

License

(The MIT License)

Copyright (c) 2012 Airbnb

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

back to top

Amendments

We encourage you to fork this guide and change the rules to fit your teams style guide. Below, you may list some amendments to the style guide. This allows you to periodically update your style guide without having to deal with merge conflicts.

};