Airbnb JavaScript 스타일 가이드

Posted by 귝

2015. 10. 16. 15:35 JavaScript

Airbnb JavaScript 스타일 가이드() {

Arrays 원문

배열을 만들 때 리터럴 구문을 사용하십시오.

// bad
var items = new Array();

// good
var items = [];

길이를 알 수없는 경우는 Array#push를 사용하십시오.

var someStack = [];


// bad
someStack[someStack.length] = 'abracadabra';

// good
someStack.push('abracadabra');

배열을 복사 할 필요가있는 경우 Array#slice를 사용하십시오. jsPerf

var len = items.length,
    itemsCopy = [],
    i;

// bad
for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}

// good
itemsCopy = items.slice();

Array와 비슷한(Array-Like)한 Object를 Array에 변환하는 경우는 Array#slice를 사용하십시오.
```
function trigger() {
  var args = Array.prototype.slice.call(arguments);
  ...
}
```

[↑]

Functions 원문

함수식(Function expressions)

// 익명함수식(anonymous function expression)
var anonymous = function() {
  return true;
};

// 명명된 함수식(named function expression)
var named = function named() {
  return true;
};

// 즉시실행 함수식(immediately-invoked function expression (IIFE))
(function() {
  console.log('Welcome to the Internet. Please follow me.');
})();

(if 및 while 등) 블록 내에서 변수에 함수를 할당하는 대신 함수를 선언하지 마십시오. 브라우저는 허용하지만 (마치 'bad news bears'처럼) 모두 다른 방식으로 해석됩니다.

Note: ECMA-262에서는block은 statements의 목록에 정의되어 있습니다 만, 함수 선언은 statements가 없습니다. 이 문제는 ECMA-262의 설명을 참조하십시오. .

// bad
if (currentUser) {
  function test() {
    console.log('Nope.');
  }
}

// good
var test;
if (currentUser) {
  test = function test() {
    console.log('Yup.');
  };
}

매개 변수(parameter)에 arguments를 절대 지정하지 마십시오. 이것은 함수 범위로 전달 될arguments객체의 참조를 덮어 쓸 것입니다.
```
// bad
function nope(name, options, arguments) {
  // ...stuff...
}

// good
function yup(name, options, args) {
  // ...stuff...
}
```
[↑]

Hoisting 원문

해당 스코프의 시작 부분에 Hoist된 변수선언은 할당되지 않습니다.

// (notDefined가 전역 변수에 존재하지 않는다고 가정했을 경우)
// 이것은 동작하지 않습니다.
function example() {
  console.log(notDefined); // => throws a ReferenceError
}

// 그 변수를 참조하는 코드 후에 그 변수를 선언 한 경우
// 변수가 Hoist된 상태에서 작동합니다.
// Note : `true`라는 값 자체는 Hoist되지 않습니다.
function example() {
  console.log(declaredButNotAssigned); // => undefined
  var declaredButNotAssigned = true;
}

// 인터 프린터는 변수 선언을 스코프의 시작 부분에 Hoist합니다.
// 위의 예는 다음과 같이 다시 작성할 수 있습니다.
function example() {
  var declaredButNotAssigned;
  console.log(declaredButNotAssigned); // => undefined
  declaredButNotAssigned = true;
}

익명 함수의 경우 함수가 할당되기 전에 변수가 Hoist될 수 있습니다.

function example() {
  console.log(anonymous); // => undefined

  anonymous(); // => TypeError anonymous is not a function

  var anonymous = function() {
    console.log('anonymous function expression');
  };
}

명명 된 함수의 경우도 마찬가지로 변수가 Hoist될 수 있습니다. 함수 이름과 함수 본체는 Hoist되지 않습니다.

function example() {
  console.log(named); // => undefined

  named(); // => TypeError named is not a function

  superPower(); // => ReferenceError superPower is not defined

  var named = function superPower() {
    console.log('Flying');
  };
}

// 함수이름과 변수이름이 같은 경우에도 같은 일이 일어납니다.
function example() {
  console.log(named); // => undefined

  named(); // => TypeError named is not a function

  var named = function named() {
    console.log('named');
  }
}

