JavaScript Style GuideBy

Ahmed ElbasselSkype: ahmed_elbassel

Email: elbassel.n13@gmail.comReferences 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