Guide to Airbnb JavaScript Style Guide

The contents of the article include:

  1. Types
  2. References
  3. Objects
  4. Arrays
  5. Destructuring
  6. Strings
  7. functions
  8. Arrow Functions
  9. Constructors
  10. Modules
  11. Iterators and Generators
  12. Properties
  13. Variables
  14. Hoisting
  15. Comparison Operators & Equality
  16. Blocks
  17. Comments
  18. White space
  19. Commas
  20. Semicolons
  21. Type Casting & Coercion
  22. Naming Conventions
  23. Accessors
  24. Events
  25. jQuery
  26. ECMAScript 5 Compatibility
  27. ECMAScript 6 Styles
  28. Testing
  29. Performance
  30. Resources
  31. In the Wild
  32. Translation
  33. The JavaScript Style Guide Guide
  34. Chat With Us About JavaScript
  35. Contributors
  36. License

Types

  • 1.1 Primitives : When you access primitive data types, you work directly with the value of the variable (join value).
    • string
    • number
    • boolean
    • null
    • undefined

  • 1.2 Complex : When you work with complex data types, you work indirectly with the value of the variable through its memory address (reference).
    • object
    • array
    • function

References

  • 2.1 Use const for constant declaration; Avoid using var .

> When using cost we cannot change its value. This helps us prevent possible errors

  • 2.2 To change parameters, use let and avoid using var .

> Because let it only means within a certain range (Block-Scope), unlike var means in a function (Funciton-Scope).

  • 2.3 let and const are valid within a certain range (Block-Scope).

Objects

  • 3.1 Use {} to create an object.
  • 3.2 Do not use default keywords to do attributes.
  • 3.3 Use words that are synonymous with dedicated art.
  • 3.4 Use attribute names when creating objects with dynamic attribute names.

> This helps us define all the properties of the object only once.

  • 3.5 Use the Property Value Shorthand method.

  • 3.6 Use shortened declarations for properties (Object Method.

> Short and easy-to-understand spellings.

  • 3.7 Group the shortened declared attribute set on the top of each object.

Arrays

  • 4.1 Use [] to declare an array.
  • 4.2 Use the Array#push to add a word part to the array instead of adding it directly.
  • 4.3 Use ... (Spreads) to copy the array. // Not good
  • 4.4 Use Array#from to convert from object to array.

Destructuring

  • 5.1 Use Destructuring to convert the value of each object to an object.

    This reduces the use of temporary variables to store properties in the object.

  • 5.2 Use destructuring for the array.
  • 5.3 Using destructuring for multiple return values, do not use destructuring array.

> This usage helps us to add a new attribute or sort the return order without affecting other functions.

Strings

  • 6.1 Use single strobe oil '' for string.
  • 6.2 When the string is longer than 100 characters, split multiple lines and rejoin the string.
  • 6.3 Note: Applying multiple strings will affect performance. jsPerf & Discussion .
  • 6.4 Use template instead of using string concatenation.

> Using template will help us to read, short syntax.

  • 6.5 Never use eval() for strings.

functions

  • 7.1 Using Function declarations instead of Function expressions .

> Function declarations are clearly named, so it can be defined in call stacks . Always use Arrow Functions with Function expressions .

  • 7.2 Hàm expressions:
  • 7.3 Do not declare a function when using conditional statements (if, while, …). Instead save the function into a specific variable.
  • 7.4 Note: ECMA-262 defines a block as a list of commands. Read ECMA-262's note on this issue .
  • 7.5 Do not declare the parameters of the function with the same arguments .

7.6 Do not use arguments , use ... (Spreads) instead.

> ... will convert the arguments into an array of values.

  • 7.7 Use default parameter transfer. " Javascript
  • 7.8 Avoid putting it as default parameters.

  • 7.9 Always set the default parameter at the end. " Javascript
  • 7.10 Never use a method to create a function using new Function .

Arrow Functions

  • 8.1 Once you use Function expressions ( Anonymous function ), you should use Arrow Functions or => . " Javascript
  • 8.2 If only one calculation statement is used, then {} cannot be used, but when there are multiple statements, use {} and use return to return the final result.
  • 8.3 When there are multiple strings, there are many lines that should enclose that string in () . " Js
  • 8.4 If there is only one statement in the function, it may not need to use () . " Js

Constructors

  • 9.1 Always use class . Don't use prototype . " Javascript
  • 9.2 Use extends to create an inheritance class.
  • 9.3 The method can return this .
  • 9.4 It is possible to extend the toString() .

Modules

  • 10.1 Always use ( import / export ) when working with modules replace the traditional modules require/module.exports . " Javascript
  • 10.3 Do not use export directly from import .

> Because the import and export splits make reading more meaningful.

Iterators and Generators

  • 11.1 Do not use a loop instead of using map() or reduce instead of for-of .
  • 11.2 Do not use generators at the present time.

> There was an error when switching to ES5 .

Properties

  • 12.1 Use . when accessing a variable.
  • 12.2 Use [] to access properties for variables.

Variables

  • 13.1 Always use const to declare a variable.
  • 13.2 Use each const for declaring a variable.
  • 13.3 Remove the variable group by const s and let s.
  • 13.4 Declare variables when necessary and place them in the right place.

> let and const are block scoped and not function scoped.

Hoisting

  • 14.1 var is declared at the beginning of the variable or function. const and let are used with a new concept Temporal Dead Zones (TDZ) . typeof is no longer safe .
  • 14.2 Anonymous function is declared with a variable.
  • 14.3 Named Function expressions - This notification works by function name. The result is like the previous example.
  • 14.4 Function declarations - For functions without input values ​​for variables.

Comparison Operators & Equality

  • 15.1 Use === and !== instead of == and != .
  • 15.2 When using if the object types will be converted to Boolean :
    • Objects become true
    • Undefined changed to false
    • Null changes to false
    • Booleans turn into the value of the boolean
    • Numbers changes to false If +0, -0, or NaN , otherwise true
    • Strings change to false If the string is string '' , otherwise true

  • 15.3 Short use.
  • 15.4 Truth Equality and JavaScript by Angus Croll.

Blocks

  • 16.1 Use {} .
  • 16.2 If you use more conditional sentences if and else , put else along the line with a } of if .

