Airbnb Javascript style guide — Key takeaways

Kanishk Agrawal
May 4, 2019 · 5 min read

What is a style guide?

  • A style guide is a set of standards that outline how code should be written and organized.
  • A style guide contains general rules about “how to write” code, e.g. which quotes to use, how many spaces to indent, where to put line breaks, etc. A lot of minor things.

Why a style guide is must?

  • Each developer writes code differently. That’s fine, until we are working on our code.
  • As count of developers increase 5->10->20->50, things get messy when all are working on common codebase.
  • Style guides are created so new developers can get up to speed on a code base quickly, and then write code that other developers can understand quickly and easily!

“All code in any code-base should look like a single person typed it, no matter how many people contributed.”

AIRBNB STYLE GUIDE

In the blog, I have only included not-so-common practices for a Javascript developer. This would give you an thorough understand about What and Why in Javascript? For 100% complete guide, one must check out the link at the bottom.

Let’s get started.

Expected style in casing for Javascript and CSS:

  • CSS: hyphens
  • JS: camelCase
  • CSS class names should be hyphen separated.
  • Either use hexcode or rgb standard for color scheme throughout your application.
  • Avoid using px, rem, em at once Choose one. Prefer em.
  • font-weight: 400 ? What good is it for? Eliminate useless CSS.
  • Read about mixins for SASS.

Strings in HTML vs JS

  • Double quotes in HTML
  • Single quotes in JS

When using multiple selectors in a rule declaration, give each selector its own line.

Object.assign( ) v/s {…}

First case not only mutates the object, would also lead to unforeseen errors and bugs. Well third wins over second over leaner code and added syntactic sugar.

Read more about spread operators : https://bit.ly/2vEsnKq

Do Not mutate an array

No more for loops are required to copy the items of an array. Three dots would do the trick.

Group your shorthand properties at the beginning of your object declaration.

Makes it simple to read and make decisions. Makes things simpler in a complex nested object structure.

Destructuring

Template literals bridges not only HTML and Javascript, also must be used for above case. We do pass an object consisting of n keys to another function (say), destructuring the keys in the function declaration would not only make code less to error prone, would also avoid making temporary unwanted variables(first case). Adds readability , as can be seen in the third case.

DO NOT break a loooooooooooong string

Simple reason. Makes code more searchable & easy to work with. First and second case eliminates the possibility of searching the code. Adding / or + would put an end to code readability.

Use template strings for string concatenation

Unarguably one of the best ES6 features. Must STOP using any of the first three ways.

  • Easy to read
  • Simple to implement
  • Concise syntax

Always put default parameters last

Write concise and leaner arrow functions

  • Parenthesis are not required if only single parameter is there in a function call. More than one, parenthesis are must.
  • return statement can be avoided with curly braces if only one line is present in the function body.

Wrap in parenthesis if expression spans in multiple lines

  • For better visibility where our function starts & ends
  • Clear to read

Object direct access over computed access.

In my experience,

  • Less prone to errors
  • Faster
  • Know what to expect

Interesting

  • Shortcuts ONLY for booleans.
  • Explicit comparisons for Strings & Numbers

No nested ternaries

  • It is OKAY to write long control statements.
  • AIM should be to make it readable for future developers instead to write short & difficult to understand code.

Control statements

  • If control statement gets too long, each grouped condition should be put in new line.
  • Logical operator should begin the new line.
    - Follows a similar pattern for chaining.
    - Improves readability, easier to understand logic.

Comments

  • Use /* */ for multiline comments instead of //
  • Place single line comments above subject of the comment and start comment with space.
  • Use FIXME to annotate the problems
  • Use TODO to annotate the solutions

Do not quote ‘’ keys in the objects

Single quotes in the keys for an object are not required. Hence, should not be used.

Spaces in brackets || parenthesis

  • Add spaces in Curly brackets
  • No space in square brackets and parentheses.

What could make a better codebase?

  • Use spread operators over Object.assign
  • Use spread operators to copy the arrays instead of looping through.
  • Exploit array operations to the fullest. [ every, some, filter, reduce, map ]
  • Avoid return statements for one liners arrow functions
  • Acronyms always should be in capitals. ( Eg. HTTP, SMS )

Did I miss something? Let me know in the comments.

Thanks.

Complete guide: https://github.com/airbnb/javascript

Docon

At Docon, we strive to enable a connected healthcare…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store