함수 선언은 함수이름과 함수본문이 Hoist됩니다.

function example() {
  superPower(); // => Flying

  function superPower() {
    console.log('Flying');
  }
}

더 자세한 정보는 Ben Cherry의 JavaScript Scoping & Hoisting를 참조하십시오.
[↑]

Conditional Expressions & Equality(조건식과 등가식)원문

== 나 != 보다는 === 와 !== 를 사용해 주십시오
조건식은ToBoolean 메소드에 의해 엄밀하게 비교됩니다. 항상 이 간단한 규칙에 따라 주십시오.
- Objects 는 true 로 평가됩니다.
- undefined 는 false 로 평가됩니다.
- null 는 false 로 평가됩니다.
- Booleans 는 boolean형의 값 으로 평가됩니다.
- Numbers 는 true 로 평가됩니다. 하지만 +0, -0, or NaN 의 경우는 false 입니다.
- Strings 는 true 로 평가됩니다. 하지만 빈문자 '' 의 경우는 false 입니다.
```
if ([0]) {
  // true
  // Array는 Object 이므로 true 로 평가됩니다.
}
```

짧은형식을 사용하십시오.

// bad
if (name !== '') {
  // ...stuff...
}

// good
if (name) {
  // ...stuff...
}

// bad
if (collection.length > 0) {
  // ...stuff...
}

// good
if (collection.length) {
  // ...stuff...
}

더 자세한 정보는 Angus Croll 의 Truth Equality and JavaScript를 참고해 주십시오.
[↑]

Commas 원문

선두의 comma는 하지마십시오.

// bad
var once
  , upon
  , aTime;

// good
var once,
    upon,
    aTime;

// bad
var hero = {
    firstName: 'Bob'
  , lastName: 'Parr'
  , heroName: 'Mr. Incredible'
  , superPower: 'strength'
};

// good
var hero = {
  firstName: 'Bob',
  lastName: 'Parr',
  heroName: 'Mr. Incredible',
  superPower: 'strength'
};

　- 말미의 불필요한 쉼표도 하지 마십시오. 이것은 IE6/7과 quirksmode의 IE9에서 문제를 일으킬 수 있습니다. 또한 ES3의 일부 구현에서 불필요한 쉼표가 있는 경우, 배열 길이를 추가합니다. 이것은 ES5에서 분명해졌습니다.(source):

제 5 판에서는 말미의 불필요한 쉼표가 있는 ArrayInitialiser (배열 초기화 연산자)라도 배열에 길이를 추가하지 않는다는 사실을 명확히하고 있습니다. 이것은 제 3 판에서 의미적인 변경은 아닙니다만, 일부의 구현은 이전부터 이것을 오해하고 있었을지도 모릅니다.

```javascript
// bad
var hero = {
  firstName: 'Kevin',
  lastName: 'Flynn',
};

var heroes = [
  'Batman',
  'Superman',
];

// good
var hero = {
  firstName: 'Kevin',
  lastName: 'Flynn'
};

var heroes = [
  'Batman',
  'Superman'
];
```

