Flexberry/javascript-style-guidePublic

forked fromairbnb/javascript

NotificationsYou must be signed in to change notification settings
Fork1
Star3

Flexberry's JavaScript Style Guide

3 stars 26.8k forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 429 Commits
es5		es5
linters		linters
react		react
README.md		README.md
package.json		package.json

Repository files navigation

![Gitter](https://badges.gitter.im/Join Chat.svg)

Airbnb JavaScript Style Guide() {

A mostly reasonable approach to JavaScript

For the ES5-only guide click here.

Types

1.1 Primitives: When you access a primitive type you work directly on its value.
- string
- number
- boolean
- null
- undefined
```
constfoo=1;letbar=foo;bar=9;console.log(foo,bar);// => 1, 9
```
1.2 Complex: When you access a complex type you work on a reference to its value.
- object
- array
- function
```
constfoo=[1,2];constbar=foo;bar[0]=9;console.log(foo[0],bar[0]);// => 9, 9
```

⬆ back to top

References

2.1 Useconst for all of your references; avoid usingvar.

Why? This ensures that you can't reassign your references (mutation), which can lead to bugs and difficult to comprehend code.

```javascript// badvar a = 1;var b = 2;// goodconst a = 1;const b = 2;```

2.2 If you must mutate references, uselet instead ofvar.

Why?let is block-scoped rather than function-scoped likevar.

```javascript// badvar count = 1;if (true) {  count += 1;}// good, use the let.let count = 1;if (true) {  count += 1;}```

2.3 Note that bothlet andconst are block-scoped.

// const and let only exist in the blocks they are defined in.{leta=1;constb=1;}console.log(a);// ReferenceErrorconsole.log(b);// ReferenceError

⬆ back to top

Objects

3.1 Use the literal syntax for object creation.

// badconstitem=newObject();// goodconstitem={};

3.2 Don't usereserved words as keys. It won't work in IE8.More info.

// badconstsuperman={default:{clark:'kent'},private:true};// goodconstsuperman={defaults:{clark:'kent'},hidden:true};

3.3 Use readable synonyms in place of reserved words.

// badconstsuperman={class:'alien'};// badconstsuperman={klass:'alien'};// goodconstsuperman={type:'alien'};

3.4 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.

```javascriptfunction getKey(k) {  return `a key named ${k}`;}// badconst obj = {  id: 5,  name: 'San Francisco',};obj[getKey('enabled')] = true;// goodconst obj = {  id: 5,  name: 'San Francisco',  [getKey('enabled')]: true,};```

3.5 Use object method shorthand.

// badconstatom={value:1,addValue:function(value){returnatom.value+value;},};// goodconstatom={value:1,addValue(value){returnatom.value+value;},};

3.6 Use property value shorthand.

Why? It is shorter to write and descriptive.

```javascriptconst lukeSkywalker = 'Luke Skywalker';// badconst obj = {  lukeSkywalker: lukeSkywalker};// goodconst obj = {  lukeSkywalker};```

3.7 Group your shorthand properties at the beginning of your object declaration.

Why? It's easier to tell which properties are using the shorthand.

```javascriptconst anakinSkywalker = 'Anakin Skywalker';const lukeSkywalker = 'Luke Skywalker';// badconst obj = {  episodeOne: 1,  twoJedisWalkIntoACantina: 2,  lukeSkywalker,  episodeThree: 3,  mayTheFourth: 4,  anakinSkywalker,};// goodconst obj = {  lukeSkywalker,  anakinSkywalker,  episodeOne: 1,  twoJedisWalkIntoACantina: 2,  episodeThree: 3,  mayTheFourth: 4,};```

⬆ back to top

Arrays

4.1 Use the literal syntax for array creation.

// badconstitems=newArray();// goodconstitems=[];

4.2 Use Array#push instead of direct assignment to add items to an array.

constsomeStack=[];// badsomeStack[someStack.length]='abracadabra';// goodsomeStack.push('abracadabra');

4.3 Use array spreads... to copy arrays.

// badconstlen=items.length;constitemsCopy=[];leti;for(i=0;i<len;i++){itemsCopy[i]=items[i];}// goodconstitemsCopy=[...items];

4.4 To convert an array-like object to an array, use Array#from.

constfoo=document.querySelectorAll('.foo');constnodes=Array.from(foo);

⬆ back to top

Destructuring

5.1 Use object destructuring when accessing and using multiple properties of an object.

Why? Destructuring saves you from creating temporary references for those properties.

```javascript// badfunction getFullName(user) {  const firstName = user.firstName;  const lastName = user.lastName;  return `${firstName} ${lastName}`;}// goodfunction getFullName(obj) {  const { firstName, lastName } = obj;  return `${firstName} ${lastName}`;}// bestfunction getFullName({ firstName, lastName }) {  return `${firstName} ${lastName}`;}```

5.2 Use array destructuring.

constarr=[1,2,3,4];// badconstfirst=arr[0];constsecond=arr[1];// goodconst[first,second]=arr;

5.3 Use object destructuring for multiple return values, not array destructuring.

Why? You can add new properties over time or change the order of things without breaking call sites.

```javascript// badfunction processInput(input) {  // then a miracle occurs  return [left, right, top, bottom];}// the caller needs to think about the order of return dataconst [left, __, top] = processInput(input);// goodfunction processInput(input) {  // then a miracle occurs  return { left, right, top, bottom };}// the caller selects only the data they needconst { left, right } = processInput(input);```

⬆ back to top

Strings

6.1 Use single quotes'' for strings.

// badconstname="Capt. Janeway";// goodconstname='Capt. Janeway';

6.2 Strings longer than 80 characters should be written across multiple lines using string concatenation.

6.3 Note: If overused, long strings with concatenation could impact performance.jsPerf &Discussion.

// badconsterrorMessage='This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';// badconsterrorMessage='This is a super long error that was thrown because \of Batman. When you stop to think about how Batman had anything to do \with this, you would get nowhere \fast.';// goodconsterrorMessage='This is a super long error that was thrown because '+'of Batman. When you stop to think about how Batman had anything to do '+'with this, you would get nowhere fast.';

6.4 When programmatically building up strings, use template strings instead of concatenation.

Why? Template strings give you a readable, concise syntax with proper newlines and string interpolation features.

```javascript// badfunction sayHi(name) {  return 'How are you, ' + name + '?';}// badfunction sayHi(name) {  return ['How are you, ', name, '?'].join();}// goodfunction sayHi(name) {  return `How are you, ${name}?`;}```

⬆ back to top

Functions

7.1 Use function declarations instead of function expressions.

Why? Function declarations are named, so they're easier to identify in call stacks. Also, the whole body of a function declaration is hoisted, whereas only the reference of a function expression is hoisted. This rule makes it possible to always useArrow Functions in place of function expressions.

```javascript// badconst foo = function () {};// goodfunction foo() {}```

7.2 Function expressions:

// immediately-invoked function expression (IIFE)(()=>{console.log('Welcome to the Internet. Please follow me.');})();

7.3 Never declare a function in a non-function block (if, while, etc). Assign the function to a variable instead. Browsers will allow you to do it, but they all interpret it differently, which is bad news bears.
7.4 Note: ECMA-262 defines ablock as a list of statements. A function declaration is not a statement.Read ECMA-262's note on this issue.
```
// badif(currentUser){functiontest(){console.log('Nope.');}}// goodlettest;if(currentUser){test=()=>{console.log('Yup.');};}
```
7.5 Never name a parameterarguments. This will take precedence over thearguments object that is given to every function scope.
```
// badfunctionnope(name,options,arguments){// ...stuff...}// goodfunctionyup(name,options,args){// ...stuff...}
```

7.6 Never usearguments, opt to use rest syntax... instead.

Why?... is explicit about which arguments you want pulled. Plus rest arguments are a real Array and not Array-like likearguments.

```javascript// badfunction concatenateAll() {  const args = Array.prototype.slice.call(arguments);  return args.join('');}// goodfunction concatenateAll(...args) {  return args.join('');}```

7.7 Use default parameter syntax rather than mutating function arguments.

// really badfunctionhandleThings(opts){// No! We shouldn't mutate function arguments.// Double bad: if opts is falsy it'll be set to an object which may// be what you want but it can introduce subtle bugs.opts=opts||{};// ...}// still badfunctionhandleThings(opts){if(opts===void0){opts={};}// ...}// goodfunctionhandleThings(opts={}){// ...}

7.8 Avoid side effects with default parameters

Why? They are confusing to reason about.

varb=1;// badfunctioncount(a=b++){console.log(a);}count();// 1count();// 2count(3);// 3count();// 3

⬆ back to top

Arrow Functions

8.1 When you must use function expressions (as when passing an anonymous function), use arrow function notation.

Why? It creates a version of the function that executes in the context ofthis, which is usually what you want, and is a more concise syntax.

Why not? If you have a fairly complicated function, you might move that logic out into its own function declaration.

```javascript// bad[1, 2, 3].map(function (x) {  return x * x;});// good[1, 2, 3].map((x) => {  return x * x;});```

8.2 If the function body fits on one line and there is only a single argument, feel free to omit the braces and parentheses, and use the implicit return. Otherwise, add the parentheses, braces, and use areturn statement.

Why? Syntactic sugar. It reads well when multiple functions are chained together.

Why not? If you plan on returning an object.

```javascript// good[1, 2, 3].map(x => x * x);// good[1, 2, 3].reduce((total, n) => {  return total + n;}, 0);```

⬆ back to top

Constructors

9.1 Always useclass. Avoid manipulatingprototype directly.

Why?class syntax is more concise and easier to reason about.

```javascript// badfunction Queue(contents = []) {  this._queue = [...contents];}Queue.prototype.pop = function() {  const value = this._queue[0];  this._queue.splice(0, 1);  return value;}// goodclass Queue {  constructor(contents = []) {    this._queue = [...contents];  }  pop() {    const value = this._queue[0];    this._queue.splice(0, 1);    return value;  }}```

9.2 Useextends for inheritance.

Why? It is a built-in way to inherit prototype functionality without breakinginstanceof.

```javascript// badconst inherits = require('inherits');function PeekableQueue(contents) {  Queue.apply(this, contents);}inherits(PeekableQueue, Queue);PeekableQueue.prototype.peek = function() {  return this._queue[0];}// goodclass PeekableQueue extends Queue {  peek() {    return this._queue[0];  }}```

9.3 Methods can returnthis to help with method chaining.

// badJedi.prototype.jump=function(){this.jumping=true;returntrue;};Jedi.prototype.setHeight=function(height){this.height=height;};constluke=newJedi();luke.jump();// => trueluke.setHeight(20);// => undefined// goodclassJedi{jump(){this.jumping=true;returnthis;}setHeight(height){this.height=height;returnthis;}}constluke=newJedi();luke.jump().setHeight(20);

9.4 It's okay to write a custom toString() method, just make sure it works successfully and causes no side effects.

classJedi{contructor(options={}){this.name=options.name||'no name';}getName(){returnthis.name;}toString(){return`Jedi -${this.getName()}`;}}

⬆ back to top

Modules

10.1 Always use modules (import/export) over a non-standard module system. You can always transpile to your preferred module system.

Why? Modules are the future, let's start using the future now.

```javascript// badconst AirbnbStyleGuide = require('./AirbnbStyleGuide');module.exports = AirbnbStyleGuide.es6;// okimport AirbnbStyleGuide from './AirbnbStyleGuide';export default AirbnbStyleGuide.es6;// bestimport { es6 } from './AirbnbStyleGuide';export default es6;```

10.2 Do not use wildcard imports.

Why? This makes sure you have a single default export.

```javascript// badimport * as AirbnbStyleGuide from './AirbnbStyleGuide';// goodimport AirbnbStyleGuide from './AirbnbStyleGuide';```

10.3 And do not export directly from an import.

Why? Although the one-liner is concise, having one clear way to import and one clear way to export makes things consistent.

```javascript// bad// filename es6.jsexport { es6 as default } from './airbnbStyleGuide';// good// filename es6.jsimport { es6 } from './AirbnbStyleGuide';export default es6;```

⬆ back to top

Iterators and Generators

11.1 Don't use iterators. Prefer JavaScript's higher-order functions likemap() andreduce() instead of loops likefor-of.

Why? This enforces our immutable rule. Dealing with pure functions that return values is easier to reason about than side-effects.

```javascriptconst numbers = [1, 2, 3, 4, 5];// badlet sum = 0;for (let num of numbers) {  sum += num;}sum === 15;// goodlet sum = 0;numbers.forEach((num) => sum += num);sum === 15;// best (use the functional force)const sum = numbers.reduce((total, num) => total + num, 0);sum === 15;```

11.2 Don't use generators for now.

Why? They don't transpile well to ES5.

⬆ back to top

Properties

12.1 Use dot notation when accessing properties.

constluke={jedi:true,age:28,};// badconstisJedi=luke['jedi'];// goodconstisJedi=luke.jedi;

12.2 Use subscript notation[] when accessing properties with a variable.

constluke={jedi:true,age:28,};functiongetProp(prop){returnluke[prop];}constisJedi=getProp('jedi');

⬆ back to top

Variables

13.1 Always useconst to declare variables. Not doing so will result in global variables. We want to avoid polluting the global namespace. Captain Planet warned us of that.
```
// badsuperPower=newSuperPower();// goodconstsuperPower=newSuperPower();
```

13.2 Use oneconst declaration per variable.

Why? It's easier to add new variable declarations this way, and you never have to worry about swapping out a; for a, or introducing punctuation-only diffs.

// badconstitems=getItems(),goSportsTeam=true,dragonball='z';// bad// (compare to above, and try to spot the mistake)constitems=getItems(),goSportsTeam=true;dragonball='z';// goodconstitems=getItems();constgoSportsTeam=true;constdragonball='z';

13.3 Group all yourconsts and then group all yourlets.

Why? This is helpful when later on you might need to assign a variable depending on one of the previous assigned variables.

```javascript// badlet i, len, dragonball,    items = getItems(),    goSportsTeam = true;// badlet i;const items = getItems();let dragonball;const goSportsTeam = true;let len;// goodconst goSportsTeam = true;const items = getItems();let dragonball;let i;let length;```

13.4 Assign variables where you need them, but place them in a reasonable place.

Why?let andconst are block scoped and not function scoped.

```javascript// goodfunction() {  test();  console.log('doing stuff..');  //..other stuff..  const name = getName();  if (name === 'test') {    return false;  }  return name;}// bad - unnessary function callfunction(hasName) {  const name = getName();  if (!hasName) {    return false;  }  this.setFirstName(name);  return true;}// goodfunction(hasName) {  if (!hasName) {    return false;  }  const name = getName();  this.setFirstName(name);  return true;}```

⬆ back to top

Hoisting

14.1 var declarations get hoisted to the top of their scope, their assignment does not.const andlet declarations are blessed with a new concept calledTemporal Dead Zones (TDZ). It's important to know whytypeof is no longer safe.

// we know this wouldn't work (assuming there// is no notDefined global variable)functionexample(){console.log(notDefined);// => throws a ReferenceError}// creating a variable declaration after you// reference the variable will work due to// variable hoisting. Note: the assignment// value of `true` is not hoisted.functionexample(){console.log(declaredButNotAssigned);// => undefinedvardeclaredButNotAssigned=true;}// The interpreter is hoisting the variable// declaration to the top of the scope,// which means our example could be rewritten as:functionexample(){letdeclaredButNotAssigned;console.log(declaredButNotAssigned);// => undefineddeclaredButNotAssigned=true;}// using const and letfunctionexample(){console.log(declaredButNotAssigned);// => throws a ReferenceErrorconsole.log(typeofdeclaredButNotAssigned);// => throws a ReferenceErrorconstdeclaredButNotAssigned=true;}

14.2 Anonymous function expressions hoist their variable name, but not the function assignment.

functionexample(){console.log(anonymous);// => undefinedanonymous();// => TypeError anonymous is not a functionvaranonymous=function(){console.log('anonymous function expression');};}

14.3 Named function expressions hoist the variable name, not the function name or the function body.

functionexample(){console.log(named);// => undefinednamed();// => TypeError named is not a functionsuperPower();// => ReferenceError superPower is not definedvarnamed=functionsuperPower(){console.log('Flying');};}// the same is true when the function name// is the same as the variable name.functionexample(){console.log(named);// => undefinednamed();// => TypeError named is not a functionvarnamed=functionnamed(){console.log('named');}}

14.4 Function declarations hoist their name and the function body.

functionexample(){superPower();// => FlyingfunctionsuperPower(){console.log('Flying');}}

For more information refer toJavaScript Scoping & Hoisting byBen Cherry.

⬆ back to top

Comparison Operators & Equality

15.1 Use=== and!== over== and!=.
15.2 Conditional statements such as theif statement evaulate their expression using coercion with theToBoolean abstract method and always follow these simple rules:
- Objects evaluate totrue
- Undefined evaluates tofalse
- Null evaluates tofalse
- Booleans evaluate tothe value of the boolean
- Numbers evaluate tofalse if+0, -0, or NaN, otherwisetrue
- Strings evaluate tofalse if an empty string'', otherwisetrue
```
if([0]){// true// An array is an object, objects evaluate to true}
```

15.3 Use shortcuts.

// badif(name!==''){// ...stuff...}// goodif(name){// ...stuff...}// badif(collection.length>0){// ...stuff...}// goodif(collection.length){// ...stuff...}

15.4 For more information seeTruth Equality and JavaScript by Angus Croll.

⬆ back to top

Blocks

16.1 Use braces with all multi-line blocks.

// badif(test)returnfalse;// goodif(test)returnfalse;// goodif(test){returnfalse;}// badfunction(){returnfalse;}// goodfunction(){returnfalse;}

16.2 If you're using multi-line blocks withif andelse, putelse on the same line as yourif block's closing brace.
```
// badif(test){thing1();thing2();}else{thing3();}// goodif(test){thing1();thing2();}else{thing3();}
```

⬆ back to top

Comments

17.1 Use/** ... */ for multi-line comments. Include a description, specify types and values for all parameters and return values.

// bad// make() returns a new element// based on the passed in tag name////@param {String} tag//@return {Element} elementfunctionmake(tag){// ...stuff...returnelement;}// good/** * make() returns a new element * based on the passed in tag name * *@param {String} tag *@return {Element} element */functionmake(tag){// ...stuff...returnelement;}

17.2 Use// for single line comments. Place single line comments on a newline above the subject of the comment. Put an empty line before the comment.

// badconstactive=true;// is current tab// good// is current tabconstactive=true;// badfunctiongetType(){console.log('fetching type...');// set the default type to 'no type'consttype=this._type||'no type';returntype;}// goodfunctiongetType(){console.log('fetching type...');// set the default type to 'no type'consttype=this._type||'no type';returntype;}

17.3 Prefixing your comments withFIXME orTODO helps other developers quickly understand if you're pointing out a problem that needs to be revisited, or if you're suggesting a solution to the problem that needs to be implemented. These are different than regular comments because they are actionable. The actions areFIXME -- need to figure this out orTODO -- need to implement.

17.4 Use// FIXME: to annotate problems.

classCalculator{constructor(){// FIXME: shouldn't use a global heretotal=0;}}

17.5 Use// TODO: to annotate solutions to problems.

classCalculator{constructor(){// TODO: total should be configurable by an options paramthis.total=0;}}

⬆ back to top

Whitespace

18.1 Use soft tabs set to 2 spaces.

// badfunction(){∙∙∙∙constname;}// badfunction(){∙constname;}// goodfunction(){∙∙constname;}

18.2 Place 1 space before the leading brace.

// badfunctiontest(){console.log('test');}// goodfunctiontest(){console.log('test');}// baddog.set('attr',{age:'1 year',breed:'Bernese Mountain Dog'});// gooddog.set('attr',{age:'1 year',breed:'Bernese Mountain Dog'});

18.3 Place 1 space before the opening parenthesis in control statements (if,while etc.). Place no space before the argument list in function calls and declarations.
```
// badif(isJedi){fight();}// goodif(isJedi){fight();}// badfunctionfight(){console.log('Swooosh!');}// goodfunctionfight(){console.log('Swooosh!');}
```
18.4 Set off operators with spaces.
```
// badconstx=y+5;// goodconstx=y+5;
```

18.5 End files with a single newline character.

// bad(function(global){// ...stuff...})(this);

// bad(function(global){// ...stuff...})(this);↵↵

// good(function(global){// ...stuff...})(this);↵

18.5 Use indentation when making long method chains. Use a leading dot, whichemphasizes that the line is a method call, not a new statement.

// bad$('#items').find('.selected').highlight().end().find('.open').updateCount();// bad$('#items').find('.selected').highlight().end().find('.open').updateCount();// good$('#items').find('.selected').highlight().end().find('.open').updateCount();// badconstleds=stage.selectAll('.led').data(data).enter().append('svg:svg').class('led',true).attr('width',(radius+margin)*2).append('svg:g').attr('transform','translate('+(radius+margin)+','+(radius+margin)+')').call(tron.led);// goodconstleds=stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led',true).attr('width',(radius+margin)*2).append('svg:g').attr('transform','translate('+(radius+margin)+','+(radius+margin)+')').call(tron.led);

18.6 Leave a blank line after blocks and before the next statement

// badif(foo){returnbar;}returnbaz;// goodif(foo){returnbar;}returnbaz;// badconstobj={foo(){},bar(){},};returnobj;// goodconstobj={foo(){},bar(){},};returnobj;

⬆ back to top

Commas

19.1 Leading commas:Nope.

// badconststory=[once,upon,aTime];// goodconststory=[once,upon,aTime,];// badconsthero={firstName:'Ada',lastName:'Lovelace',birthYear:1815,superPower:'computers'};// goodconsthero={firstName:'Ada',lastName:'Lovelace',birthYear:1815,superPower:'computers',};

19.2 Additional trailing comma:Yup.

Why? This leads to cleaner git diffs. Also, transpilers like Babel will remove the additional trailing comma in the transpiled code which means you don't have to worry about thetrailing comma problem in legacy browsers.

```javascript// bad - git diff without trailing commaconst hero = {     firstName: 'Florence',-    lastName: 'Nightingale'+    lastName: 'Nightingale',+    inventorOf: ['coxcomb graph', 'mordern nursing']}// good - git diff with trailing commaconst hero = {     firstName: 'Florence',     lastName: 'Nightingale',+    inventorOf: ['coxcomb chart', 'mordern nursing'],}// badconst hero = {  firstName: 'Dana',  lastName: 'Scully'};const heroes = [  'Batman',  'Superman'];// goodconst hero = {  firstName: 'Dana',  lastName: 'Scully',};const heroes = [  'Batman',  'Superman',];```

⬆ back to top

Semicolons

20.1 Yup.

// bad(function(){constname='Skywalker'returnname})()// good(()=>{constname='Skywalker';returnname;})();// good (guards against the function becoming an argument when two files with IIFEs are concatenated);(()=>{constname='Skywalker';returnname;})();

Type Casting & Coercion

21.1 Perform type coercion at the beginning of the statement.

21.2 Strings:

//  => this.reviewScore = 9;// badconsttotalScore=this.reviewScore+'';// goodconsttotalScore=String(this.reviewScore);

21.3 UseparseInt for Numbers and always with a radix for type casting.

constinputValue='4';// badconstval=newNumber(inputValue);// badconstval=+inputValue;// badconstval=inputValue>>0;// badconstval=parseInt(inputValue);// goodconstval=Number(inputValue);// goodconstval=parseInt(inputValue,10);

21.4 If for whatever reason you are doing something wild andparseInt is your bottleneck and need to use Bitshift forperformance reasons, leave a comment explaining why and what you're doing.
```
// good/** * parseInt was the reason my code was slow. * Bitshifting the String to coerce it to a * Number made it a lot faster. */constval=inputValue>>0;
```
21.5 Note: Be careful when using bitshift operations. Numbers are represented as64-bit values, but Bitshift operations always return a 32-bit integer (source). Bitshift can lead to unexpected behavior for integer values larger than 32 bits.Discussion. Largest signed 32-bit Int is 2,147,483,647:
```
2147483647>>0//=> 21474836472147483648>>0//=> -21474836482147483649>>0//=> -2147483647
```

21.6 Booleans:

constage=0;// badconsthasAge=newBoolean(age);// goodconsthasAge=Boolean(age);// goodconsthasAge=!!age;

⬆ back to top

Naming Conventions

22.1 Avoid single letter names. Be descriptive with your naming.

// badfunctionq(){// ...stuff...}// goodfunctionquery(){// ..stuff..}

22.2 Use camelCase when naming objects, functions, and instances.

// badconstOBJEcttsssss={};constthis_is_my_object={};functionc(){}// goodconstthisIsMyObject={};functionthisIsMyFunction(){}

22.3 Use PascalCase when naming constructors or classes.

// badfunctionuser(options){this.name=options.name;}constbad=newuser({name:'nope',});// goodclassUser{constructor(options){this.name=options.name;}}constgood=newUser({name:'yup',});

22.4 Use a leading underscore_ when naming private properties.

// badthis.__firstName__='Panda';this.firstName_='Panda';// goodthis._firstName='Panda';

22.5 Don't save references tothis. Use arrow functions or Function#bind.

// badfunctionfoo(){constself=this;returnfunction(){console.log(self);};}// badfunctionfoo(){constthat=this;returnfunction(){console.log(that);};}// goodfunctionfoo(){return()=>{console.log(this);};}

22.6 If your file exports a single class, your filename should be exactly the name of the class.

// file contentsclassCheckBox{// ...}exportdefaultCheckBox;// in some other file// badimportCheckBoxfrom'./checkBox';// badimportCheckBoxfrom'./check_box';// goodimportCheckBoxfrom'./CheckBox';

22.7 Use camelCase when you export-default a function. Your filename should be identical to your function's name.
```
functionmakeStyleGuide(){}exportdefaultmakeStyleGuide;
```
22.8 Use PascalCase when you export a singleton / function library / bare object.
```
constAirbnbStyleGuide={es6:{}};exportdefaultAirbnbStyleGuide;
```

⬆ back to top

Accessors

23.1 Accessor functions for properties are not required.

23.2 If you do make accessor functions use getVal() and setVal('hello').

// baddragon.age();// gooddragon.getAge();// baddragon.age(25);// gooddragon.setAge(25);

23.3 If the property is a boolean, use isVal() or hasVal().

// badif(!dragon.age()){returnfalse;}// goodif(!dragon.hasAge()){returnfalse;}

23.4 It's okay to create get() and set() functions, but be consistent.

classJedi{constructor(options={}){constlightsaber=options.lightsaber||'blue';this.set('lightsaber',lightsaber);}set(key,val){this[key]=val;}get(key){returnthis[key];}}

⬆ back to top

Events

24.1 When attaching data payloads to events (whether DOM events or something more proprietary like Backbone events), pass a hash instead of a raw value. This allows a subsequent contributor to add more data to the event payload without finding and updating every handler for the event. For example, instead of:
```
// bad$(this).trigger('listingUpdated',listing.id);...$(this).on('listingUpdated',function(e,listingId){// do something with listingId});
```
prefer:
```
// good$(this).trigger('listingUpdated',{listingId :listing.id});...$(this).on('listingUpdated',function(e,data){// do something with data.listingId});
```

⬆ back to top

jQuery

25.1 Prefix jQuery object variables with a$.

// badconstsidebar=$('.sidebar');// goodconst$sidebar=$('.sidebar');

25.2 Cache jQuery lookups.

// badfunctionsetSidebar(){$('.sidebar').hide();// ...stuff...$('.sidebar').css({'background-color':'pink'});}// goodfunctionsetSidebar(){const$sidebar=$('.sidebar');$sidebar.hide();// ...stuff...$sidebar.css({'background-color':'pink'});}

25.3 For DOM queries use Cascading$('.sidebar ul') or parent > child$('.sidebar > ul').jsPerf

25.4 Usefind with scoped jQuery object queries.

// bad$('ul','.sidebar').hide();// bad$('.sidebar').find('ul').hide();// good$('.sidebar ul').hide();// good$('.sidebar > ul').hide();// good$sidebar.find('ul').hide();