JavaScript Style Guide By Ahmed Elbassel Skype: ahmed_elbassel Email: [email protected] References at the end of the slides
Style guide What is Style guide? A style guide (or manual of style ) is a set of standards for the writing and design of documents, either for general use or for a specific publication, organization, or field. (It is often called a style sheet , though that term has other meanings .) Why Style guide? Best practices. More readable code Easy maintenance.
Style guide Single Style guide? No, there are a lot of style guides, ex Airbnb Javascript Style Guide : The most famous one Google JavaScript Style Guide JQuery JavaScript Style Guide W3Schools JavaScript Style Guide Node Style Guide We will focus on Airbnb, and discuss some of them.
Style guide - Airbnb References Use const or let for all of your references; avoid using var var : is a function-scoped but const and let is a block scope.
Style guide - Airbnb Objects: Use the literal syntax for object creation. Don't use reserved words as keys . Use object method shorthand. Group your shorthand properties at the beginning of your object declaration. Why? It's easier to tell which properties are using the shorthand.
Style guide - Airbnb Arrays Use the literal syntax for array creation . Use Array#push instead of direct assignment to add items to an array . Use array spreads ... to copy arrays .
Style guide - Airbnb Destructuring : Use array destructuring . jscs : requireArrayDestructuring Use object destructuring for multiple return values, not array destructuring . jscs : disallowArrayDestructuringReturn Why? You can add new properties over time or change the order of things without breaking call sites .
Style guide - Airbnb Strings: Use single quotes '' for strings. eslint : quotes jscs : validateQuoteMarks Never use eval () on a string, it opens too many vulnerabilities . Do not unnecessarily escape characters in strings. eslint : no-useless-escape Why? Backslashes harm readability, thus they should only be present when necessary.
Style guide - Airbnb Functions: Use named function expressions instead of function declarations . Why? Function declarations are hoisted,so you can use it before you it is defined in the file, that harms readbility and maintainability. Wrap immediately invoked function expressions in parentheses Spacing in a function signature.
Style guide - Airbnb Arrow Functions: When you must use function expressions (as when passing an anonymous function), use arrow function notation . Comparison Operators & Equality: Use === and !== over == and != == and !=: do evaluation before compare === and !==: do compare direct Ternaries should not be nested and generally be single line expressions.
Style guide - Airbnb Commas: Leading commas: Nope . Comments: Use /** ... */ for multi-line comments . Use // for single line comments . Use // FIXME: to annotate problems . Use // TODO: to annotate solutions to problems.
Style guide - Airbnb Variables Always use const to declare variables. Use one const declaration per variable . Why? It's easier to add new variable declarations this way, forget the pain of writing “,” or “;” Group all your consts and then group all your lets.
Style guide - Airbnb More info about Airbnb JavaScript Style Guide: https:// github.com/airbnb/javascript