tipjs/javascript-style-guide: Airbnb JavaScript 스타일 가이드 한국어

原作者: [db:作者] 来自: 网络收藏邀请

开源软件名称：

tipjs/javascript-style-guide

开源软件地址：

https://github.com/tipjs/javascript-style-guide

开源编程语言：

开源软件介绍：

원문:https://github.com/airbnb/javascript

Airbnb JavaScript 스타일 가이드() {

JavaScript에 대한 대부분 합리적인 접근 방법

다른 스타일 가이드들

형(Types)
참조(References)
오브젝트(Objects)
배열(Arrays)
구조화대입(Destructuring)
문자열(Strings)
함수(Functions)
Arrow함수(Arrow Functions)
Classes & Constructors
모듈(Modules)
이터레이터와 제너레이터(Iterators and Generators)
프로퍼티(Properties)
변수(Variables)
Hoisting
조건식과 등가식(Comparison Operators & Equality)
블록(Blocks)
코멘트(Comments)
공백(Whitespace)
콤마(Commas)
세미콜론(Semicolons)
형변환과 강제(Type Casting & Coercion)
명명규칙(Naming Conventions)
억세서(Accessors)
이벤트(Events)
jQuery
ECMAScript 5 Compatibility
ECMAScript 6 Styles
Testing
Performance
Resources
In the Wild
Translation
The JavaScript Style Guide Guide
Chat With Us About JavaScript
Contributors
License

형(Types)

1.1 Primitives: When you access a primitive type you work directly on its value.
1.1 Primitives: primitive type은 그 값을 직접 조작합니다.
- string
- number
- boolean
- null
- undefined
```
const foo = 1;
let bar = 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.

1.2 참조형: 참조형(Complex)은 참조를 통해 값을 조작합니다.

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.
2.1 모든 참조는 const 를 사용하고, var 를 사용하지 마십시오.

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.
2.2 참조를 재할당 해야한다면 var 대신 let 을 사용하십시오.

Why? let is block-scoped rather than function-scoped like var.

왜? var 같은 함수스코프 보다는 오히려 블록스코프의 let
```
// 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.

2.3 let 과 const 는 같이 블록스코프라는것을 유의하십시오.

// const and let only exist in the blocks they are defined in.
// const 와 let 은 선언된 블록의 안에서만 존재합니다.
{
  let a = 1;
  const b = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError

⬆ back to top

오브젝트(Objects)

3.1 Use the literal syntax for object creation.
3.1 오브젝트를 작성할때는, 리터럴 구문을 사용하십시오.
```
// bad
const item = new Object();

// good
const item = {};
```
3.2 If your code will be executed in browsers in script context, don't use reserved words as keys. It won't work in IE8. More info. It’s OK to use them in ES6 modules and server-side code.
3.2 코드가 브라우저상의 스크립트로 실행될때 예약어를 키로 이용하지 마십시오. IE8에서 작동하지 않습니다. More info 하지만 ES6 모듈안이나 서버사이드에서는 이용가능합니다.
```
// bad
const superman = {
  default: { clark: 'kent' },
  private: true,
};

// good
const superman = {
  defaults: { clark: 'kent' },
  hidden: true,
};
```
3.3 Use readable synonyms in place of reserved words.

3.3 예약어 대신 알기쉬운 동의어를 사용해 주십시오.

// bad
const superman = {
  class: 'alien',
};

// bad
const superman = {
  klass: 'alien',
};

// good
const superman = {
  type: 'alien',
};

3.4 Use computed property names when creating objects with dynamic property names.
3.4 동적 프로퍼티명을 갖는 오브젝트를 작성할때, 계산된 프로퍼티명(computed 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.5 Use object method shorthand.

3.5 메소드의 단축구문을 이용해 주십시오.

// bad
const atom = {
  value: 1,

  addValue: function (value) {
    return atom.value + value;
  },
};

// good
const atom = {
  value: 1,

  addValue(value) {
    return atom.value + value;
  },
};

3.6 Use property value shorthand.

3.6 프로퍼티의 단축구문을 이용해 주십시오.

Why? It is shorter to write and descriptive.

왜? 기술과 설명이 간결해지기 때문입니다.

const lukeSkywalker = 'Luke Skywalker';

// bad
const obj = {
  lukeSkywalker: lukeSkywalker,
};

// good
const obj = {
  lukeSkywalker,
};

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

3.7 프로퍼티의 단축구문은 오브젝트 선언의 시작부분에 그룹화 해주십시오.

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,
};

⬆ back to top

배열(Arrays)

4.1 Use the literal syntax for array creation.
4.1 배열을 작성 할 때는 리터럴 구문을 사용해 주십시오.
```
// bad
const items = new Array();

// good
const items = [];
```
4.2 Use Array#push instead of direct assignment to add items to an array.

4.2 직접 배열에 항목을 대입하지 말고, Array#push를 이용해 주십시오.

const someStack = [];

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

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

4.3 Use array spreads ... to copy arrays.

4.3 배열을 복사할때는 배열의 확장연산자 ... 를 이용해 주십시오.

// bad
const len = items.length;
const itemsCopy = [];
let i;

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

// good
const itemsCopy = [...items];

4.4 To convert an array-like object to an array, use Array#from.
4.4 array-like 오브젝트를 배열로 변환하는 경우는 Array#from을 이용해 주십시오.
```
const foo = document.querySelectorAll('.foo');
const nodes = Array.from(foo);
```

⬆ back to top

구조화대입(Destructuring)

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

5.1 하나의 오브젝트에서 복수의 프로퍼티를 억세스 할 때는 오브젝트 구조화대입을 이용해 주십시오.

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

왜? 구조화대입을 이용하는 것으로 프로퍼티를 위한 임시적인 참조의 작성을 줄일 수 있습니다.

// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;

  return `${firstName} ${lastName}`;
}

// good
function getFullName(obj) {
  const { firstName, lastName } = obj;
  return `${firstName} ${lastName}`;
}

// best
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}

