Airbnb Javascript style guide — Key takeaways
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
