Given at the CCD session at RocketInternet - 10-05-2017

1. Airbnb JavaScript Style Guide() {

2. Code is first for
human…
not computer
“

3. Why
Style Guide?
Best practices.
More readable code
Easy maintenance

4. Single standard?
No, like a lot
• Airbnb
• Google
• JQuery
• W3Schools
• Node
• StandardJS
● We focus on Airbnb

5. References
● Use const or let for all of your
references - avoid using var
● const and let only exist in the
blocks they are defined in
● var is a function-scoped

6. ● Use one const or let declaration
per variable
● Don't chain variable assignments
● Avoid using ++, --
Variables

7. ● Literal syntax for object creation
● Don't use reserved words as keys
● Use object method shorthand
● Use property value shorthand
● Group your shorthand properties
at the beginning of your object
declaration.
Objects

8. ● Use the literal syntax for array
creation
● Use Array#push instead of direct
assignment to add items to an
array
● Use spread operator ... to copy
arrays
Arrays

9. ● Use single quotes '' for strings.
● Strings that cause the line to go
over 100 characters should not be
wrapped by concatenation
● When building up strings, use
template instead of concatenation
● Do not unnecessarily escape
characters in strings as
backslashes harm readability
Strings

10. Almost there...

11. ● Use named function expressions
instead of function declarations
Function declarations are hoisted -- easy to use
before it is defined in the file -- harms
readability and maintainability
● Name the expression
● Wrap immediately invoked
function expressions in
parentheses
● Use default parameter syntax
rather than mutating function
arguments
Functions

12. ● Put default parameters last
● Spacing in a function signature
● Never mutate parameters
● Never reassign parameters
● Multiline signatures should:
○ each item on a line by itself
○ trailing comma on the last
item
Functions

13. ● Use === and !== over
== and !=
● Use shortcuts for booleans, but
explicit comparisons for strings
and numbers
● Ternaries should not be nested
and generally be single line
expressions
● Avoid unneeded ternary
statements
Comparison &
Equality

14. ● Don't use iterators
● Prefer higher-order functions
map() / every() / filter() / …
and
Object.keys() / Object.values() / ...
over loops like for-in, as this
enforces immutability
Iterators

15. ● Always comma-dangle (cleaner
diff), even in function definition
● /** ... */ multi-line comments
● // for single line comments
● // FIXME: to annotate problems
● // TODO: to annotate solutions
Commas,
Comments

16. Guidelines use of EcmaScript 2015
features
Modules import/export
Class & extends
String template notation
Arrow functions
Furthermore...
Linters
ESlint - Airbnb Style .eslintrc
JSHint - Airbnb Style .jshintrc
JSCS - Airbnb Style Preset
CSS
Airbnb CSS / Sass Styleguide

17. References
● https://github.com/airbnb/javascript