5.2 Use array destructuring.

5.2 배열의 구조화대입을 이용해 주십시오.

const arr = [1, 2, 3, 4];

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;

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

5.3 복수의 값을 반환하는 경우는 배열의 구조화대입이 아닌 오브젝트의 구조화대입을 이용해 주십시오.

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

왜? 이렇게 함으로써 나중에 호출처에 영향을 주지않고 새로운 프로퍼티를 추가하거나 순서를 변경할수 있습니다.

// bad
function processInput(input) {
  // then a miracle occurs
  // 그리고 기적이 일어납니다.
  return [left, right, top, bottom];
}

// the caller needs to think about the order of return data
// 호출처에서 반환된 데이터의 순서를 고려할 필요가 있습니다.
const [left, __, top] = processInput(input);

// good
function processInput(input) {
  // then a miracle occurs
  // 그리고 기적이 일어납니다.
  return { left, right, top, bottom };
}

// the caller selects only the data they need
// 호출처에서는 필요한 데이터만 선택하면 됩니다.
const { left, right } = processInput(input);

⬆ back to top

문자열(Strings)

6.1 Use single quotes '' for strings.

6.1 문자열에는 싱크쿼트 '' 를 사용해 주십시오.

// bad
const name = "Capt. Janeway";

// good
const name = 'Capt. Janeway';

6.2 Strings longer than 100 characters should be written across multiple lines using string concatenation.
6.2 100문자 이상의 문자열은 문자열연결을 사용해서 복수행에 걸쳐 기술할 필요가 있습니다.
6.3 Note: If overused, long strings with concatenation could impact performance. jsPerf & Discussion.

6.3 주의: 문자연결을 과용하면 성능에 영향을 미칠 수 있습니다. jsPerf & Discussion.

// bad
const errorMessage = '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.';

// bad
const errorMessage = '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.';

// good
const errorMessage = '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.
6.4 프로그램에서 문자열을 생성하는 경우는 문자열 연결이 아닌 template strings를 이용해 주십시오.

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

왜? Template strings 는 문자열 보간기능과 적절한 줄바꿈 기능을 갖는 간결한 구문으로 가독성이 좋기 때문입니다.
```
// bad
function sayHi(name) {
  return 'How are you, ' + name + '?';
}

// bad
function sayHi(name) {
  return ['How are you, ', name, '?'].join();
}

// good
function sayHi(name) {
  return `How are you, ${name}?`;
}
```
6.5 Never use eval() on a string, it opens too many vulnerabilities.
6.5 절대로 eval() 을 이용하지 마십시오. 이것은 많은 취약점을 만들기 때문입니다.

⬆ back to top

함수(Functions)

7.1 Use function declarations instead of function expressions.
7.1 함수식 보다 함수선언을 이용해 주십시오.

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 use Arrow Functions in place of function expressions.

왜? 이름이 부여된 함수선언은 콜스택에서 간단하게 확인하는 것이 가능합니다. 또한 함수선언은 함수의 본체가 hoist 되어집니다. 그에 반해 함수식은 참조만이 hoist 되어집니다. 이 룰에 의해 함수식의 부분을 항상 Arrow함수에서 이용하는것이 가능합니다.
```
// bad
const foo = function () {
};

// good
function foo() {
}
```
7.2 Function expressions:

7.2 함수식

// immediately-invoked function expression (IIFE)
// 즉시 실행 함수식(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.3 함수이외의 블록 (if나 while같은) 안에서 함수를 선언하지 마십시오. 변수에 함수를 대입하는 대신 브라우저들은 그것을 허용하지만 모두가 다르게 해석합니다.
7.4 Note: ECMA-262 defines a block as a list of statements. A function declaration is not a statement. Read ECMA-262's note on this issue.

7.4 주의: ECMA-262 사양에서는 block 은 statements의 일람으로 정의되어 있지만 함수선언은 statements 가 아닙니다. Read ECMA-262's note on this issue.

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

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

7.5 Never name a parameter arguments. This will take precedence over the arguments object that is given to every function scope.
7.5 절대 파라메터에 arguments 를 지정하지 마십시오. 이것은 함수스코프에 전해지는 arguments 오브젝트의 참조를 덮어써 버립니다.
```
// bad
function nope(name, options, arguments) {
  // ...stuff...
}

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

7.6 Never use arguments, opt to use rest syntax ... instead.
7.6 절대 arguments 를 이용하지 마십시오. 대신에 rest syntax ... 를 이용해 주십시오.

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

왜? ... 을 이용하는것으로 몇개의 파라메터를 이용하고 싶은가를 확실하게 할 수 있습니다. 더해서 rest 파라메터는 arguments 와 같은 Array-like 오브젝트가 아닌 진짜 Array 입니다.
```
// bad
function concatenateAll() {
  const 
                      
```