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 Types References Objects Arrays Destructuring Strings Functions Arrow Functions Classes & Constructors Modules Iterators and Generators Properties Variables Hoisting Comparison Operators & Equality Blocks Control Statements Comments Whitespace Commas Semicolons Type Casting & Coercion Naming Conventions Accessors Events jQuery ECMAScript 5 Compatibility ECMAScript 6+ (ES 2015+) Styles Standard Library Testing Performance Resources In the Wild Translation The JavaScript Style Guide Guide Chat With Us About JavaScript Contributors License Amendments Types 1.1 Primitives: When you access a primitive type you work directly on its value. string number boolean null undefined symbol bigint const foo = 1; let bar = foo; bar = 9; console.log(foo, bar); // => 1, 9 Symbols and BigInts cannot be faithfully polyfilled, so they should not be used when targeting browsers/environments that don’t support them natively. 1.2 Complex: When you access a complex type you work on a reference to its value. object array function const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 9 ⬆ back to top References 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. // bad var a = 1; var b = 2; // good const a = 1; const b = 2; 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. // bad var count = 1; if (true) { count += 1; } // good, use the let. let count = 1; if (true) { count += 1; } 2.3 Note that both let and const are block-scoped, whereas var is function-scoped. // const and let only exist in the blocks they are defined in. { let a = 1; const b = 1; var c = 1; } console.log(a); // ReferenceError console.log(b); // ReferenceError console.log(c); // Prints 1 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 3.1 Use the literal syntax for object creation. eslint: no-new-object // bad const item = new Object(); // good const item = {}; 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. function getKey(k) { return `a key named ${k}`; } // bad const obj = { id: 5, name: 'San Francisco', }; obj[getKey('enabled')] = true; // good const obj = { id: 5, name: 'San Francisco', [getKey('enabled')]: true, }; 3.3 Use object method shorthand. eslint: object-shorthand // bad const atom = { value: 1, addValue: function (value) { return atom.value + value; }, }; // good const atom = { value: 1, addValue(value) { return atom.value + value; }, }; 3.4 Use property value shorthand. eslint: object-shorthand Why? It is shorter and descriptive. const lukeSkywalker = 'Luke Skywalker'; // bad const obj = { lukeSkywalker: lukeSkywalker, }; // good const obj = { lukeSkywalker, }; 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. const anakinSkywalker = 'Anakin Skywalker'; const lukeSkywalker = 'Luke Skywalker'; // bad const obj = { episodeOne: 1, twoJediWalkIntoACantina: 2, lukeSkywalker, episodeThree: 3, mayTheFourth: 4, anakinSkywalker, }; // good const obj = { lukeSkywalker, anakinSkywalker, episodeOne: 1, twoJediWalkIntoACantina: 2, episodeThree: 3, mayTheFourth: 4, }; 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. // bad const bad = { 'foo': 3, 'bar': 4, 'data-blah': 5, }; // good const good = { foo: 3, bar: 4, 'data-blah': 5, }; 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://npmjs.com/object.hasown, Object.hasOwn can also be used as an alternative to Object.prototype.hasOwnProperty.call. // bad console.log(object.hasOwnProperty(key)); // good console.log(Object.prototype.hasOwnProperty.call(object, key)); // better const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope. console.log(has.call(object, key)); // best console.log(Object.hasOwn(object, key)); // only supported in browsers that support ES2022 /* or */ import has from 'has'; // https://www.npmjs.com/package/has console.log(has(object, key)); /* or */ console.log(Object.hasOwn(object, key)); // https://www.npmjs.com/package/object.hasown 3.8 Prefer the object spread syntax over Object.assign to shallow-copy objects. Use the object rest parameter syntax to get a new object with certain properties omitted. eslint: prefer-object-spread // very bad const original = { a: 1, b: 2 }; const copy = Object.assign(original, { c: 3 }); // this mutates `