**[[↑]](#TOC)**

Type Casting & Coercion(강제) 원문

문의 시작 부분에서 형을 강제합니다.

Strings:

//  => this.reviewScore = 9;

// bad
var totalScore = this.reviewScore + '';

// good
var totalScore = '' + this.reviewScore;

// bad
var totalScore = '' + this.reviewScore + ' total score';

// good
var totalScore = this.reviewScore + ' total score';

숫자는parseInt를 사용하십시오. 항상 형변환을 위한 기수(radix)를 인수로 전달하십시오.

var inputValue = '4';

// bad
var val = new Number(inputValue);

// bad
var val = +inputValue;

// bad
var val = inputValue >> 0;

// bad
var val = parseInt(inputValue);

// good
var val = Number(inputValue);

// good
var val = parseInt(inputValue, 10);

어떤 이유에 의해 parseInt 가 병목이 되고, 성능적인 이유로 Bitshift를 사용할 필요가 있을 경우, 하려고 하는것에 대해, why(왜)와 what(무엇)의 설명을 코멘트로 남겨주십시오.

  // good
  /**
   * parseInt가 병목을 일으키므로
   * Bitshift로 문자열을 수치로 강제적으로 변환하는 방법으로
   * 성능을 개선시킵니다.
   */
  var val = inputValue >> 0;

Booleans:

var age = 0;

// bad
var hasAge = new Boolean(age);

// good
var hasAge = Boolean(age);

// good
var hasAge = !!age;

[↑]

Events

(DOM 이벤트나 Backbone events와 같은 고유의) 이벤트 탑재체(payloads)의 값을 전달하는 경우 원시 값(raw value) 대신 해시 인수(hash)를 전달합니다. 이렇게하는 것으로 나중에 개발자가 이벤트와 관련된 모든 핸들러를 찾아 업데이트 하지 않고 이벤트 탑재체(payloads)에 값을 추가 할 수 있습니다. 예를 들어, 이것 대신 :
```
// bad
$(this).trigger('listingUpdated', listing.id);

...

$(this).on('listingUpdated', function(e, listingId) {
  // do something with listingId
});
```
이쪽을 선호합니다.:
```
// good
$(this).trigger('listingUpdated', { listingId : listing.id });

...

$(this).on('listingUpdated', function(e, data) {
  // do something with data.listingId
});
```
[↑]

ECMAScript 5 Compatibility 원문

Kangax의 ES5 compatibility table를 참조해 주십시오.
[↑]

Testing 원문

네!(Yup.)
```
function() {
  return true;
}
```
[↑]

Resources 원문

Read This

Annotated ECMAScript 5.1

Other Styleguides

Other Styles

Naming this in nested functions - Christian Johansen
Conditional Callbacks
Popular JavaScript Coding Conventions on Github

Further Reading

Understanding JavaScript Closures - Angus Croll
Basic JavaScript for the impatient programmer - Dr. Axel Rauschmayer

Books

JavaScript: The Good Parts - Douglas Crockford
JavaScript Patterns - Stoyan Stefanov
Pro JavaScript Design Patterns - Ross Harmes and Dustin Diaz
High Performance Web Sites: Essential Knowledge for Front-End Engineers - Steve Souders
Maintainable JavaScript - Nicholas C. Zakas
JavaScript Web Applications - Alex MacCaw
Pro JavaScript Techniques - John Resig
Smashing Node.js: JavaScript Everywhere - Guillermo Rauch
Secrets of the JavaScript Ninja - John Resig and Bear Bibeault
Human JavaScript - Henrik Joreteg
Superhero.js - Kim Joar Bekkelund, Mads Mobæk, & Olav Bjorkoy
JSBooks

Blogs

In the Wild

This is a list of organizations that are using this style guide. Send us a pull request or open an issue and we'll add you to the list.

Aan Zee: AanZee/javascript
Airbnb: airbnb/javascript
American Insitutes for Research: AIRAST/javascript
Compass Learning: compasslearning/javascript-style-guide
ExactTarget: ExactTarget/javascript
GeneralElectric: GeneralElectric/javascript
GoodData: gooddata/gdc-js-style
Grooveshark: grooveshark/javascript
How About We: howaboutwe/javascript
Mighty Spring: mightyspring/javascript
MinnPost: MinnPost/javascript
ModCloth: modcloth/javascript
National Geographic: natgeo/javascript
National Park Service: nationalparkservice/javascript
Razorfish: razorfish/javascript-style-guide
Shutterfly: shutterfly/javascript
Userify: userify/javascript
Zillow: zillow/javascript
ZocDoc: ZocDoc/javascript

Translation

This style guide is also available in other languages:

German: timofurrer/javascript-style-guide
Japanese: mitsuruog/javacript-style-guide
:br: Portuguese: armoucar/javascript-style-guide
Chinese: adamlu/javascript-style-guide
Spanish: paolocarrasco/javascript-style-guide
Korean: tipjs/javascript-style-guide

The JavaScript Style Guide Guide

Reference

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

[↑]

};

저작자표시 비영리

'JavaScript' 카테고리의 다른 글

object type JSON 변환 (0)	2017.04.09

Trackback: Comment:

일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Aㅏ...

Aㅏ...