Comments

  • 17.1 Use /** ... */ when you need a lot of comments. Should be fully described as types , values of many parameters, what is the return value.
  • 17.2 Use // when a single line comment. How to line a line with the preceding statement when using // to comment.
  • 17.3 Add a prefix before FIXME or TODO so that people on the same team can read and understand the code. FIXME -- need to figure this out or TODO -- need to implement .
  • 17.4 Use // FIXME: to annotate problems.
  • 17.5 Use // TODO: note how to solve the problem.

White space

  • 18.1 Using 2 spaces instead of 4.
  • 18.2 Add space before { .
  • 18.3 Add a gap after the conditional sentences ( if , while ...). There should be no gap in Function Arguments .
  • 18.4 For calculations ( + , - , * , / ...) add distances before and after those calculations.
  • 18.5 Add a blank line when the file ends.

  • 18.6 Using indentation when calling multiple methods at the same time. " Javascript
  • 18.7 Add a blank line after {} and start the next statement.

Commas

  • 19.1 Use , at the beginning: No
  • 19.2 Add trailing comma : Yup.

Semicolons

  • 20.1 Yup.

Type Casting & Coercion

  • 21.1 Apply conversion types.
  • 21.2 Strings:
  • 21.3 Numbers: Use Number for casting and parseInt always use with radix when switching from number to string.
  • 21.4 Use Bitshift Reason , and comment fully when using Bitshift
  • 21.5 Note: Be careful when using Bitshift . Bitshift always returns 32-bit integer ( source ). When the number is greater than 32 bits some errors will result. Discussion . The largest 32-bit Int is 2,147,483,647:
  • 21.6 Booleans:

Naming Conventions

  • 22.1 Should fully describe a function name or variable.
  • 22.2 Use camelCase naming for objects, variables, functions, inheritance …
  • 22.3 Use PascalCase type to name Class or Constructor .
  • 22.4 Use _ at the beginning of the variable name when it is a private type.
  • 22.5 Use the Arrow function ( => ) or Function#bind .
  • 22.6 When export a single class , the file name should match the class name.
  • 22.7 Use camelCase when the default export function. The file name and function name should be similar.
  • 22.8 Use PascalCase type when export a singleton / function library / bare object .

Accessors

  • 23.1 Accessor functions for unnecessary attributes.
  • 23.2 When creating an accessor functions use the getVal() structure and setVal('hello') .
  • 23.3 If the attribute is boolean , use isVal() and hasVal() . "` Javascript
  • 23.4 You can override two default functions get() and set() , but must be consistent.

Events

  • 24.1 Use hash value instead of raw value when passing parameters to events .

    prefer:

jQuery

  • 25.1 Add $ prefix when that variable is generated from jQuery .
  • 25.2 Cache jQuery .
  • 25.3 Use Cascading $('.sidebar ul') or type parent > child $('.sidebar > ul') . jsPerf
  • 25.4 Use find .

ECMAScript 5 Compatibility

ECMAScript 6 Styles

  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. Iterators and Generators
  13. Modules

Testing

  • 28.1 Yup.
  • 28.2 No, but seriously :
  • Always write test !
  • Split function.
  • Be careful when using stubs and mocks .
  • mocha and tape are used in Airbnb .
  • Ensure all test are running well (100% coverage).
  • When fixing an error, write down the test .

Performance

RESOURCES

Study ES6

Should read

Tools

Other Styles Guide

Other Styles

Read more

Sách

In the Wild

Danh sách các trang wed sử dụng style guide của Airbnb.

ITZone via Github

Người thực hiện giangpii

Share the news now