javascript

Airbnb JavaScript Style Guide() { *A mostly reasonable approach to JavaScript* > **Note**: this guide assumes you are using Babel, and requires that you use babel-preset-airbnb or the equivalent. It also assumes you are installing shims/polyfills in your app, with airbnb-browser-shims or the equivalent. This guide is available in other languages too. See Translation Other Style Guides - ES5 (Deprecated) - React - CSS-in-JavaScript - CSS & Sass - Ruby Table of Contents 1. Types 1. References 1. Objects 1. Arrays 1. Destructuring 1. Strings 1. Functions 1. Arrow Functions 1. Classes & Constructors 1. Modules 1. Iterators and Generators 1. Properties 1. Variables 1. Hoisting 1. Comparison Operators & Equality 1. Blocks 1. Control Statements 1. Comments 1. Whitespace 1. Commas 1. Semicolons 1. Type Casting & Coercion 1. Naming Conventions 1. Accessors 1. Events 1. jQuery 1. ECMAScript 5 Compatibility 1. ECMAScript 6+ (ES 2015+) Styles 1. Standard Library 1. Testing 1. Performance 1. Resources 1. In the Wild 1. Translation 1. The JavaScript Style Guide Guide 1. Chat With Us About JavaScript 1. Contributors 1. License 1. Amendments Types <a name="types--primitives"></a><a name="1.1"></a> - 1.1 **Primitives**: When you access a primitive type you work directly on its value. - `string` - `number` - `boolean` - `null` - `undefined` - `symbol` - `bigint` <br /> - Symbols and BigInts cannot be faithfully polyfilled, so they should not be used when targeting browsers/environments that don’t support them natively. <a name="types--complex"></a><a name="1.2"></a> - 1.2 **Complex**: When you access a complex type you work on a reference to its value. - `object` - `array` - `function` <br /> **⬆ back to top** References <a name="references--prefer-const"></a><a name="2.1"></a> - 2.1 Use `const` for all of your references; avoid using `var`. eslint: `prefer-const`, `no-const-assign` > Why? This ensures that you can’t reassign your references, which can lead to bugs and difficult to comprehend code. <a name="references--disallow-var"></a><a name="2.2"></a> - 2.2 If you must reassign references, use `let` instead of `var`. eslint: `no-var` > Why? `let` is block-scoped rather than function-scoped like `var`. <a name="references--block-scope"></a><a name="2.3"></a> - 2.3 Note that both `let` and `const` are block-scoped, whereas `var` is function-scoped. In the above code, you can see that referencing `a` and `b` will produce a ReferenceError, while `c` contains the number. This is because `a` and `b` are block scoped, while `c` is scoped to the containing function. **⬆ back to top** Objects <a name="objects--no-new"></a><a name="3.1"></a> - 3.1 Use the literal syntax for object creation. eslint: `no-new-object` <a name="es6-computed-properties"></a><a name="3.4"></a> - 3.2 Use computed property names when creating objects with dynamic property names. > Why? They allow you to define all the properties of an object in one place. <a name="es6-object-shorthand"></a><a name="3.5"></a> - 3.3 Use object method shorthand. eslint: `object-shorthand` <a name="es6-object-concise"></a><a name="3.6"></a> - 3.4 Use property value shorthand. eslint: `object-shorthand` > Why? It is shorter and descriptive. <a name="objects--grouped-shorthand"></a><a name="3.7"></a> - 3.5 Group your shorthand properties at the beginning of your object declaration. > Why? It’s easier to tell which properties are using the shorthand. <a name="objects--quoted-props"></a><a name="3.8"></a> - 3.6 Only quote properties that are invalid identifiers. eslint: `quote-props` > Why? In general we consider it subjectively easier to read. It improves syntax highlighting, and is also more easily optimized by many JS engines. <a name="objects--prototype-builtins"></a> - 3.7 Do not call `Object.prototype` methods directly, such as `hasOwnProperty`, `propertyIsEnumerable`, and `isPrototypeOf`. eslint: `no-prototype-builtins` > Why? These methods may be shadowed by properties on the object in question - consider `{ hasOwnProperty: false }` - or, the object may be a null object (`Object.create(null)`). In modern browsers that support ES2022, or with a polyfill such as <https:/