ash106 / javascript

How we like to JavasScript at Unsplash.

Unsplash JavaScript Style Guide

How we like to JavasScript at Unsplash.

Table of Contents

• Airbnb JavaScript Style Guide
• Exceptions
• Additional Guidelines
• Naming Conventions
• References

Airbnb JavaScript Style Guide

Our guide is based off the excellent Airbnb JavaScript Style Guide, with a few exceptions and additional guidelines.

Exceptions

Objects

• Do not use trailing commas. comma-dangle

  It breaks your code in IE8.

  // bad
  const user = {
    firstName: 'Han',
    lastName: 'Solo',
  };
  
  // good
  const user = {
    firstName: 'Han',
    lastName: 'Solo'
  };

Strings

• Limit your lines to 80 characters. max-len

  Helps with readability and code reviews.

  // bad
  const user = { name: 'Han Solo', 'best-friend': 'Chewie', ship: 'Millennium Falcon', affiliation: 'Rebel Alliance' };
  
  // good
  const user = {
    name: 'Han Solo',
    'best-friend': 'Chewie',
    ship: 'Millennium Falcon',
    affiliation: 'Rebel Alliance'
  };

Variables

• Do not reference global variables. no-undef

  Less globals, less headaches

  // bad
  $(window).on("scroll", doSomething);
  
  // good
  import $ form "jquery";
  
  $(wdinow).on("scroll", doSomething);

Comparison Operators & Equality

• Variables should always come before literal values in conditions. yoda

  More natural way to describe the comparison.

  // bad
  if ('Han' === firstName) {
    // ...
  }
  
  // good
  if (firstName === 'Han') {
    // ...
  }

Whitespace

• Avoid leaving multiple empty lines between statements. no-multiple-empty-lines

  Consistent spacing across files

  // bad
  function someFunction() {
    // ...
  }
  
  
  someFunction();
  
  // good
  function someFunction() {
    // ...
  }
  
  someFunction();

JSX

• Always use double-quotes in jsx. jsx-quotes

  It's like html and clearly distinguishes HTML strings from JavaScript strings.

  // bad
  render(firstName) {
    return (
      <div id='i-am'>
        {`I'm ${firstName}!`}
      </div>
    );
  }
  
  // good
  render(firstName) {
    return (
      <div id='i-am'>
        {`I'm ${firstName}!`}
      </div>
    );
  }

Additional Guidelines

Objects

• Avoid Object mutations with Object.assign().

  // bad
  const user = {
    'name': 'Han Solo'
  };
  user['best-friend'] = 'Chewie';
  
  const user {
    'name': 'Han Solo'
  };
  
  const userWithBestie = Object.assign({}, user, {
    'best-friend': 'Chewie'
  });

Functions

• Only write 'Pure' functions

  They are predictable, testable and don't mutate the values passed to them.
  Learn more about Pure and Impure Functions.

  // bad
  function square(x) {
    someSideEffect(x);
    return x * x;
  }
  
  // good
  function square(x) {
    return x * x;
  }

• Always a strict mode directive at the beginning of a script/file. strict

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

  'use strict';
  
  function someFunction() {
    // ...
  }

Arrays

• Use Array#concat or spread to add items to an Array.

  Array#push is a mutator method.
  Learn more about avoiding Array mutations

  // bad
  const range = [1];
  range.push(2);
  
  // good
  const range = [1];
  const biggerRange = [].concat(range, [2]);
  
  // good es2015
  const range = [1];
  const biggerRange = [...range, 2];

Blocks

• Always use braces and multiple lines for block statements

  // bad
  if (isValid) return console.log('Is valid');
  
  // good
  if (isValid) {
    return console.log('Is valid');
  }

Comments

• Use // for single and multi-line comments

  Less thinking, more typing.

  // bad
  /*
    This is a multiline
    comment.
  */
  function someFunction() {
    // ...
  }
  // good
  
  // This is a multiline
  // comment.
  function someFunction() {
    // ...
  }

Naming Conventions

• Always use camelCase when naming variables

  // bad
  const first_name = 'Han Solo';
  
  // good
  const firstName = 'Han Solo';

• Suffix Observable variables names with $.

  const input = document.getElementById('input');
  
  // bad
  const keyup = Rx.Observable.fromEvent(input, 'keyup');
  
  // good
  const keyup$ = Rx.Observable.fromEvent(input, 'keyup');

• Prefix boolean state variable names with is or has.

  const photos = [1, 2];
  
  // bad
  const photos = !!photos.length;
  
  // good
  const hasPhotos = !!photos.length;
  
  // bad
  const visible = !!photos.length;
  
  // good
  const isVisible = !!photos.length;

References

ES2015

• Understanding ES6

Arrays

• Array#each
• Array#map
• Array#filter

Functions

• Function declaration hoisting

Coercion

• JavaScript Coercion

Blocks

• One True Brace Style

Promises

• We have a problem with Promises