javascript

KO | EN

gitlite — search

#javascript #typescript #golang #machine-learning #deep-learning #docker #macos #java #windows #kubernetes #pytorch #security #mcp #open-source

(★ 148,150)

Airbnb의 JavaScript 스타일 가이드입니다. JavaScript 작성 시 가독성을 높이고 유지보수를 용이하게 하기 위한 포괄적인 규칙과 모범 사례를 담고 있습니다.

javascript 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Airbnb JavaScript Style Guide() {

*대체로 합리적인 JavaScript 접근 방식*

> **참고**: 이 가이드는 [Babel](https://babeljs.io)을 사용하고 있음을 가정하며, [babel-preset-airbnb](https://npmjs.com/babel-preset-airbnb) 또는 그에 준하는 설정을 필수로 요구합니다. 또한 [airbnb-browser-shims](https://npmjs.com/airbnb-browser-shims) 등을 통해 애플리케이션에  shim/polyfill을 설치하고 있다고 가정합니다.

[![Downloads](https://img.shields.io/npm/dm/eslint-config-airbnb.svg)](https://www.npmjs.com/package/eslint-config-airbnb)
[![Downloads](https://img.shields.io/npm/dm/eslint-config-airbnb-base.svg)](https://www.npmjs.com/package/eslint-config-airbnb-base)
[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/airbnb/javascript?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)

이 가이드는 다른 언어로도 제공됩니다. [번역](#translation)을 참고하세요.

기타 스타일 가이드

- [ES5 (지원 중단됨)](https://github.com/airbnb/javascript/tree/es5-deprecated/es5)
  - [React](react/)
  - [CSS-in-JavaScript](css-in-javascript/)
  - [CSS & Sass](https://github.com/airbnb/css)
  - [Ruby](https://github.com/airbnb/ruby)

## 목차

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](#jquery)
  1. [ECMAScript 5 호환성](#ecmascript-5-compatibility)
  1. [ECMAScript 6+ (ES 2015+) 스타일](#ecmascript-6-es-2015-styles)
  1. [표준 라이브러리](#standard-library)
  1. [테스트](#testing)
  1. [성능](#performance)
  1. [참고자료](#resources)
  1. [실제 사용 사례](#in-the-wild)
  1. [번역](#translation)
  1. [JavaScript 스타일 가이드 가이드](#the-javascript-style-guide-guide)
  1. [JavaScript에 대해 대화하기](#chat-with-us-about-javascript)
  1. [기여자](#contributors)
  1. [라이선스](#license)
  1. [수정 사항](#amendments)

## 타입

<a name="types--primitives"></a><a name="1.1"></a>
  - [1.1](#types--primitives) **원시 타입(Primitives)**: 원시 타입에 접근할 때는 그 값에 직접적으로 작용합니다.

- `string`
    - `number`
    - `boolean`
    - `null`
    - `undefined`
    - `symbol`
    - `bigint`

<br />

```javascript
    const foo = 1;
    let bar = foo;

bar = 9;

console.log(foo, bar); // => 1, 9
    ```

- Symbol과 BigInt는 완벽하게 폴리필(polyfill)할 수 없으므로, 이를 네이티브로 지원하지 않는 브라우저나 환경을 타겟팅할 때는 사용하지 않아야 합니다.

<a name="types--complex"></a><a name="1.2"></a>
  - [1.2](#types--complex)  **참조 타입(Complex)**: 참조 타입에 접근할 때는 값에 대한 참조(reference)에 작용합니다.

- `object`
    - `array`
    - `function`

<br />

```javascript
    const foo = [1, 2];
    const bar = foo;

bar[0] = 9;

console.log(foo[0], bar[0]); // => 9, 9
    ```

**[⬆ 맨 위로 이동](#table-of-contents)**

## 참조

<a name="references--prefer-const"></a><a name="2.1"></a>
  - [2.1](#references--prefer-const) 모든 참조에는 `const`를 사용하고, `var`는 사용하지 마세요. eslint: [`prefer-const`](https://eslint.org/docs/rules/prefer-const), [`no-const-assign`](https://eslint.org/docs/rules/no-const-assign)

> 왜 그럴까요? 이를 통해 참조를 재할당할 수 없도록 보장하며, 이는 버그를 방지하고 코드를 이해하기 쉽게 만들어 줍니다.

```javascript
    // bad
    var a = 1;
    var b = 2;

// good
    const a = 1;
    const b = 2;
    ```

<a name="references--disallow-var"></a><a name="2.2"></a>
  - [2.2](#references--disallow-var) 참조를 반드시 재할당해야 하는 경우, `var` 대신 `let`을 사용하세요. eslint: [`no-var`](https://eslint.org/docs/rules/no-var)

> 왜 그럴까요? `let`은 `var`처럼 함수 스코프가 아니라 블록 스코프를 가집니다.

```javascript
    // bad
    var count = 1;
    if (true) {
      count += 1;
    }

// good, let을 사용하세요.
    let count = 1;
    if (true) {
      count += 1;
    }
    ```

<a name="references--block-scope"></a><a name="2.3"></a>
  - [2.3](#references--block-scope) `let`과 `const`는 모두 블록 스코프인 반면, `var`는 함수 스코프라는 점에 유의하세요.

```javascript
    // const와 let은 그것들이 정의된 블록 내에서만 존재합니다.
    {
      let a = 1;
      const b = 1;
      var c = 1;
    }
    console.log(a); // ReferenceError
    console.log(b); // ReferenceError
    console.log(c); // Prints 1
    ```

위 코드에서 볼 수 있듯이 `a`와 `b`를 참조하면 ReferenceError가 발생하는 반면, `c`는 해당 숫자를 출력합니다. 이는 `a`와 `b`가 블록 스코프인 반면 `c`는 포함된 함수를 스코프로 삼기 때문입니다.

**[⬆ 맨 위로 이동](#table-of-contents)**

## 객체

<a name="objects--no-new"></a><a name="3.1"></a>
  - [3.1](#objects--no-new) 객체 생성 시 리터럴 구문을 사용하세요. eslint: [`no-new-object`](https://eslint.org/docs/rules/no-new-object)

```javascript
    // bad
    const item = new Object();

// good
    const item = {};
    ```

<a name="es6-computed-properties"></a><a name="3.4"></a>
  - [3.2](#es6-computed-properties) 동적 프로퍼티 이름으로 객체를 생성할 때는 계산된 프로퍼티 이름(computed property names)을 사용하세요.

> 왜 그럴까요? 이를 통해 객체의 모든 프로퍼티를 한곳에서 정의할 수 있습니다.

```javascript

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

<a name="es6-object-shorthand"></a><a name="3.5"></a>
  - [3.3](#es6-object-shorthand) 객체 메서드 단축 구문을 사용하세요. eslint: [`object-shorthand`](https://eslint.org/docs/rules/object-shorthand)

```javascript
    // bad
    const atom = {
      value: 1,

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

// good
    const atom = {
      value: 1,

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

<a name="es6-object-concise"></a><a name="3.6"></a>
  - [3.4](#es6-object-concise) 프로퍼티 값 단축 구문을 사용하세요. eslint: [`object-shorthand`](https://eslint.org/docs/rules/object-shorthand)

> 왜 그럴까요? 코드가 더 짧아지고 설명적이게 됩니다.

```javascript
    const lukeSkywalker = 'Luke Skywalker';

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

// good
    const obj = {
      lukeSkywalker,
    };
    ```

<a name="objects--grouped-shorthand"></a><a name="3.7"></a>
  - [3.5](#objects--grouped-shorthand) 객체 선언부의 시작 부분에 단축 프로퍼티들을 모아두세요.

> 왜 그럴까요? 어떤 프로퍼티들이 단축 구문을 사용하고 있는지 파악하기가 더 쉬워집니다.

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

<a name="objects--quoted-props"></a><a name="3.8"></a>
  - [3.6](#objects--quoted-props) 유효하지 않은 식별자에 대해서만 프로퍼티에 따옴표를 붙이세요. eslint: [`quote-props`](https://eslint.org/docs/rules/quote-props)

> 왜 그럴까요? 일반적으로 주관적인 관점에서 가독성이 더 좋다고 여겨집니다. 구문 강조(syntax highlighting)를 개선하며, 많은 JS 엔진에서 더 쉽게 최적화됩니다.

```javascript
    // bad
    const bad = {
      'foo': 3,
      'bar': 4,
      'data-blah': 5,
    };

// good
    const good = {
      foo: 3,
      bar: 4,
      'data-blah': 5,
    };
    ```

<a name="objects--prototype-builtins"></a>
  - [3.7](#objects--prototype-builtins) `hasOwnProperty`, `propertyIsEnumerable`, `isPrototypeOf` 같은 `Object.prototype` 메서드를 직접 호출하지 마세요. eslint: [`no-prototype-builtins`](https://eslint.org/docs/rules/no-prototype-builtins)

> 왜 그럴까요? 이러한 메서드는 대상 객체의 프로퍼티에 의해 가려질(shadowed) 수 있으며(`{ hasOwnProperty: false }` 같은 경우) 혹은 객체가 null 객체(`Object.create(null)`)일 수 있습니다. ES2022를 지원하는 최신 브라우저나 <https://npmjs.com/object.hasown> 같은 폴리필을 사용하는 경우, `Object.prototype.hasOwnProperty.call`의 대안으로 `Object.hasOwn`을 사용할 수도 있습니다.

```javascript
    // bad
    console.log(object.hasOwnProperty(key));

// good
    console.log(Object.prototype.hasOwnProperty.call(object, key));

// better
    const has = Object.prototype.hasOwnProperty; // 모듈 스코프에서 조회 과정을 한 번만 캐시합니다.
    console.log(has.call(object, key));

// best
    console.log(Object.hasOwn(object, key)); // 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
    ```

<a name="objects--rest-spread"></a>
  - [3.8](#objects--rest-spread) 객체를 얕은 복사(shallow-copy)할 때는 [`Object.assign`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) 대신 객체 전개 구문(object spread syntax)을 선호하세요. 특정 프로퍼티를 제외한 새 객체를 얻으려면 객체 rest 파라미터 구문을 사용하세요. eslint: [`prefer-object-spread`](https://eslint.org/docs/rules/prefer-object-spread)

```javascript
    // very bad
    const original = { a: 1, b: 2 };
    const copy = Object.assign(original, { c: 3 }); // 이것은 `original`을 변형시킵니다 ಠ_ಠ
    delete copy.a; // 이것도 마찬가지입니다

// bad
    const original = { a: 1, b: 2 };
    const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }

// good
    const original = { a: 1, b: 2 };
    const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }

const { a, ...noA } = copy; // noA => { b: 2, c: 3 }
    ```

**[⬆ 맨 위로 이동](#table-of-contents)**

## 배열

<a name="arrays--literals"></a><a name="4.1"></a>
  - [4.1](#arrays--literals) 배열 생성 시 리터럴 구문을 사용하세요. eslint: [`no-array-constructor`](https://eslint.org/docs/rules/no-array-constructor)

```javascript
    // bad
    const items = new Array();

// good
    const items = [];
    ```

<a name="arrays--push"></a><a name="4.2"></a>
  - [4.2](#arrays--push) 배열에 항목을 추가할 때 직접 할당 대신 [Array#push](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push)를 사용하세요.

```javascript
    const someStack = [];

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

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

<a name="es6-array-spreads"></a><a name="4.3"></a>
  - [4.3](#es6-array-spreads) 배열을 복사할 때는 배열 전개 구문 `...`을 사용하세요.

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

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

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

<a name="arrays--from"></a>
  <a name="arrays--from-iterable"></a><a name="4.4"></a>
  - [4.4](#arrays--from-iterable) 이터러블(iterable) 객체를 배열로 변환할 때는 [`Array.from`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from) 대신 전개 구문 `...`을 사용하세요.

```javascript
    const foo = document.querySelectorAll('.foo');

// good
    const nodes = Array.from(foo);

// best
    const nodes = [...foo];
    ```

<a name="arrays--from-array-like"></a>
  - [4.5](#arrays--from-array-like) 유사 배열(array-like) 객체를 배열로 변환할 때는 [`Array.from`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from)을 사용하세요.

```javascript
    const arrLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };

// bad
    const arr = Array.prototype.slice.call(arrLike);

// good
    const arr = Array.from(arrLike);
    ```

<a name="arrays--mapping"></a>
  - [4.6](#arrays--mapping) 이터러블을 매핑할 때 중간 배열 생성을 방지하기 위해 전개 구문 `...` 대신 [`Array.from`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from)을 사용하세요.

```javascript
    // bad
    const baz = [...foo].map(bar);

// good
    const baz = Array.from(foo, bar);
    ```

<a name="arrays--callback-return"></a><a name="4.5"></a>
  - [4.7](#arrays--callback-return) 배열 메서드 콜백 안에서는 return 문을 사용하세요. [8.2](#arrows--implicit-return)에 따라, 함수의 본문이 부수 효과(side effects)가 없는 표현식을 반환하는 단일 문장으로 이루어진 경우 return을 생략해도 괜찮습니다. eslint: [`array-callback-return`](https://eslint.org/docs/rules/array-callback-return)

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

// good
    [1, 2, 3].map((x) => x + 1);

// bad - 반환값이 없으면 첫 번째 반복 이후 `acc`가 undefined가 됩니다.
    [[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => {
      const flatten = acc.concat(item);
    });

// good
    [[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => {
      const flatten = acc.concat(item);
      return flatten;
    });

// bad
    inbox.filter((msg) => {
      const { subject, author } = msg;
      if (subject === 'Mockingbird') {
        return author === 'Harper Lee';
      } else {
        return false;
      }
    });

// good
    inbox.filter((msg) => {
      const { subject, author } = msg;
      if (subject === 'Mockingbird') {
        return author === 'Harper Lee';
      }

return false;
    });
    ```

<a name="arrays--bracket-newline"></a>
  - [4.8](#arrays--bracket-newline) 배열이 여러 줄인 경우, 여는 배열 괄호 뒤와 닫는 배열 괄호 전에 줄바꿈을 사용하세요.

```javascript
    // bad
    const arr = [
      [0, 1], [2, 3], [4, 5],
    ];

const objectInArray = [{
      id: 1,
    }, {
      id: 2,
    }];

const numberInArray = [
      1, 2,
    ];

// good
    const arr = [[0, 1], [2, 3], [4, 5]];

const objectInArray = [
      {
        id: 1,
      },
      {
        id: 2,
      },
    ];

const numberInArray = [
      1,
      2,
    ];
    ```

**[⬆ 맨 위로 이동](#table-of-contents)**

## 구조 분해

<a name="destructuring--object"></a><a name="5.1"></a>
  - [5.1](#destructuring--object) 객체의 여러 프로퍼티에 접근하여 사용할 때는 객체 구조 분해(object destructuring)를 사용하세요. eslint: [`prefer-destructuring`](https://eslint.org/docs/rules/prefer-destructuring)

> 왜 그럴까요? 구조 분해를 사용하면 해당 프로퍼티들을 위한 임시 참조를 만들지 않아도 되며, 객체에 반복적으로 접근하는 것을 피할 수 있습니다. 객체에 반복적으로 접근하는 코드는 중복을 늘리고, 읽기 어렵게 만들며, 실수할 여지를 키웁니다. 또한 객체 구조 분해는 블록 내에서 사용되는 객체 구조의 정의를 한곳에 모아주므로, 무엇이 사용되는지 파악하기 위해 블록 전체를 읽을 필요가 없어집니다.

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

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

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

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

<a name="destructuring--array"></a><a name="5.2"></a>
  - [5.2](#destructuring--array) 배열 구조 분해를 사용하세요. eslint: [`prefer-destructuring`](https://eslint.org/docs/rules/prefer-destructuring)

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

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

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

<a name="destructuring--object-over-array"></a><a name="5.3"></a>
  - [5.3](#destructuring--object-over-array) 여러 값을 반환받을 때는 배열 구조 분해 대신 객체 구조 분해를 사용하세요.

> 왜 그럴까요? 호출부를 깨뜨리지 않고도 시간이 지남에 따라 새로운 프로퍼티를 추가하거나 항목의 순서를 변경할 수 있습니다.

```javascript
    // bad
    function processInput(input) {
      // 이때 기적이 일어납니다
      return [left, right, top, bottom];
    }

// 호출자는 반환 데이터의 순서를 고려해야 합니다
    const [left, __, top] = processInput(input);

// good
    function processInput(input) {
      // 이때 기적이 일어납니다
      return { left, right, top, bottom };
    }

// 호출자는 필요한 데이터만 선택합니다
    const { left, top } = processInput(input);
    ```

**[⬆ 맨 위로 이동](#table-of-contents)**

## 문자열

<a name="strings--quotes"></a><a name="6.1"></a>
  - [6.1](#strings--quotes) 문자열에는 홑따옴표(`''`)를 사용하세요. eslint: [`quotes`](https://eslint.org/docs/rules/quotes)

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

// bad - 템플릿 리터럴에는 보간(interpolation)이나 줄바꿈이 포함되어야 합니다
    const name = `Capt. Janeway`;

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

<a name="strings--line-length"></a><a name="6.2"></a>
  - [6.2](#strings--line-length) 100자를 초과하게 만드는 긴 문자열은 문자열 연결(concatenation)을 사용하여 여러 줄에 걸쳐 작성하지 마세요.

> 왜 그럴까요? 끊어진 문자열은 다루기 번거롭고 코드를 검색하기 어렵게 만듭니다.

```javascript
    // 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.';
    ```

<a name="es6-template-literals"></a><a name="6.4"></a>
  - [6.3](#es6-template-literals) 프로그래밍 방식으로 문자열을 조합할 때는 문자열 연결 대신 템플릿 문자열을 사용하세요. eslint: [`prefer-template`](https://eslint.org/docs/rules/prefer-template) [`template-curly-spacing`](https://eslint.org/docs/rules/template-curly-spacing)

> 왜 그럴까요? 템플릿 문자열은 적절한 줄바꿈과 문자열 보간 기능을 갖춘 가독성 높고 간결한 구문을 제공합니다.

```javascript
    // bad
    function sayHi(name) {
      return 'How are you, ' + name + '?';
    }

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

// bad
    function sayHi(name) {
      return `How are you, ${ name }?`;
    }

// good
    function sayHi(name) {
      return `How are you, ${name}?`;
    }
    ```

<a name="strings--eval"></a><a name="6.5"></a>
  - [6.4](#strings--eval) 문자열에 `eval()`을 절대 사용하지 마세요. 너무 많은 취약점에 노출됩니다. eslint: [`no-eval`](https://eslint.org/docs/rules/no-eval)

<a name="strings--escaping"></a>
  - [6.5](#strings--escaping) 문자열 내에서 불필요하게 문자를 이스케이프(escape)하지 마세요. eslint: [`no-useless-escape`](https://eslint.org/docs/rules/no-useless-escape)

> 왜 그럴까요? 백슬래시(`\`)는 가독성을 해치므로 꼭 필요한 경우에만 포함되어야 합니다.

```javascript
    // bad
    const foo = '\'this\' \i\s \"quoted\"';

// good
    const foo = '\'this\' is "quoted"';
    const foo = `my name is '${name}'`;
    ```

**[⬆ 맨 위로 이동](#table-of-contents)**

## 함수

<a name="functions--declarations"></a><a name="7.1"></a>
  - [7.1](#functions--declarations) 함수 선언문 대신 이름이 있는 함수 표현식(named function expressions)을 사용하세요. eslint: [`func-style`](https://eslint.org/docs/rules/func-style), [`func-names`](https://eslint.org/docs/latest/rules/func-names)

> 왜 그럴까요? 함수 선언문은 호이스팅되므로 파일 내에서 정의되기 전에 함수를 참조하는 것이 매우 쉽습니다(너무 쉽습니다). 이는 가독성과 유지보수성을 해칩니다. 함수의 정의가 너무 크거나 복잡해서 파일의 나머지 부분을 이해하는 데 방해가 된다면, 아예 별도의 모듈로 분리할 때일 수 있습니다! 이름이 포함된 변수로부터 유추되는지 여부와 관계없이(최신 브라우저나 Babel 같은 컴파일러를 사용할 때는 종종 그렇습니다) 표현식에 명시적으로 이름을 붙이는 것을 잊지 마세요. 이렇게 하면 Error의 콜스택에 대한 모든 가정을 없애줍니다. ([토론](https://github.com/airbnb/javascript/issues/794))

```javascript
    // bad
    function foo() {
      // ...
    }

// bad
    const foo = function () {
      // ...
    };

// good
    // 변수 참조 호출과 구분되는 렉시컬 이름
    const short = function longUniqueMoreDescriptiveLexicalFoo() {
      // ...
    };
    ```

<a name="functions--iife"></a><a name="7.2"></a>
  - [7.2](#functions--iife) 즉시 실행 함수 표현식(IIFE)은 괄호로 감싸세요. eslint: [`wrap-iife`](https://eslint.org/docs/rules/wrap-iife)

> 왜 그럴까요? 즉시 실행 함수 표현식은 하나의 독립된 단위입니다. 함수 자체와 이를 호출하는 괄호를 모두 괄호로 감싸면 이를 깔끔하게 표현할 수 있습니다. 모듈이 보편화된 세상에서는 IIFE가 거의 필요하지 않음에 유의하세요.

```javascript
    // 즉시 실행 함수 표현식 (IIFE)
    (function () {
      console.log('Welcome to the Internet. Please follow me.');
    }());
    ```

<a name="functions--in-blocks"></a><a name="7.3"></a>
  - [7.3](#functions--in-blocks) 함수가 아닌 블록(`if`, `while` 등) 안에서는 함수를 절대 선언하지 마세요. 대신 함수를 변수에 할당하세요. 브라우저는 이를 허용하지만 제각각 다르게 해석하므로 골치 아픈 문제를 야기합니다. eslint: [`no-loop-func`](https://eslint.org/docs/rules/no-loop-func)

<a name="functions--note-on-blocks"></a><a name="7.4"></a>
  - [7.4](#functions--note-on-blocks) **참고:** ECMA-262는 `block`을 문장(statement)의 목록으로 정의합니다. 함수 선언문은 문장이 아닙니다.

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

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

<a name="functions--arguments-shadow"></a><a name="7.5"></a>
  - [7.5](#functions--arguments-shadow) 파라미터 이름을 `arguments`로 짓지 마세요. 이 이름은 모든 함수 스코프에 주어지는 `arguments` 객체보다 우선시됩니다.

```javascript
    // bad
    function foo(name, options, arguments) {
      // ...
    }

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

<a name="es6-rest"></a><a name="7.6"></a>
  - [7.6](#es6-rest) `arguments` 사용을 지양하고, 대신 rest 구문 `...`을 선택하세요. eslint: [`prefer-rest-params`](https://eslint.org/docs/rules/prefer-rest-params)

> 왜 그럴까요? `...`을 사용하면 어떤 인자들을 가져오고 싶은지 명시적으로 드러납니다. 게다가 rest 인자들은 `arguments`처럼 단순한 유사 배열이 아니라 실제 배열(Array)입니다.

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

// good
    function concatenateAll(...args) {
      return args.join('');
    }
    ```

<a name="es6-default-parameters"></a><a name="7.7"></a>
  - [7.7](#es6-default-parameters) 함수의 인자를 변형(mutating)하는 것보다 기본 파라미터 구문을 사용하세요.

```javascript
    // 정말 나쁜 예
    function handleThings(opts) {
      // 안 됩니다! 함수 인자를 변형해서는 안 됩니다.
      // 이중으로 나쁜 점: opts가 falsy한 경우 객체로 설정되는데,
      // 이것이 의도한 바일 수 있으나 미묘한 버그를 유발할 수 있습니다.
      opts = opts || {};
      // ...
    }

// 여전히 나쁜 예
    function handleThings(opts) {
      if (opts === void 0) {
        opts = {};
      }
      // ...
    }

// good
    function handleThings(opts = {}) {
      // ...
    }
    ```

<a name="functions--default-side-effects"></a><a name="7.8"></a>
  - [7.8](#functions--default-side-effects) 기본 파라미터로 인한 부수 효과를 피하세요.

> 왜 그럴까요? 코드를 추론하기 혼란스럽기 때문입니다.

```javascript
    let b = 1;
    // bad
    function count(a = b++) {
      console.log(a);
    }
    count();  // 1
    count();  // 2
    count(3); // 3
    count();  // 3
    ```

<a name="functions--defaults-last"></a><a name="7.9"></a>
  - [7.9](#functions--defaults-last) 기본 파라미터는 항상 맨 마지막에 배치하세요. eslint: [`default-param-last`](https://eslint.org/docs/rules/default-param-last)

```javascript
    // bad
    function handleThings(opts = {}, name) {
      // ...
    }

// good
    function handleThings(name, opts = {}) {
      // ...
    }
    ```

<a name="functions--constructor"></a><a name="7.10"></a>
  - [7.10](#functions--constructor) 새 함수를 생성하기 위해 Function 생성자를 절대 사용하지 마세요. eslint: [`no-new-func`](https://eslint.org/docs/rules/no-new-func)

> 왜 그럴까요? 이런 방식으로 함수를 생성하면 `eval()`과 유사하게 문자열을 평가하게 되어 취약점이 발생합니다.

```javascript
    // bad
    const add = new Function('a', 'b', 'return a + b');

// 여전히 나쁜 예
    const subtract = Function('a', 'b', 'return a - b');
    ```

<a name="functions--signature-spacing"></a><a name="7.11"></a>
  - [7.11](#functions--signature-spacing) 함수 시그니처 내의 공백 규칙입니다. eslint: [`space-before-function-paren`](https://eslint.org/docs/rules/space-before-function-paren) [`space-before-blocks`](https://eslint.org/docs/rules/space-before-blocks)

> 왜 그럴까요? 일관성은 중요하며, 이름을 추가하거나 제거할 때 공백을 추가하거나 제거할 필요가 없어야 합니다.

```javascript
    // bad
    const f = function(){};
    const g = function (){};
    const h = function() {};

// good
    const x = function () {};
    const y = function a() {};
    ```

<a name="functions--mutate-params"></a><a name="7.12"></a>
  - [7.12](#functions--mutate-params) 파라미터를 절대 변형(mutate)하지 마세요. eslint: [`no-param-reassign`](https://eslint.org/docs/rules/no-param-reassign)

> Why? 파라미터로 전달된 객체를 조작하면 원래 호출자에게 원치 않는 변수 부수 효과를 일으킬 수 있습니다.

```javascript
    // bad
    function f1(obj) {
      obj.key = 1;
    }

// good
    function f2(obj) {
      const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;
    }
    ```

<a name="functions--reassign-params"></a><a name="7.13"></a>
  - [7.13](#functions--reassign-params) 파라미터를 재할당하지 마세요. eslint: [`no-param-reassign`](https://eslint.org/docs/rules/no-param-reassign)

> 왜 그럴까요? 파라미터를 재할당하면 예상치 못한 동작이 발생할 수 있으며, 특히 `arguments` 객체에 접근할 때 그렇습니다. 또한 특히 V8 엔진에서 최적화 문제를 일으킬 수 있습니다.

```javascript
    // bad
    function f1(a) {
      a = 1;
      // ...
    }

function f2(a) {
      if (!a) { a = 1; }
      // ...
    }

// good
    function f3(a) {
      const b = a || 1;
      // ...
    }

function f4(a = 1) {
      // ...
    }
    ```

<a name="functions--spread-vs-apply"></a><a name="7.14"></a>
  - [7.14](#functions--spread-vs-apply) 가변 인자(variadic) 함수를 호출할 때는 전개 구문 `...` 사용을 선호하세요. eslint: [`prefer-spread`](https://eslint.org/docs/rules/prefer-spread)

> 왜 그럴까요? 더 깔끔하고, 컨텍스트를 제공할 필요가 없으며, `new`와 `apply`를 조합하기가 쉽지 않기 때문입니다.

```javascript
    // bad
    const x = [1, 2, 3, 4, 5];
    console.log.apply(console, x);

// good
    const x = [1, 2, 3, 4, 5];
    console.log(...x);

// bad
    new (Function.prototype.bind.apply(Date, [null, 2016, 8, 5]));

// good
    new Date(...[2016, 8, 5]);
    ```

<a name="functions--signature-invocation-indentation"></a>
  - [7.15](#functions--signature-invocation-indentation) 여러 줄로 이루어진 함수 시그니처나 호출부는 이 가이드의 다른 여러 줄 목록들처럼 들여쓰기해야 합니다. 즉, 각 항목은 독립된 줄에 위치하며 마지막 항목에는 후행 쉼표(trailing comma)를 붙입니다. eslint: [`function-paren-newline`](https://eslint.org/docs/rules/function-paren-newline)

```javascript
    // bad
    function foo(bar,
                 baz,
                 quux) {
      // ...
    }

// good
    function foo(
      bar,
      baz,
      quux,
    ) {
      // ...
    }

// bad
    console.log(foo,
      bar,
      baz);

// good
    console.log(
      foo,
      bar,
      baz,
    );
    ```

**[⬆ 맨 위로 이동](#table-of-contents)**

## 화살표 함수

<a name="arrows--use-them"></a><a name="8.1"></a>
  - [8.1](#arrows--use-them) 익명 함수를 사용해야 할 때(인라인 콜백을 전달할 때 등)는 화살표 함수 표기법을 사용하세요. eslint: [`prefer-arrow-callback`](https://eslint.org/docs/rules/prefer-arrow-callback), [`arrow-spacing`](https://eslint.org/docs/rules/arrow-spacing)

> 왜 그럴까요? 대개 의도하는 바인 `this`의 컨텍스트에서 실행되는 함수 버전을 생성하며, 구문이 더 간결하기 때문입니다.

> 사용하지 말아야 할 때? 꽤 복잡한 함수가 있다면, 해당 로직을 별도의 이름 있는 함수 표현식으로 분리하는 것이 좋습니다.

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

// good
    [1, 2, 3].map((x) => {
      const y = x + 1;
      return x * y;
    });
    ```

<a name="arrows--implicit-return"></a><a name="8.2"></a>
  - [8.2](#arrows--implicit-return) 함수 본문이 부수 효과가 없는 [표현식](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) 하나를 반환하는 경우, 중괄호를 생략하고 암시적 반환(implicit return)을 사용하세요. 그렇지 않은 경우 중괄호를 유지하고 `return`문을 사용하세요. eslint: [`arrow-parens`](https://eslint.org/docs/rules/arrow-parens), [`arrow-body-style`](https://eslint.org/docs/rules/arrow-body-style)

> 왜 그럴까요? 문법적 설탕(syntactic sugar)이기 때문입니다. 여러 함수가 체이닝될 때 가독성이 좋습니다.

```javascript
    // bad
    [1, 2, 3].map((number) => {
      const nextNumber = number + 1;
      `A string containing the ${nextNumber}.`;
    });

// good
    [1, 2, 3].map((number) => `A string containing the ${number + 1}.`);

// good
    [1, 2, 3].map((number) => {
      const nextNumber = number + 1;
      return `A string containing the ${nextNumber}.`;
    });

// good
    [1, 2, 3].map((number, index) => ({
      [index]: number,
    }));

// 부수 효과가 있는 경우 암시적 반환을 사용하지 마세요
    function foo(callback) {
      const val = callback();
      if (val === true) {
        // 콜백이 true를 반환할 때 무언가를 수행합니다
      }
    }

let bool = false;

// bad
    foo(() => bool = true);

// good
    foo(() => {
      bool = true;
    });
    ```

<a name="arrows--paren-wrap"></a><a name="8.3"></a>
  - [8.3](#arrows--paren-wrap) 표현식이 여러 줄에 걸쳐 있는 경우 가독성을 높이기 위해 괄호로 감싸세요.

> 왜 그럴까요? 함수의 시작과 끝을 명확히 보여줍니다.

```javascript
    // bad
    ['get', 'post', 'put'].map((httpMethod) => Object.prototype.hasOwnProperty.call(
        httpMagicObjectWithAVeryLongName,
        httpMethod,
      )
    );

// good
    ['get', 'post', 'put'].map((httpMethod) => (
      Object.prototype.hasOwnProperty.call(
        httpMagicObjectWithAVeryLongName,
        httpMethod,
      )
    ));
    ```

<a name="arrows--one-arg-parens"></a><a name="8.4"></a>
  - [8.4](#arrows--one-arg-parens) 명확성과 일관성을 위해 인자 주변에는 항상 괄호를 포함하세요. eslint: [`arrow-parens`](https://eslint.org/docs/rules/arrow-parens)

> 왜 그럴까요? 인자를 추가하거나 제거할 때 diff 변경 사항(churn)을 최소화해 줍니다.

```javascript
    // bad
    [1, 2, 3].map(x => x * x);

// good
    [1, 2, 3].map((x) => x * x);

// bad
    [1, 2, 3].map(number => (
      `A long string with the ${number}. It’s so long that we don’t want it to take up space on the .map line!`
    ));

// good
    [1, 2, 3].map((number) => (
      `A long string with the ${number}. It’s so long that we don’t want it to take up space on the .map line!`
    ));

// bad
    [1, 2, 3].map(x => {
      const y = x + 1;
      return x * y;
    });

// good
    [1, 2, 3].map((x) => {
      const y = x + 1;
      return x * y;
    });
    ```

<a name="arrows--confusing"></a><a name="8.5"></a>
  - [8.5](#arrows--confusing) 화살표 함수 구문(`=>`)이 비교 연산자(`<=`, `>=`)와 혼동되지 않도록 하세요. eslint: [`no-confusing-arrow`](https://eslint.org/docs/rules/no-confusing-arrow)

```javascript
    // bad
    const itemHeight = (item) => item.height <= 256 ? item.largeSize : item.smallSize;

// bad
    const itemHeight = (item) => item.height >= 256 ? item.largeSize : item.smallSize;

// good
    const itemHeight = (item) => (item.height <= 256 ? item.largeSize : item.smallSize);

// good
    const itemHeight = (item) => {
      const { height, largeSize, smallSize } = item;
      return height <= 256 ? largeSize : smallSize;
    };
    ```

<a name="whitespace--implicit-arrow-linebreak"></a>
  - [8.6](#whitespace--implicit-arrow-linebreak) 암시적 반환이 있는 화살표 함수 본문의 위치를 강제합니다. eslint: [`implicit-arrow-linebreak`](https://eslint.org/docs/rules/implicit-arrow-linebreak)

```javascript
    // bad
    (foo) =>
      bar;

(foo) =>
      (bar);

// good
    (foo) => bar;
    (foo) => (bar);
    (foo) => (
       bar
    )
    ```

**[⬆ 맨 위로 이동](#table-of-contents)**

## 클래스 & 생성자

<a name="constructors--use-class"></a><a name="9.1"></a>
  - [9.1](#constructors--use-class) 항상 `class`를 사용하세요. `prototype`을 직접 조작하는 것은 피하세요.

> 왜 그럴까요? `class` 구문이 더 간결하고 추론하기 쉽기 때문입니다.

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

// good
    class Queue {
      constructor(contents = []) {
        this.queue = [...contents];
      }
      pop() {
        const value = this.queue[0];
        this.queue.splice(0, 1);
        return value;
      }
    }
    ```

<a name="constructors--extends"></a><a name="9.2"></a>
  - [9.2](#constructors--extends) 상속에는 `extends`를 사용하세요.

> 왜 그럴까요? `instanceof`를 깨뜨리지 않고 프로토타입 기능을 상속할 수 있는 내장 방식이기 때문입니다.

```javascript
    // bad
    const inherits = require('inherits');
    function PeekableQueue(contents) {
      Queue.apply(this, contents);
    }
    inherits(PeekableQueue, Queue);
    PeekableQueue.prototype.peek = function () {
      return this.queue[0];
    };

// good
    class PeekableQueue extends Queue {
      peek() {
        return this.queue[0];
      }
    }
    ```

<a name="constructors--chaining"></a><a name="9.3"></a>
  - [9.3](#constructors--chaining) 메서드 체이닝(method chaining)을 돕기 위해 메서드가 `this`를 반환할 수 있습니다.

```javascript
    // bad
    Jedi.prototype.jump = function () {
      this.jumping = true;
      return true;
    };

Jedi.prototype.setHeight = function (height) {
      this.height = height;
    };

const luke = new Jedi();
    luke.jump(); // => true
    luke.setHeight(20); // => undefined

// good
    class Jedi {
      jump() {
        this.jumping = true;
        return this;
      }

setHeight(height) {
        this.height = height;
        return this;
      }
    }

const luke = new Jedi();

luke.jump()
      .setHeight(20);
    ```

<a name="constructors--tostring"></a><a name="9.4"></a>
  - [9.4](#constructors--tostring) 커스텀 `toString()` 메서드를 작성하는 것은 괜찮지만, 성공적으로 작동하며 부수 효과를 유발하지 않는지 확인하세요.

```javascript
    class Jedi {
      constructor(options = {}) {
        this.name = options.name || 'no name';
      }

getName() {
        return this.name;
      }

toString() {
        return `Jedi - ${this.getName()}`;
      }
    }
    ```

<a name="constructors--no-useless"></a><a name="9.5"></a>
  - [9.5](#constructors--no-useless) 클래스에는 명시되지 않은 경우 기본 생성자가 존재합니다. 빈 생성자 함수나 부모 클래스로 단순히 위임하기만 하는 생성자는 불필요합니다. eslint: [`no-useless-constructor`](https://eslint.org/docs/rules/no-useless-constructor)

```javascript
    // bad
    class Jedi {
      constructor() {}

getName() {
        return this.name;
      }
    }

// bad
    class Rey extends Jedi {
      constructor(...args) {
        super(...args);
      }
    }

// good
    class Rey extends Jedi {
      constructor(...args) {
        super(...args);
        this.name = 'Rey';
      }
    }
    ```

<a name="classes--no-duplicate-members"></a>
  - [9.6](#classes--no-duplicate-members) 중복된 클래스 멤버를 피하세요. eslint: [`no-dupe-class-members`](https://eslint.org/docs/rules/no-dupe-class-members)

> 왜 그럴까요? 중복된 클래스 멤버 선언은 마지막에 선언된 것을 조용히 우선시합니다. 중복이 존재한다면 그것은 거의 확실히 버그입니다.

```javascript
    // bad
    class Foo {
      bar() { return 1; }
      bar() { return 2; }
    }

// good
    class Foo {
      bar() { return 1; }
    }

// good
    class Foo {
      bar() { return 2; }
    }
    ```

<a name="classes--methods-use-this"></a>
  - [9.7](#classes--methods-use-this) 외부 라이브러리나 프레임워크에서 특정 비정적(non-static) 메서드 사용을 요구하는 경우가 아니라면, 클래스 메서드는 `this`를 사용하거나 정적(static) 메서드로 만들어야 합니다. 인스턴스 메서드라는 것은 수신자(receiver)의 프로퍼티에 따라 다르게 동작함을 나타내야 합니다. eslint: [`class-methods-use-this`](https://eslint.org/docs/rules/class-methods-use-this)

```javascript
    // bad
    class Foo {
      bar() {
        console.log('bar');
      }
    }

// good - this가 사용됨
    class Foo {
      bar() {
        console.log(this.bar);
      }
    }

// good - constructor는 예외임
    class Foo {
      constructor() {
        // ...
      }
    }

// good - 정적 메서드는 this를 사용할 것으로 기대되지 않음
    class Foo {
      static bar() {
        console.log('bar');
      }
    }
    ```

**[⬆ 맨 위로 이동](#table-of-contents)**

## 모듈

<a name="modules--use-them"></a><a name="10.1"></a>
  - [10.1](#modules--use-them) 비표준 모듈 시스템 대신 항상 모듈(`import`/`export`)을 사용하세요. 선호하는 모듈 시스템으로 언제든 트랜스파일(transpile)할 수 있습니다.

> 왜 그럴까요? 모듈은 미래입니다. 미래를 지금부터 사용합시다.

```javascript
    // bad
    const AirbnbStyleGuide = require('./AirbnbStyleGuide');
    module.exports = AirbnbStyleGuide.es6;

// ok
    import AirbnbStyleGuide from './AirbnbStyleGuide';
    export default AirbnbStyleGuide.es6;

// best
    import { es6 } from './AirbnbStyleGuide';
    export default es6;
    ```

<a name="modules--no-wildcard"></a><a name="10.2"></a>
  - [10.2](#modules--no-wildcard) 와일드카드 import를 사용하지 마세요.

> 왜 그럴까요? 이를 통해 단 하나의 기본 내보내기(default export)를 갖도록 보장할 수 있습니다.

```javascript
    // bad
    import * as AirbnbStyleGuide from './AirbnbStyleGuide';

// good
    import AirbnbStyleGuide from './AirbnbStyleGuide';
    ```

<a name="modules--no-export-from-import"></a><a name="10.3"></a>
  - [10.3](#modules--no-export-from-import) 그리고 import로부터 직접 export하지 마세요.

> 왜 그럴까요? 한 줄짜리 코드가 간결하긴 하지만, 명확한 import 방식 하나와 명확한 export 방식 하나를 갖는 것이 일관성을 만들어 줍니다.

```javascript
    // bad
    // 파일명 es6.js
    export { es6 as default } from './AirbnbStyleGuide';

// good
    // 파일명 es6.js
    import { es6 } from './AirbnbStyleGuide';
    export default es6;
    ```

<a name="modules--no-duplicate-imports"></a>
  - [10.4](#modules--no-duplicate-imports) 동일한 경로에서의 import는 한곳에서만 하세요.
 eslint: [`no-duplicate-imports`](https://eslint.org/docs/rules/no-duplicate-imports)
    > 왜 그럴까요? 동일한 경로에서 import하는 줄이 여러 개 있으면 코드를 유지보수하기 어려워질 수 있습니다.

```javascript
    // bad
    import foo from 'foo';
    // … 기타 다른 import들 … //
    import { named1, named2 } from 'foo';

// good
    import foo, { named1, named2 } from 'foo';

// good
    import foo, {
      named1,
      named2,
    } from 'foo';
    ```

<a name="modules--no-mutable-exports"></a>
  - [10.5](#modules--no-mutable-exports) 변경 가능한(mutable) 바인딩을 export하지 마세요.
 eslint: [`import/no-mutable-exports`](https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-mutable-exports.md)
    > 왜 그럴까요? 변형(mutation)은 일반적으로 지양해야 하며, 특히 변경 가능한 바인딩을 export할 때는 더욱 그렇습니다. 일부 특수한 경우에는 이 기법이 필요할 수 있지만, 일반적으로는 상수 참조만 export해야 합니다.

```javascript
    // bad
    let foo = 3;
    export { foo };

// good
    const foo = 3;
    export { foo };
    ```

<a name="modules--prefer-default-export"></a>
  - [10.6](#modules--prefer-default-export) 단일 export가 있는 모듈에서는 named export보다 default export를 선호하세요.
 eslint: [`import/prefer-default-export`](https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/prefer-default-export.md)
    > 왜 그럴까요? 오직 한 가지만 export하는 파일들을 더 많이 장려하기 위함이며, 이는 가독성과 유지보수성에 더 좋습니다.

```javascript
    // bad
    export function foo() {}

// good
    export default function foo() {}
    ```

<a name="modules--imports-first"></a>
  - [10.7](#modules--imports-first) 모든 `import`는 import가 아닌 문장들보다 위에 배치하세요.
 eslint: [`import/first`](https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/first.md)
    > 왜 그럴까요? `import`는 호이스팅되므로, 모두 맨 위에 유지하면 예상치 못한 동작을 방지할 수 있습니다.

```javascript
    // bad
    import foo from 'foo';
    foo.init();

import bar from 'bar';

// good
    import foo from 'foo';
    import bar from 'bar';

foo.init();
    ```

<a name="modules--multiline-imports-over-newlines"></a>
  - [10.8](#modules--multiline-imports-over-newlines) 여러 줄에 걸친 import는 여러 줄짜리 배열 및 객체 리터럴과 마찬가지로 들여쓰기해야 합니다.
 eslint: [`object-curly-newline`](https://eslint.org/docs/rules/object-curly-newline)

> 왜 그럴까요? 중괄호는 이 스타일 가이드의 다른 모든 중괄호 블록과 동일한 들여쓰기 규칙을 따르며, 후행 쉼표도 마찬가지입니다.

```javascript
    // bad
    import {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path';

// good
    import {
      longNameA,
      longNameB,
      longNameC,
      longNameD,
      longNameE,
    } from 'path';
    ```

<a name="modules--no-webpack-loader-syntax"></a>
  - [10.9](#modules--no-webpack-loader-syntax) 모듈 import 구문에서 Webpack 로더 구문을 사용하지 마세요.
 eslint: [`import/no-webpack-loader-syntax`](https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-webpack-loader-syntax.md)
    > 왜 그럴까요? import에 Webpack 구문을 사용하면 코드가 모듈 번들러에 강하게 결합되기 때문입니다. `webpack.config.js`에서 로더 구문을 사용하는 것을 선호하세요.

```javascript
    // bad
    import fooSass from 'css!sass!foo.scss';
    import barCss from 'style!css!bar.css';

// good
    import fooSass from 'foo.scss';
    import barCss from 'bar.css';
    ```

<a name="modules--import-extensions"></a>
  - [10.10](#modules--import-extensions) JavaScript 파일 확장자를 포함하지 마세요.
 eslint: [`import/extensions`](https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/extensions.md)
    > 왜 그럴까요? 확장자를 포함하면 리팩토링이 저해되며, import하는 모듈의 구현 세부 사항을 모든 소비처에 부적절하게 하드코딩하게 됩니다.

```javascript
    // bad
    import foo from './foo.js';
    import bar from './bar.jsx';
    import baz from './baz/index.jsx';

// good
    import foo from './foo';
    import bar from './bar';
    import baz from './baz';
    ```

**[⬆ 맨 위로 이동](#table-of-contents)**

## 반복자와 제너레이터

<a name="iterators--nope"></a><a name="11.1"></a>
  - [11.1](#iterators--nope) 반복자(iterator)를 사용하지 마세요. `for-in`이나 `for-of` 같은 루프 대신 JavaScript의 고차 함수(higher-order functions)를 선호하세요. eslint: [`no-iterator`](https://eslint.org/docs/rules/no-iterator) [`no-restricted-syntax`](https://eslint.org/docs/rules/no-restricted-syntax)

> 왜 그럴까요? 이는 불변성(immutable) 규칙을 강제하기 위함입니다. 부수 효과를 다루는 것보다 값을 반환하는 순수 함수를 다루는 것이 추론하기 쉽습니다.

> 배열을 순회할 때는 `map()` / `every()` / `filter()` / `find()` / `findIndex()` / `reduce()` / `some()` / ... 등을 사용하고, 객체를 순회할 수 있도록 배열을 생성할 때는 `Object.keys()` / `Object.values()` / `Object.entries()`를 사용하세요.

```javascript
    const numbers = [1, 2, 3, 4, 5];

// bad
    let sum = 0;
    for (let num of numbers) {
      sum += num;
    }
    sum === 15;

// good
    let sum = 0;
    numbers.forEach((num) => {
      sum += num;
    });
    sum === 15;

// best (함수형의 힘을 사용하세요)
    const sum = numbers.reduce((total, num) => total + num, 0);
    sum === 15;

// bad
    const increasedByOne = [];
    for (let i = 0; i < numbers.length; i++) {
      increasedByOne.push(numbers[i] + 1);
    }

// good
    const increasedByOne = [];
    numbers.forEach((num) => {
      increasedByOne.push(num + 1);
    });

// best (함수형 유지하기)
    const increasedByOne = numbers.map((num) => num + 1);
    ```

<a name="generators--nope"></a><a name="11.2"></a>
  - [11.2](#generators--nope) 당분간 제너레이터(generator)를 사용하지 마세요.

> 왜 그럴까요? ES5로 잘 트랜스파일되지 않기 때문입니다.

<a name="generators--spacing"></a>
  - [11.3](#generators--spacing) 제너레이터를 반드시 사용해야 하거나 [우리의 조언](#generators--nope)을 무시하는 경우, 함수 시그니처의 공백이 올바르게 지정되었는지 확인하세요. eslint: [`generator-star-spacing`](https://eslint.org/docs/rules/generator-star-spacing)

> 왜 그럴까요? `function`과 `*`은 동일한 개념적 키워드의 일부입니다. `*`은 `function`의 수정자가 아니며, `function*`은 `function`과는 다른 고유한 구문입니다.

```javascript
    // bad
    function * foo() {
      // ...
    }

// bad
    const bar = function * () {
      // ...
    };

// bad
    const baz = function *() {
      // ...
    };

// bad
    const quux = function*() {
      // ...
    };

// bad
    function*foo() {
      // ...
    }

// bad
    function *foo() {
      // ...
    }

// very bad
    function
    *
    foo() {
      // ...
    }

// very bad
    const wat = function
    *
    () {
      // ...
    };

// good
    function* foo() {
      // ...
    }

// good
    const foo = function* () {
      // ...
    };
    ```

**[⬆ 맨 위로 이동](#table-of-contents)**

## 프로퍼티

<a name="properties--dot"></a><a name="12.1"></a>
  - [12.1](#properties--dot) 프로퍼티에 접근할 때는 점 표기법(dot notation)을 사용하세요. eslint: [`dot-notation`](https://eslint.org/docs/rules/dot-notation)

```javascript
    const luke = {
      jedi: true,
      age: 28,
    };

// bad
    const isJedi = luke['jedi'];

// good
    const isJedi = luke.jedi;
    ```

<a name="properties--bracket"></a><a name="12.2"></a>
  - [12.2](#properties--bracket) 변수로 프로퍼티에 접근할 때는 대괄호 표기법(`[]`)을 사용하세요.

```javascript
    const luke = {
      jedi: true,
      age: 28,
    };

function getProp(prop) {
      return luke[prop];
    }

const isJedi = getProp('jedi');
    ```

<a name="es2016-properties--exponentiation-operator"></a>
  - [12.3](#es2016-properties--exponentiation-operator) 거듭제곱을 계산할 때는 거듭제곱 연산자(`**`)를 사용하세요. eslint: [`prefer-exponentiation-operator`](https://eslint.org/docs/rules/prefer-exponentiation-operator).

```javascript
    // bad
    const binary = Math.pow(2, 10);

// good
    const binary = 2 ** 10;
    ```

**[⬆ 맨 위로 이동](#table-of-contents)**

## 변수

<a name="variables--const"></a><a name="13.1"></a>
  - [13.1](#variables--const) 변수를 선언할 때는 항상 `const`나 `let`을 사용하세요. 그렇게 하지 않으면 전역 변수가 생성됩니다. 우리는 전역 네임스페이스를 오염시키는 것을 피하고자 합니다. 캡틴 플래닛(Captain Planet)이 우리에게 경고한 바 있습니다. eslint: [`no-undef`](https://eslint.org/docs/rules/no-undef) [`prefer-const`](https://eslint.org/docs/rules/prefer-const)

```javascript
    // bad
    superPower = new SuperPower();

// good
    const superPower = new SuperPower();
    ```

<a name="variables--one-const"></a><a name="13.2"></a>
  - [13.2](#variables--one-const) 변수 또는 할당당 하나의 `const`나 `let` 선언을 사용하세요. eslint: [`one-var`](https://eslint.org/docs/rules/one-var)

> 왜 그럴까요? 이렇게 하면 새로운 변수 선언을 추가하기 더 쉽고, `;`을 `,`로 잘못 바꾸거나 구부호만 변경되는 diff가 발생하는 것을 걱정할 필요가 없습니다. 또한 한 번에 모든 곳을 건너뛰는 대신 디버거로 각 선언을 단계별로 확인할 수 있습니다.

```javascript
    // bad
    const items = getItems(),
        goSportsTeam = true,
        dragonball = 'z';

// bad
    // (위와 비교하여 실수를 찾아보세요)
    const items = getItems(),
        goSportsTeam = true;
        dragonball = 'z';

// good
    const items = getItems();
    const goSportsTeam = true;
    const dragonball = 'z';
    ```

<a name="variables--const-let-group"></a><a name="13.3"></a>
  - [13.3](#variables--const-let-group) 모든 `const`를 먼저 그룹화한 후 모든 `let`을 그룹화하세요.

> 왜 그럴까요? 나중에 이전에 할당된 변수 중 하나에 따라 변수를 할당해야 할 때 유용합니다.

```javascript
    // bad
    let i, len, dragonball,
        items = getItems(),
        goSportsTeam = true;

// bad
    let i;
    const items = getItems();
    let dragonball;
    const goSportsTeam = true;
    let len;

// good
    const goSportsTeam = true;
    const items = getItems();
    let dragonball;
    let i;
    let length;
    ```

<a name="variables--define-where-used"></a><a name="13.4"></a>
  - [13.4](#variables--define-where-used) 변수는 필요한 곳에 할당하되, 합리적인 위치에 배치하세요.

> 왜 그럴까요? `let`과 `const`는 함수 스코프가 아니라 블록 스코프를 가지기 때문입니다.

```javascript
    // bad - 불필요한 함수 호출
    function checkName(hasName) {
      const name = getName();

if (hasName === 'test') {
        return false;
      }

if (name === 'test') {
        this.setName('');
        return false;
      }

return name;
    }

// good
    function checkName(hasName) {
      if (hasName === 'test') {
        return false;
      }

const name = getName();

if (name === 'test') {
        this.setName('');
        return false;
      }

return name;
    }
    ```

<a name="variables--no-chain-assignment"></a><a name="13.5"></a>
  - [13.5](#variables--no-chain-assignment) 변수 할당을 체이닝하지 마세요. eslint: [`no-multi-assign`](https://eslint.org/docs/rules/no-multi-assign)

> 왜 그럴까요? 변수 할당을 체이닝하면 암묵적인 전역 변수가 생성됩니다.

```javascript
    // bad
    (function example() {
      // JavaScript는 이것을 다음과 같이 해석합니다:
      // let a = ( b = ( c = 1 ) );
      // let 키워드는 변수 a에만 적용되며, 변수 b와 c는 전역 변수가 됩니다.
      let a = b = c = 1;
    }());

console.log(a); // ReferenceError 발생
    console.log(b); // 1
    console.log(c); // 1

// good
    (function example() {
      let a = 1;
      let b = a;
      let c = a;
    }());

console.log(a); // ReferenceError 발생
    console.log(b); // ReferenceError 발생
    console.log(c); // ReferenceError 발생

// `const`에도 동일하게 적용됩니다.
    ```

<a name="variables--unary-increment-decrement"></a><a name="13.6"></a>
  - [13.6](#variables--unary-increment-decrement) 단항 증가 및 감소 연산자(`++`, `--`)의 사용을 피하세요. eslint [`no-plusplus`](https://eslint.org/docs/rules/no-plusplus)

> 왜 그럴까요? eslint 문서에 따르면, 단항 증가 및 감소 문장은 자동 세미콜론 삽입(automatic semicolon insertion)의 대상이 되며 애플리케이션 내에서 값을 증가시키거나 감소시킬 때 조용한 에러를 유발할 수 있습니다. 또한 `num++`나 `num ++` 대신 `num += 1` 같은 문장으로 값을 변형하는 것이 훨씬 표현력이 좋습니다. 단항 증가 및 감소 문장을 허용하지 않으면 프로그램에서 예기치 않은 동작을 유발할 수 있는 의도치 않은 전위 증가/전위 감소를 방지할 수 있습니다.

```javascript
    // bad

const array = [1, 2, 3];
    let num = 1;
    num++;
    --num;

let sum = 0;
    let truthyCount = 0;
    for (let i = 0; i < array.length; i++) {
      let value = array[i];
      sum += value;
      if (value) {
        truthyCount++;
      }
    }

// good

const array = [1, 2, 3];
    let num = 1;
    num += 1;
    num -= 1;

const sum = array.reduce((a, b) => a + b, 0);
    const truthyCount = array.filter(Boolean).length;
    ```

<a name="variables--linebreak"></a>
  - [13.7](#variables--linebreak) 할당 시 `=` 앞이나 뒤에 줄바꿈을 하지 마세요. 할당문이 [`max-len`](https://eslint.org/docs/rules/max-len)을 위반하는 경우 값을 괄호로 감싸세요. eslint [`operator-linebreak`](https://eslint.org/docs/rules/operator-linebreak).

> 왜 그럴까요? `=` 주변의 줄바꿈은 할당의 값을 모호하게 만들 수 있습니다.

```javascript
    // bad
    const foo =
      superLongLongLongLongLongLongLongLongFunctionName();

// bad
    const foo
      = 'superLongLongLongLongLongLongLongLongString';

// good
    const foo = (
      superLongLongLongLongLongLongLongLongFunctionName()
    );

// good
    const foo = 'superLongLongLongLongLongLongLongLongString';
    ```

<a name="variables--no-unused-vars"></a>
  - [13.8](#variables--no-unused-vars) 사용되지 않는 변수를 금지합니다. eslint: [`no-unused-vars`](https://eslint.org/docs/rules/no-unused-vars)

> 왜 그럴까요? 코드 어디에서도 사용되지 않고 선언만 된 변수는 불완전한 리팩토링으로 인한 에러일 가능성이 높습니다. 이러한 변수는 코드의 공간을 차지하고 독자에게 혼란을 줄 수 있습니다.

```javascript
    // bad

const some_unused_var = 42;

// 쓰기 전용 변수는 사용된 것으로 간주되지 않습니다.
    let y = 10;
    y = 5;

// 자기 자신의 수정을 위한 읽기는 사용된 것으로 간주되지 않습니다.
    let z = 0;
    z = z + 1;

// 사용되지 않는 함수 인자.
    function getX(x, y) {
        return x;
    }

// good

function getXPlusY(x, y) {
      return x + y;
    }

const x = 1;
    const y = a + 2;

alert(getXPlusY(x, y));

// 'type'은 사용되지 않더라도 rest 프로퍼티 형제(sibling)를 가지므로 무시됩니다.
    // 이는 지정된 키들을 제외한 객체를 추출하는 한 형태입니다.
    const { type, ...coords } = data;
    // 이제 'coords'는 'type' 프로퍼티가 제외된 'data' 객체입니다.
    ```

**[⬆ 맨 위로 이동](#table-of-contents)**

## 호이스팅

<a name="hoisting--about"></a><a name="14.1"></a>
  - [14.1](#hoisting--about) `var` 선언은 가장 가까운 enclosing 함수 스코프의 맨 위로 호이스팅되며, 할당은 호이스팅되지 않습니다. `const`와 `let` 선언에는 [일시적 사각지대 (Temporal Dead Zones, TDZ)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#temporal_dead_zone_tdz)라는 새로운 개념이 적용됩니다. 왜 [typeof가 더 이상 안전하지 않은지](https://web.archive.org/web/20200121061528/http://es-discourse.com/t/why-typeof-is-no-longer-safe/15) 아는 것이 중요합니다.

```javascript
    // 이것이 동작하지 않음을 알고 있습니다 (notDefined 전역 변수가
    // 존재하지 않는다고 가정할 때)
    function example() {
      console.log(notDefined); // => ReferenceError 발생
    }

// 변수를 참조한 후에 변수 선언을 생성하는 것은
    // 변수 호이스팅 덕분에 동작합니다. 참고: `true`라는 할당 값은
    // 호이스팅되지 않습니다.
    function example() {
      console.log(declaredButNotAssigned); // => undefined
      var declaredButNotAssigned = true;
    }

// 인터프리터가 변수 선언을 스코프의 맨 위로
    // 호이스팅하므로, 우리의 예제는 다음과 같이 다시 작성될 수 있습니다:
    function example() {
      let declaredButNotAssigned;
      console.log(declaredButNotAssigned); // => undefined
      declaredButNotAssigned = true;
    }

// const와 let 사용하기
    function example() {
      console.log(declaredButNotAssigned); // => ReferenceError 발생
      console.log(typeof declaredButNotAssigned); // => ReferenceError 발생
      const declaredButNotAssigned = true;
    }
    ```

<a name="hoisting--anon-expressions"></a><a name="14.2"></a>
  - [14.2](#hoisting--anon-expressions) 익명 함수 표현식은 변수 이름은 호이스팅되지만 함수 할당은 호이스팅되지 않습니다.

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

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

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

<a name="hoisting--named-expresions"></a><a name="hoisting--named-expressions"></a><a name="14.3"></a>
  - [14.3](#hoisting--named-expressions) 이름이 있는 함수 표현식은 함수 이름이나 함수 본문이 아니라 변수 이름만 호이스팅됩니다.

```javascript
    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');
      };
    }
    ```

<a name="hoisting--declarations"></a><a name="14.4"></a>
  - [14.4](#hoisting--declarations) 함수 선언문은 이름과 함수 본문 모두 호이스팅됩니다.

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

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

<a name="no-use-before-define"></a>
  - [14.5](#no-use-before-define) 변수, 클래스, 함수는 사용되기 전에 정의되어야 합니다. eslint: [`no-use-before-define`](https://eslint.org/docs/latest/rules/no-use-before-define)

> 왜 그럴까요? 변수, 클래스, 함수가 사용된 후에 선언되면, 독자가 참조되는 대상이 무엇인지 알 수 없으므로 가독성을 해칠 수 있습니다. 독자 입장에서는 어떤 대상을 사용하기 전에 (다른 모듈에서 import되었든 파일 내에서 정의되었든) 그 대상의 원천을 먼저 마주하는 훨씬 더 명확합니다.

```javascript
    // bad

// 변수 a가 정의되기 전에 사용되고 있습니다.
    console.log(a); // 선언은 호이스팅되지만 초기화는 호이스팅되지 않으므로 undefined가 됩니다.
    var a = 10;

// 함수 fun이 정의되기 전에 호출되고 있습니다.
    fun();
    function fun() {}

// 클래스 A가 정의되기 전에 사용되고 있습니다.
    new A(); // ReferenceError: Cannot access 'A' before initialization
    class A {
    }

// `let`과 `const`는 호이스팅되지만 기본 초기화 값이 없습니다.
    // 변수 'a'와 'b'는 자바스크립트가 존재함을 알지만(선언은 호이스팅됨)
    // 아직 초기화되지 않아 접근할 수 없는 일시적 사각지대(TDZ)에 있습니다.

console.log(a); // ReferenceError: Cannot access 'a' before initialization
    console.log(b); // ReferenceError: Cannot access 'b' before initialization
    let a = 10;
    const b = 5;

// good

var a = 10;
    console.log(a); // 10

function fun() {}
    fun();

class A {
    }
    new A();

let a = 10;
    const b = 5;
    console.log(a); // 10
    console.log(b); // 5
    ```

- 자세한 내용은 [Ben Cherry](https://www.adequatelygood.com/)의 [JavaScript Scoping & Hoisting](https://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting/)을 참고하세요.

**[⬆ 맨 위로 이동](#table-of-contents)**

## 비교 연산자 & 동등성

<a name="comparison--eqeqeq"></a><a name="15.1"></a>
  - [15.1](#comparison--eqeqeq) `==`와 `!=` 대신 `===`과 `!==`를 사용하세요. eslint: [`eqeqeq`](https://eslint.org/docs/rules/eqeqeq)

<a name="comparison--if"></a><a name="15.2"></a>
  - [15.2](#comparison--if) `if` 문과 같은 조건문은 `ToBoolean` 추상 메서드를 사용한 강제 변환(coercion)을 통해 표현식을 평가하며, 항상 다음의 간단한 규칙을 따릅니다:

- **Objects**는 **true**로 평가됩니다.
    - **Undefined**는 **false**로 평가됩니다.
    - **Null**은 **false**로 평가됩니다.
    - **Booleans**는 **불리언의 값**으로 평가됩니다.
    - **Numbers**는 **+0, -0, NaN**인 경우 **false**, 그 외에는 **true**로 평가됩니다.
    - **Strings**는 빈 문자열 `''`인 경우 **false**, 그 외에는 **true**로 평가됩니다.

```javascript
    if ([0] && []) {
      // true
      // 배열(빈 배열조차도)은 객체이며, 객체는 true로 평가됩니다.
    }
    ```

<a name="comparison--shortcuts"></a><a name="15.3"></a>
  - [15.3](#comparison--shortcuts) 불리언에는 단축 표현을 사용하고, 문자열과 숫자에는 명시적인 비교를 사용하세요.

```javascript
    // bad
    if (isValid === true) {
      // ...
    }

// good
    if (isValid) {
      // ...
    }

// bad
    if (name) {
      // ...
    }

// good
    if (name !== '') {
      // ...
    }

// bad
    if (collection.length) {
      // ...
    }

// good
    if (collection.length > 0) {
      // ...
    }
    ```

<a name="comparison--moreinfo"></a><a name="15.4"></a>
  - [15.4](#comparison--moreinfo) 자세한 내용은 Angus Croll의 [Truth, Equality, and JavaScript](https://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108)를 참고하세요.

<a name="comparison--switch-blocks"></a><a name="15.5"></a>
  - [15.5](#comparison--switch-blocks) 렉시컬 선언(`let`, `const`, `function`, `class` 등)이 포함된 `case` 및 `default` 절 안에서는 중괄호를 사용하여 블록을 생성하세요. eslint: [`no-case-declarations`](https://eslint.org/docs/rules/no-case-declarations)

> 왜 그럴까요? 렉시컬 선언은 전체 `switch` 블록에서 보이지만 할당될 때만 초기화되며, 이는 해당 `case`에 도달했을 때만 발생합니다. 이로 인해 여러 `case` 절이 동일한 것을 정의하려고 할 때 문제가 발생합니다.

```javascript
    // bad
    switch (foo) {
      case 1:
        let x = 1;
        break;
      case 2:
        const y = 2;
        break;
      case 3:
        function f() {
          // ...
        }
        break;
      default:
        class C {}
    }

// good
    switch (foo) {
      case 1: {
        let x = 1;
        break;
      }
      case 2: {
        const y = 2;
        break;
      }
      case 3: {
        function f() {
          // ...
        }
        break;
      }
      case 4:
        bar();
        break;
      default: {
        class C {}
      }
    }
    ```

<a name="comparison--nested-ternaries"></a><a name="15.6"></a>
  - [15.6](#comparison--nested-ternaries) 삼항 연산자는 중첩해서는 안 되며, 일반적으로 단일 줄 표현식이어야 합니다. eslint: [`no-nested-ternary`](https://eslint.org/docs/rules/no-nested-ternary)

```javascript
    // bad
    const foo = maybe1 > maybe2
      ? 'bar'
      : value1 > value2 ? 'baz' : null;

// 2개의 분리된 삼항 연산자 표현식으로 나누기
    const maybeNull = value1 > value2 ? 'baz' : null;

// better
    const foo = maybe1 > maybe2
      ? 'bar'
      : maybeNull;

// best
    const foo = maybe1 > maybe2 ? 'bar' : maybeNull;
    ```

<a name="comparison--unneeded-ternary"></a><a name="15.7"></a>
  - [15.7](#comparison--unneeded-ternary) 불필요한 삼항 연산자 문장을 피하세요. eslint: [`no-unneeded-ternary`](https://eslint.org/docs/rules/no-unneeded-ternary)

```javascript
    // bad
    const foo = a ? a : b;
    const bar = c ? true : false;
    const baz = c ? false : true;
    const quux = a != null ? a : b;

// good
    const foo = a || b;
    const bar = !!c;
    const baz = !c;
    const quux = a ?? b;
    ```

<a name="comparison--no-mixed-operators"></a>
  - [15.8](#comparison--no-mixed-operators) 연산자를 혼용할 때는 괄호로 감싸세요. 유일한 예외는 표준 산술 연산자(`+`, `-`, `**`)인데, 이들의 우선순위는 널리 이해되어 있기 때문입니다. `/`와 `*`는 혼용될 때 우선순위가 모호할 수 있으므로 괄호로 감싸는 것을 권장합니다.
  eslint: [`no-mixed-operators`](https://eslint.org/docs/rules/no-mixed-operators)

> 왜 그럴까요? 가독성이 향상되며 개발자의 의도가 명확해집니다.

```javascript
    // bad
    const foo = a && b < 0 || c > 0 || d + 1 === 0;

// bad
    const bar = a ** b - 5 % d;

// bad
    // (a || b) && c로 오해할 수 있습니다.
    if (a || b && c) {
      return d;
    }

// bad
    const bar = a + b / c * d;

// good
    const foo = (a && b < 0) || c > 0 || (d + 1 === 0);

// good
    const bar = a ** b - (5 % d);

// good
    if (a || (b && c)) {
      return d;
    }

// good
    const bar = a + (b / c) * d;
    ```

<a name="nullish-coalescing-operator"></a>
  - [15.9](#nullish-coalescing-operator) 널ish 병합 연산자(`??`)는 왼쪽 피연산자가 `null` 또는 `undefined`일 때 오른쪽 피연산자를 반환하는 논리 연산자입니다. 그렇지 않은 경우 왼쪽 피연산자를 반환합니다.

> 왜 그럴까요? null/undefined를 다른 falsy 값들과 명확히 구분하여 정밀함을 제공하고, 코드의 명확성과 예측 가능성을 높여줍니다.

```javascript
    // bad
    const value = 0 ?? 'default';
    // 'default'가 아니라 0을 반환합니다.

// bad
    const value = '' ?? 'default';
    // 'default'가 아니라 ''를 반환합니다.

// good
    const value = null ?? 'default';
    // 'default'를 반환합니다.

// good
    const user = {
      name: 'John',
      age: null
    };
    const age = user.age ?? 18;
    // 18을 반환합니다.
    ```

**[⬆ 맨 위로 이동](#table-of-contents)**

## 블록

<a name="blocks--braces"></a><a name="16.1"></a>
  - [16.1](#blocks--braces) 여러 줄로 이루어진 모든 블록에는 중괄호를 사용하세요. eslint: [`nonblock-statement-body-position`](https://eslint.org/docs/rules/nonblock-statement-body-position)

```javascript
    // bad
    if (test)
      return false;

// good
    if (test) return false;

// good
    if (test) {
      return false;
    }

// bad
    function foo() { return false; }

// good
    function bar() {
      return false;
    }
    ```

<a name="blocks--cuddled-elses"></a><a name="16.2"></a>
  - [16.2](#blocks--cuddled-elses) `if`와 `else`와 함께 여러 줄 블록을 사용하는 경우, `else`를 `if` 블록의 닫는 중괄호와 같은 줄에 배치하세요. eslint: [`brace-style`](https://eslint.org/docs/rules/brace-style)

```javascript
    // bad
    if (test) {
      thing1();
      thing2();
    }
    else {
      thing3();
    }

// good
    if (test) {
      thing1();
      thing2();
    } else {
      thing3();
    }
    ```

<a name="blocks--no-else-return"></a><a name="16.3"></a>
  - [16.3](#blocks--no-else-return) `if` 블록이 항상 `return`문을 실행하는 경우, 이어지는 `else` 블록은 불필요합니다. `return`을 포함하는 `if` 블록 뒤에 오는 `else if` 블록 안의 `return`은 여러 개의 `if` 블록으로 분리될 수 있습니다. eslint: [`no-else-return`](https://eslint.org/docs/rules/no-else-return)

```javascript
    // bad
    function foo() {
      if (x) {
        return x;
      } else {
        return y;
      }
    }

// bad
    function cats() {
      if (x) {
        return x;
      } else if (y) {
        return y;
      }
    }

// bad
    function dogs() {
      if (x) {
        return x;
      } else {
        if (y) {
          return y;
        }
      }
    }

// good
    function foo() {
      if (x) {
        return x;
      }

return y;
    }

// good
    function cats() {
      if (x) {
        return x;
      }

if (y) {
        return y;
      }
    }

// good
    function dogs(x) {
      if (x) {
        if (z) {
          return y;
        }
      } else {
        return z;
      }
    }
    ```

**[⬆ 맨 위로 이동](#table-of-contents)**

## 제어문

<a name="control-statements"></a>
  - [17.1](#control-statements) 제어문(`if`, `while` 등)이 너무 길어지거나 최대 줄 길이를 초과하는 경우, 각 (그룹화된) 조건은 새 줄에 배치할 수 있습니다. 논리 연산자는 줄의 시작 부분에 와야 합니다.

> 왜 그럴까요? 줄의 시작 부분에 연산자를 요구하면 연산자들이 정렬된 상태로 유지되며 메서드 체이닝과 유사한 패턴을 따르게 됩니다. 이는 복잡한 로직을 시각적으로 쉽게 따라갈 수 있게 하여 가독성도 향상시킵니다.

```javascript
    // bad
    if ((foo === 123 || bar === 'abc') && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening()) {
      thing1();
    }

// bad
    if (foo === 123 &&
      bar === 'abc') {
      thing1();
    }

// bad
    if (foo === 123
      && bar === 'abc') {
      thing1();
    }

// bad
    if (
      foo === 123 &&
      bar === 'abc'
    ) {
      thing1();
    }

// good
    if (
      foo === 123
      && bar === 'abc'
    ) {
      thing1();
    }

// good
    if (
      (foo === 123 || bar === 'abc')
      && doesItLookGoodWhenItBecomesThatLong()
      && isThisReallyHappening()
    ) {
      thing1();
    }

// good
    if (foo === 123 && bar === 'abc') {
      thing1();
    }
    ```

<a name="control-statement--value-selection"></a><a name="control-statements--value-selection"></a>
  - [17.2](#control-statements--value-selection) 제어문 대신 선택 연산자(selection operators)를 사용하지 마세요.

```javascript
    // bad
    !isRunning && startRunning();

// good
    if (!isRunning) {
      startRunning();
    }
    ```

**[⬆ 맨 위로 이동](#table-of-contents)**

## 주석

<a name="comments--multiline"></a><a name="17.1"></a>
  - [18.1](#comments--multiline) 여러 줄 주석에는 `/** ... */`를 사용하세요.

```javascript
    // bad
    // make()는 전달된 태그 이름을 기반으로
    // 새 요소를 반환합니다.
    //
    // @param {String} tag
    // @return {Element} element
    function make(tag) {

// ...

return element;
    }

// good
    /**
     * make()는 전달된 태그 이름을 기반으로
     * 새 요소를 반환합니다.
     */
    function make(tag) {

// ...

return element;
    }
    ```

<a name="comments--singleline"></a><a name="17.2"></a>
  - [18.2](#comments--singleline) 한 줄 주석에는 `//`를 사용하세요. 한 줄 주석은 주석 대상의 바로 위 줄에 배치하세요. 블록의 첫 번째 줄이 아닌 이상 주석 앞에 빈 줄을 두세요.

```javascript
    // bad
    const active = true;  // 현재 탭인지 여부

// good
    // 현재 탭인지 여부
    const active = true;

// bad
    function getType() {
      console.log('fetching type...');
      // 기본 타입을 'no type'으로 설정합니다.
      const type = this.type || 'no type';

return type;
    }

// good
    function getType() {
      console.log('fetching type...');

// 기본 타입을 'no type'으로 설정합니다.
      const type = this.type || 'no type';

return type;
    }

// 이것도 좋습니다
    function getType() {
      // 기본 타입을 'no type'으로 설정합니다.
      const type = this.type || 'no type';

return type;
    }
    ```

<a name="comments--spaces"></a>
  - [18.3](#comments--spaces) 가독성을 높이기 위해 모든 주석은 공백으로 시작하세요. eslint: [`spaced-comment`](https://eslint.org/docs/rules/spaced-comment)

```javascript
    // bad
    //현재 탭인지 여부
    const active = true;

// good
    // 현재 탭인지 여부
    const active = true;

// bad
    /**
     *make()는 전달된 태그 이름을 기반으로
     *새 요소를 반환합니다.
     */
    function make(tag) {

// ...

return element;
    }

// good
    /**
     * make()는 전달된 태그 이름을 기반으로
     * 새 요소를 반환합니다.
     */
    function make(tag) {

// ...

return element;
    }
    ```

<a name="comments--actionitems"></a><a name="17.3"></a>
  - [18.4](#comments--actionitems) 주석 앞에 `FIXME`나 `TODO`를 붙이면 다른 개발자들이 재검토가 필요한 문제를 지적하는 것인지, 구현해야 할 해결책을 제안하는 것인지 빠르게 이해하는 데 도움이 됩니다. 이들은 조치 가능(actionable)하다는 점에서 일반 주석과 다릅니다. 조치 사항은 `FIXME: -- 이 부분을 해결해야 합니다` 또는 `TODO: -- 구현이 필요합니다`와 같습니다.

<a name="comments--fixme"></a><a name="17.4"></a>
  - [18.5](#comments--fixme) 문제점을 주석으로 달 때는 `// FIXME:`를 사용하세요.

```javascript
    class Calculator extends Abacus {
      constructor() {
        super();

// FIXME: 여기서는 전역 변수를 사용하면 안 됩니다.
        total = 0;
      }
    }
    ```

<a name="comments--todo"></a><a name="17.5"></a>
  - [18.6](#comments--todo) 문제에 대한 해결책을 주석으로 달 때는 `// TODO:`를 사용하세요.

```javascript
    class Calculator extends Abacus {
      constructor() {
        super();

// TODO: total은 options 파라미터로 설정 가능해야 합니다.
        this.total = 0;
      }
    }
    ```

**[⬆ 맨 위로 이동](#table-of-contents)**

## 공백

<a name="whitespace--spaces"></a><a name="18.1"></a>
  - [19.1](#whitespace--spaces) 소프트 탭(공백 문자)을 사용하고 2칸으로 설정하세요. eslint: [`indent`](https://eslint.org/docs/rules/indent)

```javascript
    // bad
    function foo() {
    ∙∙∙∙let name;
    }

// bad
    function bar() {
    ∙let name;
    }

// good
    function baz() {
    ∙∙let name;
    }
    ```

<a name="whitespace--before-blocks"></a><a name="18.2"></a>
  - [19.2](#whitespace--before-blocks) 여는 중괄호 앞에 공백을 1개 두세요. eslint: [`space-before-blocks`](https://eslint.org/docs/rules/space-before-blocks)

```javascript
    // bad
    function test(){
      console.log('test');
    }

// good
    function test() {
      console.log('test');
    }

// bad
    dog.set('attr',{
      age: '1 year',
      breed: 'Bernese Mountain Dog',
    });

// good
    dog.set('attr', {
      age: '1 year',
      breed: 'Bernese Mountain Dog',
    });
    ```

<a name="whitespace--around-keywords"></a><a name="18.3"></a>
  - [19.3](#whitespace--around-keywords) 제어문(`if`, `while` 등)의 여는 괄호 앞에 공백을 1개 두세요. 함수 호출 및 선언 시 인자 목록과 함수 이름 사이에 공백을 두지 마세요. eslint: [`keyword-spacing`](https://eslint.org/docs/rules/keyword-spacing)

```javascript
    // bad
    if(isJedi) {
      fight ();
    }

// good
    if (isJedi) {
      fight();
    }

// bad
    function fight () {
      console.log ('Swooosh!');
    }

// good
    function fight() {
      console.log('Swooosh!');
    }
    ```

<a name="whitespace--infix-ops"></a><a name="18.4"></a>
  - [19.4](#whitespace--infix-ops) 연산자 주변에는 공백을 두세요. eslint: [`space-infix-ops`](https://eslint.org/docs/rules/space-infix-ops)

```javascript
    // bad
    const x=y+5;

// good
    const x = y + 5;
    ```

<a name="whitespace--newline-at-end"></a><a name="18.5"></a>
  - [19.5](#whitespace--newline-at-end) 파일의 끝은 단일 줄바꿈 문자로 끝내세요. eslint: [`eol-last`](https://eslint.org/docs/rules/eol-last)

```javascript
    // bad
    import { es6 } from './AirbnbStyleGuide';
      // ...
    export default es6;
    ```

```javascript
    // bad
    import { es6 } from './AirbnbStyleGuide';
      // ...
    export default es6;↵
    ↵
    ```

```javascript
    // good
    import { es6 } from './AirbnbStyleGuide';
      // ...
    export default es6;↵
    ```

<a name="whitespace--chains"></a><a name="18.6"></a>
  - [19.6](#whitespace--chains) 긴 메서드 체인(2개 초과의 메서드 체인)을 만들 때는 들여쓰기를 사용하세요. 해당 줄이 새로운 문장이 아니라 메서드 호출임을 강조하기 위해 선행 점(leading dot)을 사용하세요. eslint: [`newline-per-chained-call`](https://eslint.org/docs/rules/newline-per-chained-call) [`no-whitespace-before-property`](https://eslint.org/docs/rules/no-whitespace-before-property)

```javascript
    // 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();

// bad
    const leds = 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);

// good
    const leds = 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);

// good
    const leds = stage.selectAll('.led').data(data);
    const svg = leds.enter().append('svg:svg');
    svg.classed('led', true).attr('width', (radius + margin) * 2);
    const g = svg.append('svg:g');
    g.attr('transform', `translate(${radius + margin}, ${radius + margin})`).call(tron.led);
    ```

<a name="whitespace--after-blocks"></a><a name="18.7"></a>
  - [19.7](#whitespace--after-blocks) 블록 뒤와 다음 문장 앞에 빈 줄을 남겨두세요.

```javascript
    // bad
    if (foo) {
      return bar;
    }
    return baz;

// good
    if (foo) {
      return bar;
    }

return baz;

// bad
    const obj = {
      foo() {
      },
      bar() {
      },
    };
    return obj;

// good
    const obj = {
      foo() {
      },

bar() {
      },
    };

return obj;

// bad
    const arr = [
      function foo() {
      },
      function bar() {
      },
    ];
    return arr;

// good
    const arr = [
      function foo() {
      },

function bar() {
      },
    ];

return arr;
    ```

<a name="whitespace--padded-blocks"></a><a name="18.8"></a>
  - [19.8](#whitespace--padded-blocks) 블록을 빈 줄로 패딩(padding)하지 마세요. eslint: [`padded-blocks`](https://eslint.org/docs/rules/padded-blocks)

```javascript
    // bad
    function bar() {

console.log(foo);

}

// bad
    if (baz) {

console.log(quux);
    } else {
      console.log(foo);

}

// bad
    class Foo {

constructor(bar) {
        this.bar = bar;
      }
    }

// good
    function bar() {
      console.log(foo);
    }

// good
    if (baz) {
      console.log(quux);
    } else {
      console.log(foo);
    }
    ```

<a name="whitespace--no-multiple-blanks"></a>
  - [19.9](#whitespace--no-multiple-blanks) 코드를 패딩하기 위해 여러 개의 빈 줄을 사용하지 마세요. eslint: [`no-multiple-empty-lines`](https://eslint.org/docs/rules/no-multiple-empty-lines)

```javascript
    // bad
    class Person {
      constructor(fullName, email, birthday) {
        this.fullName = fullName;

this.email = email;

this.setAge(birthday);
      }

setAge(birthday) {
        const today = new Date();

const age = this.getAge(today, birthday);

this.age = age;
      }

getAge(today, birthday) {
        // ..
      }
    }

// good
    class Person {
      constructor(fullName, email, birthday) {
        this.fullName = fullName;
        this.email = email;
        this.setAge(birthday);
      }

setAge(birthday) {
        const today = new Date();
        const age = getAge(today, birthday);
        this.age = age;
      }

getAge(today, birthday) {
        // ..
      }
    }
    ```

<a name="whitespace--in-parens"></a><a name="18.9"></a>
  - [19.10](#whitespace--in-parens) 괄호 안에 공백을 추가하지 마세요. eslint: [`space-in-parens`](https://eslint.org/docs/rules/space-in-parens)

```javascript
    // bad
    function bar( foo ) {
      return foo;
    }

// good
    function bar(foo) {
      return foo;
    }

// bad
    if ( foo ) {
      console.log(foo);
    }

// good
    if (foo) {
      console.log(foo);
    }
    ```

<a name="whitespace--in-brackets"></a><a name="18.10"></a>
  - [19.11](#whitespace--in-brackets) 대괄호 안에 공백을 추가하지 마세요. eslint: [`array-bracket-spacing`](https://eslint.org/docs/rules/array-bracket-spacing)

```javascript
    // bad
    const foo = [ 1, 2, 3 ];
    console.log(foo[ 0 ]);

// good
    const foo = [1, 2, 3];
    console.log(foo[0]);
    ```

<a name="whitespace--in-braces"></a><a name="18.11"></a>
  - [19.12](#whitespace--in-braces) 중괄호 안에 공백을 추가하세요. eslint: [`object-curly-spacing`](https://eslint.org/docs/rules/object-curly-spacing)

```javascript
    // bad
    const foo = {clark: 'kent'};

// good
    const foo = { clark: 'kent' };
    ```

<a name="whitespace--max-len"></a><a name="18.12"></a>
  - [19.13](#whitespace--max-len) 100자를 초과하는 코드 줄을 피하세요(공백 포함). 참고: [위](#strings--line-length)에 따라 긴 문자열은 이 규칙에서 제외되며 나누어서는 안 됩니다. eslint: [`max-len`](https://eslint.org/docs/rules/max-len)

> 왜 그럴까요? 가독성과 유지보수성을 보장하기 위함입니다.

```javascript
    // bad
    const foo = jsonData && jsonData.foo && jsonData.foo.bar && jsonData.foo.bar.baz && jsonData.foo.bar.baz.quux && jsonData.foo.bar.baz.quux.xyzzy;

// bad
    $.ajax({ method: 'POST', url: 'https://airbnb.com/', data: { name: 'John' } }).done(() => console.log('Congratulations!')).fail(() => console.log('You have failed this city.'));

// good
    const foo = jsonData
      && jsonData.foo
      && jsonData.foo.bar
      && jsonData.foo.bar.baz
      && jsonData.foo.bar.baz.quux
      && jsonData.foo.bar.baz.quux.xyzzy;

// better
    const foo = jsonData
      ?.foo
      ?.bar
      ?.baz
      ?.quux
      ?.xyzzy;

// good
    $.ajax({
      method: 'POST',
      url: 'https://airbnb.com/',
      data: { name: 'John' },
    })
      .done(() => console.log('Congratulations!'))
      .fail(() => console.log('You have failed this city.'));
    ```

<a name="whitespace--block-spacing"></a>
  - [19.14](#whitespace--block-spacing) 여는 블록 토큰과 같은 줄의 다음 토큰 사이에 일관된 공백을 요구합니다. 이 규칙은 닫는 블록 토큰과 같은 줄의 이전 토큰 사이의 공백도 강제합니다. eslint: [`block-spacing`](https://eslint.org/docs/rules/block-spacing)

```javascript
    // bad
    function foo() {return true;}
    if (foo) { bar = 0;}

// good
    function foo() { return true; }
    if (foo) { bar = 0; }
    ```

<a name="whitespace--comma-spacing"></a>
  - [19.15](#whitespace--comma-spacing) 쉼표 앞의 공백은 피하고 쉼표 뒤에는 공백을 요구합니다. eslint: [`comma-spacing`](https://eslint.org/docs/rules/comma-spacing)

```javascript
    // bad
    const foo = 1,bar = 2;
    const arr = [1 , 2];

// good
    const foo = 1, bar = 2;
    const arr = [1, 2];
    ```

<a name="whitespace--computed-property-spacing"></a>
  - [19.16](#whitespace--computed-property-spacing) 계산된 프로퍼티 대괄호 내부의 공백 규칙을 강제합니다. eslint: [`computed-property-spacing`](https://eslint.org/docs/rules/computed-property-spacing)

```javascript
    // bad
    obj[foo ]
    obj[ 'foo']
    const x = {[ b ]: a}
    obj[foo[ bar ]]

// good
    obj[foo]
    obj['foo']
    const x = { [b]: a }
    obj[foo[bar]]
    ```

<a name="whitespace--func-call-spacing"></a>
  - [19.17](#whitespace--func-call-spacing) 함수와 그 호출부 사이의 공백을 피하세요. eslint: [`func-call-spacing`](https://eslint.org/docs/rules/func-call-spacing)

```javascript
    // bad
    func ();

func
    ();

// good
    func();
    ```

<a name="whitespace--key-spacing"></a>
  - [19.18](#whitespace--key-spacing) 객체 리터럴 프로퍼티의 키와 값 사이의 공백을 강제합니다. eslint: [`key-spacing`](https://eslint.org/docs/rules/key-spacing)

```javascript
    // bad
    const obj = { foo : 42 };
    const obj2 = { foo:42 };

// good
    const obj = { foo: 42 };
    ```

<a name="whitespace--no-trailing-spaces"></a>
  - [19.19](#whitespace--no-trailing-spaces) 줄 끝의 공백을 피하세요. eslint: [`no-trailing-spaces`](https://eslint.org/docs/rules/no-trailing-spaces)

<a name="whitespace--no-multiple-empty-lines"></a>
  - [19.20](#whitespace--no-multiple-empty-lines) 여러 개의 빈 줄을 피하고, 파일 끝에는 오직 하나의 줄바꿈만 허용하며, 파일 시작 부분의 줄바꿈은 피하세요. eslint: [`no-multiple-empty-lines`](https://eslint.org/docs/rules/no-multiple-empty-lines)

```javascript
    // bad - 여러 개의 빈 줄
    const x = 1;

const y = 2;

// bad - 파일 끝에 2개 이상의 줄바꿈
    const x = 1;
    const y = 2;

// bad - 파일 시작 부분에 1개 이상의 줄바꿈

const x = 1;
    const y = 2;

// good
    const x = 1;
    const y = 2;

```

**[⬆ 맨 위로 이동](#table-of-contents)**

## 쉼표

<a name="commas--leading-trailing"></a><a name="19.1"></a>
  - [20.1](#commas--leading-trailing) 선행 쉼표(Leading commas): **아니요.** eslint: [`comma-style`](https://eslint.org/docs/rules/comma-style)

```javascript
    // bad
    const story = [
        once
      , upon
      , aTime
    ];

// good
    const story = [
      once,
      upon,
      aTime,
    ];

// bad
    const hero = {
        firstName: 'Ada'
      , lastName: 'Lovelace'
      , birthYear: 1815
      , superPower: 'computers'
    };

// good
    const hero = {
      firstName: 'Ada',
      lastName: 'Lovelace',
      birthYear: 1815,
      superPower: 'computers',
    };
    ```

<a name="commas--dangling"></a><a name="19.2"></a>
  - [20.2](#commas--dangling) 추가적인 후행 쉼표(Trailing comma): **네.** eslint: [`comma-dangle`](https://eslint.org/docs/rules/comma-dangle)

> 왜 그럴까요? 더 깔끔한 git diff를 만들어 줍니다. 또한 Babel 같은 트랜스파일러가 트랜스파일된 코드에서 추가적인 후행 쉼표를 제거해주므로 레거시 브라우저에서의 [후행 쉼표 문제](https://github.com/airbnb/javascript/blob/es5-deprecated/es5/README.md#commas)에 대해 걱정할 필요가 없습니다.

```diff
    // bad - 후행 쉼표가 없는 git diff
    const hero = {
         firstName: 'Florence',
    -    lastName: 'Nightingale'
    +    lastName: 'Nightingale',
    +    inventorOf: ['coxcomb chart', 'modern nursing']
    };

// good - 후행 쉼표가 있는 git diff
    const hero = {
         firstName: 'Florence',
         lastName: 'Nightingale',
    +    inventorOf: ['coxcomb chart', 'modern nursing'],
    };
    ```

```javascript
    // bad
    const hero = {
      firstName: 'Dana',
      lastName: 'Scully'
    };

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

// good
    const hero = {
      firstName: 'Dana',
      lastName: 'Scully',
    };

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

// bad
    function createHero(
      firstName,
      lastName,
      inventorOf
    ) {
      // 아무것도 하지 않음
    }

// good
    function createHero(
      firstName,
      lastName,
      inventorOf,
    ) {
      // 아무것도 하지 않음
    }

// good (rest 요소 뒤에는 쉼표가 올 수 없음에 유의하세요)
    function createHero(
      firstName,
      lastName,
      inventorOf,
      ...heroArgs
    ) {
      // 아무것도 하지 않음
    }

// bad
    createHero(
      firstName,
      lastName,
      inventorOf
    );

// good
    createHero(
      firstName,
      lastName,
      inventorOf,
    );

// good (rest 요소 뒤에는 쉼표가 올 수 없음에 유의하세요)
    createHero(
      firstName,
      lastName,
      inventorOf,
      ...heroArgs
    );
    ```

**[⬆ 맨 위로 이동](#table-of-contents)**

## 세미콜론

<a name="semicolons--required"></a><a name="20.1"></a>
  - [21.1](#semicolons--required) **네.** eslint: [`semi`](https://eslint.org/docs/rules/semi)

> 왜 그럴까요? 자바스크립트가 세미콜론 없는 줄바꿈을 만나면, [자동 세미콜론 삽입(Automatic Semicolon Insertion)](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion)이라는 일련의 규칙을 사용하여 해당 줄바꿈을 문장의 끝으로 간주해야 할지 판단하고, 그렇다고 판단하면 (이름에서 알 수 있듯) 줄바꿈 전에 세미콜론을 코드에 삽입합니다. 하지만 ASI에는 몇 가지 기이한 동작들이 있으며, 자바스크립트가 줄바꿈을 잘못 해석하면 코드가 깨지게 됩니다. 새로운 기능들이 자바스크립트의 일부가 됨에 따라 이러한 규칙들은 더욱 복잡해질 것입니다. 문장을 명시적으로 끝맺고 린터(linter)를 설정하여 누락된 세미콜론을 잡아내면 이러한 문제를 예방하는 데 도움이 됩니다.

```javascript
    // bad - 예외 발생
    const luke = {}
    const leia = {}
    [luke, leia].forEach((jedi) => jedi.father = 'vader')

// bad - 예외 발생
    const reaction = "No! That’s impossible!"
    (async function meanwhileOnTheFalcon() {
      // `leia`, `lando`, `chewie`, `r2`, `c3p0` 처리
      // ...
    }())

// bad - ASI 때문에 `return`이 혼자 한 줄에 있을 때 항상 다음 줄의 값 대신 `undefined`를 반환합니다!
    function foo() {
      return
        'search your feelings, you know it to be foo'
    }

// good
    const luke = {};
    const leia = {};
    [luke, leia].forEach((jedi) => {
      jedi.father = 'vader';
    });

// good
    const reaction = 'No! That’s impossible!';
    (async function meanwhileOnTheFalcon() {
      // `leia`, `lando`, `chewie`, `r2`, `c3p0` 처리
      // ...
    }());

// good
    function foo() {
      return 'search your feelings, you know it to be foo';
    }
    ```

[더 읽어보기](https://stackoverflow.com/questions/7365172/semicolon-before-self-invoking-function/7365214#7365214).

**[⬆ 맨 위로 이동](#table-of-contents)**

## 타입 캐스팅 & Coercion

<a name="coercion--explicit"></a><a name="21.1"></a>
  - [22.1](#coercion--explicit) 문장의 시작 부분에서 타입 강제 변환(type coercion)을 수행하세요.

<a name="coercion--strings"></a><a name="21.2"></a>
  - [22.2](#coercion--strings) 문자열: eslint: [`no-new-wrappers`](https://eslint.org/docs/rules/no-new-wrappers)

```javascript
    // => this.reviewScore = 9;

// bad
    const totalScore = new String(this.reviewScore); // totalScore의 typeof는 "string"이 아니라 "object"입니다.

// bad
    const totalScore = this.reviewScore + ''; // this.reviewScore.valueOf()를 호출합니다.

// bad
    const totalScore = this.reviewScore.toString(); // 문자열 반환을 보장하지 않습니다.

// good
    const totalScore = String(this.reviewScore);
    ```

<a name="coercion--numbers"></a><a name="21.3"></a>
  - [22.3](#coercion--numbers) 숫자: 타입 캐스팅에는 `Number`를 사용하고, 문자열 파싱 시 `parseInt`에는 항상 기수(radix)를 함께 사용하세요. eslint: [`radix`](https://eslint.org/docs/rules/radix) [`no-new-wrappers`](https://eslint.org/docs/rules/no-new-wrappers)

> 왜 그럴까요? `parseInt` 함수는 지정된 기수에 따라 문자열 인자의 내용을 해석하여 정수 값을 생성합니다. 문자열 앞의 공백은 무시됩니다. 기수가 `undefined`이거나 `0`인 경우, 숫자가 `0x` 또는 `0X`로 시작하지 않는 한 `10`으로 가정됩니다. 이는 8진수 해석을 단순히 지양(하지만 허용)했던 ECMAScript 3과는 다릅니다. 2013년 현재 많은 구현체들이 이 동작을 채택하지 않았습니다. 또한 구형 브라우저를 지원해야 하므로 항상 기수를 지정하세요.

```javascript
    const inputValue = '4';

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

// bad
    const val = +inputValue;

// bad
    const val = inputValue >> 0;

// bad
    const val = parseInt(inputValue);

// good
    const val = Number(inputValue);

// good
    const val = parseInt(inputValue, 10);
    ```

<a name="coercion--comment-deviations"></a><a name="21.4"></a>
  - [22.4](#coercion--comment-deviations) 어떤 이유로든 극단적인 상황이라 `parseInt`가 병목 현상을 일으켜 [성능상의 이유로](https://web.archive.org/web/20200414205431/https://jsperf.com/coercion-vs-casting/3) 비트シフト(Bitshift)를 사용해야 하는 경우, 그 이유와 무엇을 하고 있는지 설명하는 주석을 남기세요.

```javascript
    // good
    /**
     * parseInt 때문에 코드가 느려졌습니다.
     * 문자열을 숫자로 강제 변환하기 위해 비트시프트를 사용하여
     * 훨씬 더 빠르게 만들었습니다.
     */
    const val = inputValue >> 0;
    ```

<a name="coercion--bitwise"></a><a name="21.5"></a>
  - [22.5](#coercion--bitwise) **참고:** 비트 연산을 사용할 때는 주의하세요. 숫자는 [64비트 값](https://es5.github.io/#x4.3.19)으로 표현되지만, 비트 연산은 항상 32비트 정수를 반환합니다([출처](https://es5.github.io/#x11.7)). 비트 연산은 32비트보다 큰 정수 값에 대해 예기치 않은 동작을 유발할 수 있습니다. [토론](https://github.com/airbnb/javascript/issues/109). 부호 있는 32비트 정수의 최댓값은 2,147,483,647입니다:

```javascript
    2147483647 >> 0; // => 2147483647
    2147483648 >> 0; // => -2147483648
    2147483649 >> 0; // => -2147483647
    ```

<a name="coercion--booleans"></a><a name="21.6"></a>
  - [22.6](#coercion--booleans) 불리언: eslint: [`no-new-wrappers`](https://eslint.org/docs/rules/no-new-wrappers)

```javascript
    const age = 0;

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

// good
    const hasAge = Boolean(age);

// best
    const hasAge = !!age;
    ```

**[⬆ 맨 위로 이동](#table-of-contents)**

## 명명 규칙

<a name="naming--descriptive"></a><a name="22.1"></a>
  - [23.1](#naming--descriptive) 한 글자로 된 이름은 피하세요. 이름을 설명적으로 지으세요. eslint: [`id-length`](https://eslint.org/docs/rules/id-length)

```javascript
    // bad
    function q() {
      // ...
    }

// good
    function query() {
      // ...
    }
    ```

<a name="naming--camelCase"></a><a name="22.2"></a>
  - [23.2](#naming--camelCase) 객체, 함수, 인스턴스를 명명할 때는 camelCase를 사용하세요. eslint: [`camelcase`](https://eslint.org/docs/rules/camelcase)

```javascript
    // bad
    const OBJEcttsssss = {};
    const this_is_my_object = {};
    function c() {}

// good
    const thisIsMyObject = {};
    function thisIsMyFunction() {}
    ```

<a name="naming--PascalCase"></a><a name="22.3"></a>
  - [23.3](#naming--PascalCase) 생성자나 클래스를 명명할 때만 PascalCase를 사용하세요. eslint: [`new-cap`](https://eslint.org/docs/rules/new-cap)

```javascript
    // bad
    function user(options) {
      this.name = options.name;
    }

const bad = new user({
      name: 'nope',
    });

// good
    class User {
      constructor(options) {
        this.name = options.name;
      }
    }

const good = new User({
      name: 'yup',
    });
    ```

<a name="naming--leading-underscore"></a><a name="22.4"></a>
  - [23.4](#naming--leading-underscore) 후행 또는 선행 언더스코어(`_`)를 사용하지 마세요. eslint: [`no-underscore-dangle`](https://eslint.org/docs/rules/no-underscore-dangle)

> 왜 그럴까요? 자바스크립트는 프로퍼티나 메서드 측면에서 프라이버시(privacy) 개념이 없습니다. 선행 언더스코어가 “비공개(private)”를 의미하는 흔한 관습이긴 하지만, 실제로는 이러한 프로퍼티들이 완전한 공개 상태이며 공개 API 계약의 일부입니다. 이 관습은 개발자들이 변경 사항이 breaking change로 간주되지 않거나 테스트가 필요하지 않다고 잘못 생각하게 만들 수 있습니다. 요약하자면: 무언가를 “비공개”로 만들고 싶다면, 관찰 가능하게 존재해서는 안 됩니다.

```javascript
    // bad
    this.__firstName__ = 'Panda';
    this.firstName_ = 'Panda';
    this._firstName = 'Panda';

// good
    this.firstName = 'Panda';

// good, WeakMap을 사용할 수 있는 환경인 경우
    // https://compat-table.github.io/compat-table/es6/#test-WeakMap 참고
    const firstNames = new WeakMap();
    firstNames.set(this, 'Panda');
    ```

<a name="naming--self-this"></a><a name="22.5"></a>
  - [23.5](#naming--self-this) `this`에 대한 참조를 저장하지 마세요. 화살표 함수나 [Function#bind](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)를 사용하세요.

```javascript
    // bad
    function foo() {
      const self = this;
      return function () {
        console.log(self);
      };
    }

// bad
    function foo() {
      const that = this;
      return function () {
        console.log(that);
      };
    }

// good
    function foo() {
      return () => {
        console.log(this);
      };
    }
    ```

<a name="naming--filename-matches-export"></a><a name="22.6"></a>
  - [23.6](#naming--filename-matches-export) 기본 파일명은 기본 내보내기(default export)의 이름과 정확히 일치해야 합니다.

```javascript
    // 파일 1 내용
    class CheckBox {
      // ...
    }
    export default CheckBox;

// 파일 2 내용
    export default function fortyTwo() { return 42; }

// 파일 3 내용
    export default function insideDirectory() {}

// 다른 파일에서
    // bad
    import CheckBox from './checkBox'; // PascalCase import/export, camelCase 파일명
    import FortyTwo from './FortyTwo'; // PascalCase import/파일명, camelCase export
    import InsideDirectory from './InsideDirectory'; // PascalCase import/파일명, camelCase export

// bad
    import CheckBox from './check_box'; // PascalCase import/export, snake_case 파일명
    import forty_two from './forty_two'; // snake_case import/파일명, camelCase export
    import inside_directory from './inside_directory'; // snake_case import, camelCase export
    import index from './inside_directory/index'; // index 파일을 명시적으로 요구함
    import insideDirectory from './insideDirectory/index'; // index 파일을 명시적으로 요구함

// good
    import CheckBox from './CheckBox'; // PascalCase export/import/파일명
    import fortyTwo from './fortyTwo'; // camelCase export/import/파일명
    import insideDirectory from './insideDirectory'; // camelCase export/import/디렉토리명/암묵적 "index"
    // ^ insideDirectory.js와 insideDirectory/index.js 모두 지원함
    ```

<a name="naming--camelCase-default-export"></a><a name="22.7"></a>
  - [23.7](#naming--camelCase-default-export) 함수를 export-default할 때는 camelCase를 사용하세요. 파일명은 함수의 이름과 동일해야 합니다.

```javascript
    function makeStyleGuide() {
      // ...
    }

export default makeStyleGuide;
    ```

<a name="naming--PascalCase-singleton"></a><a name="22.8"></a>
  - [23.8](#naming--PascalCase-singleton) 생성자 / 클래스 / 싱글톤 / 함수 라이브러리 / 순수 객체를 export할 때는 PascalCase를 사용하세요.

```javascript
    const AirbnbStyleGuide = {
      es6: {
      },
    };

export default AirbnbStyleGuide;
    ```

<a name="naming--Acronyms-and-Initialisms"></a>
  - [23.9](#naming--Acronyms-and-Initialisms) 약어(Acronyms and initialisms)는 항상 모두 대문자로 쓰거나 모두 소문자로 써야 합니다.

> 왜 그럴까요? 이름은 컴퓨터 알고리즘을 만족시키기 위해서가 아니라 가독성을 위한 것입니다.

```javascript
    // bad
    import SmsContainer from './containers/SmsContainer';

// bad
    const HttpRequests = [
      // ...
    ];

// good
    import SMSContainer from './containers/SMSContainer';

// good
    const HTTPRequests = [
      // ...
    ];

// 이것도 좋습니다
    const httpRequests = [
      // ...
    ];

// best
    import TextMessageContainer from './containers/TextMessageContainer';

// best
    const requests = [
      // ...
    ];
    ```

<a name="naming--uppercase"></a>
  - [23.10](#naming--uppercase) 상수는 다음 조건을 만족할 때 선택적으로 대문자로 표기할 수 있습니다: (1) export되고, (2) `const`이며 (재할당 불가), (3) 프로그래머가 해당 상수 (및 그 중첩된 프로퍼티)가 절대 변하지 않음을 신뢰할 수 있는 경우.

> 왜 그럴까요? 이는 프로그래머가 변수가 변경될 수 있는지 확신할 수 없는 상황을 돕기 위한 추가적인 도구입니다. UPPERCASE_VARIABLES는 프로그래머에게 해당 변수(및 그 프로퍼티)가 변하지 않음을 신뢰할 수 있음을 알려줍니다.
    - 모든 `const` 변수에 적용하나요? - 불필요하므로 파일 내의 상수에 대문자를 사용해서는 안 됩니다. 하지만 export되는 상수에는 사용해야 합니다.
    - export되는 객체는요? - export의 최상위 레벨에서 대문자로 표기하고 (`EXPORTED_OBJECT.key` 등), 모든 중첩된 프로퍼티가 변경되지 않음을 유지하세요.

```javascript
    // bad
    const PRIVATE_VARIABLE = '파일 내에서 불필요하게 대문자로 표기하면 안 됩니다';

// bad
    export const THING_TO_BE_CHANGED = '분명히 변경될 것이므로 대문자로 표기하면 안 됩니다';

// bad
    export let REASSIGNABLE_VARIABLE = '대문자 변수와 let을 함께 사용하지 마세요';

// ---

// 허용되지만 의미적 가치를 제공하지는 않음
    export const apiKey = 'SOMEKEY';

// 대부분의 경우 더 나은 방법
    export const API_KEY = 'SOMEKEY';

// ---

// bad - 의미적 가치 없이 키를 불필요하게 대문자로 표기함
    export const MAPPING = {
      KEY: 'value'
    };

// good
    export const MAPPING = {
      key: 'value',
    };
    ```

**[⬆ 맨 위로 이동](#table-of-contents)**

## 접근자

<a name="accessors--not-required"></a><a name="23.1"></a>
  - [24.1](#accessors--not-required) 프로퍼티에 대한 접근자 함수(accessor functions)는 필수가 아닙니다.

<a name="accessors--no-getters-setters"></a><a name="23.2"></a>
  - [24.2](#accessors--no-getters-setters) 자바스크립트 getter/setter는 예기치 않은 부수 효과를 유발하고 테스트, 유지보수, 추론이 더 어려우므로 사용하지 마세요. 대신 접근자 함수를 만들어야 하는 경우 `getVal()`과 `setVal('hello')`를 사용하세요.

```javascript
    // bad
    class Dragon {
      get age() {
        // ...
      }

set age(value) {
        // ...
      }
    }

// good
    class Dragon {
      getAge() {
        // ...
      }

setAge(value) {
        // ...
      }
    }
    ```

<a name="accessors--boolean-prefix"></a><a name="23.3"></a>
  - [24.3](#accessors--boolean-prefix) 프로퍼티/메서드가 `boolean`인 경우, `isVal()` 또는 `hasVal()`을 사용하세요.

```javascript
    // bad
    if (!dragon.age()) {
      return false;
    }

// good
    if (!dragon.hasAge()) {
      return false;
    }
    ```

<a name="accessors--consistent"></a><a name="23.4"></a>
  - [24.4](#accessors--consistent) `get()`과 `set()` 함수를 만드는 것은 괜찮지만, 일관성을 유지하세요.

```javascript
    class Jedi {
      constructor(options = {}) {
        const lightsaber = options.lightsaber || 'blue';
        this.set('lightsaber', lightsaber);
      }

set(key, val) {
        this[key] = val;
      }

get(key) {
        return this[key];
      }
    }
    ```

**[⬆ 맨 위로 이동](#table-of-contents)**

## 이벤트

<a name="events--hash"></a><a name="24.1"></a>
  - [25.1](#events--hash) 이벤트에 데이터 페이로드(DOM 이벤트이든 Backbone 이벤트 같은 독점적인 것이든)를 첨부할 때는 원시 값 대신 객체 리터럴("해시"라고도 함)을 전달하세요. 이렇게 하면 나중에 기여하는 사람이 이벤트의 모든 핸들러를 찾아 업데이트할 필요 없이 이벤트 페이로드에 더 많은 데이터를 쉽게 추가할 수 있습니다. 예를 들어, 다음과 같이 하는 대신:

```javascript
    // bad
    $(this).trigger('listingUpdated', listing.id);

// ...

$(this).on('listingUpdated', (e, listingID) => {
      // listingID로 무언가를 수행합니다
    });
    ```

다음과 같이 작성하는 것을 선호합니다:

```javascript
    // good
    $(this).trigger('listingUpdated', { listingID: listing.id });

// ...

$(this).on('listingUpdated', (e, data) => {
      // data.listingID로 무언가를 수행합니다
    });
    ```

**[⬆ 맨 위로 이동](#table-of-contents)**

## jQuery

<a name="jquery--dollar-prefix"></a><a name="25.1"></a>
  - [26.1](#jquery--dollar-prefix) jQuery 객체 변수에는 `$` 접두사를 붙이세요.

```javascript
    // bad
    const sidebar = $('.sidebar');

// good
    const $sidebar = $('.sidebar');

// good
    const $sidebarBtn = $('.sidebar-btn');
    ```

<a name="jquery--cache"></a><a name="25.2"></a>
  - [26.2](#jquery--cache) jQuery 조회 결과를 캐시하세요.

```javascript
    // bad
    function setSidebar() {
      $('.sidebar').hide();

// ...

$('.sidebar').css({
        'background-color': 'pink',
      });
    }

// good
    function setSidebar() {
      const $sidebar = $('.sidebar');
      $sidebar.hide();

// ...

$sidebar.css({
        'background-color': 'pink',
      });
    }
    ```

<a name="jquery--queries"></a><a name="25.3"></a>
  - [26.3](#jquery--queries) DOM 조회 시 캐스케이딩 `$('.sidebar ul')` 또는 부모 > 자식 `$('.sidebar > ul')`을 사용하세요. [jsPerf](https://web.archive.org/web/20200414183810/https://jsperf.com/jquery-find-vs-context-sel/16)

<a name="jquery--find"></a><a name="25.4"></a>
  - [26.4](#jquery--find) 스코프가 지정된 jQuery 객체 조회에는 `find`를 사용하세요.

```javascript
    // bad
    $('ul', '.sidebar').hide();

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

// good
    $('.sidebar ul').hide();

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

// good
    $sidebar.find('ul').hide();
    ```

**[⬆ 맨 위로 이동](#table-of-contents)**

## ECMAScript 5 호환성

<a name="es5-compat--kangax"></a><a name="26.1"></a>
  - [27.1](#es5-compat--kangax) Kangax의 ES5 [호환성 테이블](https://compat-table.github.io/compat-table/es5/)을 참고하세요.

**[⬆ 맨 위로 이동](#table-of-contents)**

<a name="ecmascript-6-styles"></a>
## ECMAScript 6+ (ES 2015+) 스타일

<a name="es6-styles"></a><a name="27.1"></a>
  - [28.1](#es6-styles) 다양한 ES6+ 기능에 대한 링크 모음입니다.

1. [화살표 함수](#arrow-functions)
1. [클래스](#classes--constructors)
1. [객체 단축 구문](#es6-object-shorthand)
1. [객체 간결 구문](#es6-object-concise)
1. [객체 계산된 프로퍼티](#es6-computed-properties)
1. [템플릿 문자열](#es6-template-literals)
1. [구조 분해](#destructuring)
1. [기본 파라미터](#es6-default-parameters)
1. [Rest](#es6-rest)
1. [배열 전개 구문](#es6-array-spreads)
1. [Let과 Const](#references)
1. [거듭제곱 연산자](#es2016-properties--exponentiation-operator)
1. [반복자와 제너레이터](#iterators-and-generators)
1. [모듈](#modules)

<a name="tc39-proposals"></a>
  - [28.2](#tc39-proposals) 아직 Stage 3에 도달하지 않은 [TC39 제안(proposals)](https://github.com/tc39/proposals)은 사용하지 마세요.

> 왜 그럴까요? [아직 확정되지 않았으며](https://tc39.github.io/process-document/), 변경되거나 완전히 철회될 수 있습니다. 우리는 JavaScript를 사용하고 싶어 하며, 제안 단계의 기능들은 아직 JavaScript가 아닙니다.

**[⬆ 맨 위로 이동](#table-of-contents)**

## 표준 라이브러리

[표준 라이브러리(Standard Library)](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects)에는 기능적으로 결함이 있지만 레거시 호환성을 위해 남아있는 유틸리티들이 포함되어 있습니다.

<a name="standard-library--isnan"></a>
  - [29.1](#standard-library--isnan) 전역 `isNaN` 대신 `Number.isNaN`을 사용하세요.
    eslint: [`no-restricted-globals`](https://eslint.org/docs/rules/no-restricted-globals)

> 왜 그럴까요? 전역 `isNaN`은 숫자가 아닌 값을 숫자로 강제 변환하여, NaN으로 변환되는 모든 것에 대해 true를 반환합니다.
    > 이러한 동작이 의도된 경우라면 명시적으로 만드세요.

```javascript
    // bad
    isNaN('1.2'); // false
    isNaN('1.2.3'); // true

// good
    Number.isNaN('1.2.3'); // false
    Number.isNaN(Number('1.2.3')); // true
    ```

<a name="standard-library--isfinite"></a>
  - [29.2](#standard-library--isfinite) 전역 `isFinite` 대신 `Number.isFinite`를 사용하세요.
    eslint: [`no-restricted-globals`](https://eslint.org/docs/rules/no-restricted-globals)

> 왜 그럴까요? 전역 `isFinite`는 숫자가 아닌 값을 숫자로 강제 변환하여, 유한수로 변환되는 모든 것에 대해 true를 반환합니다.
    > 이러한 동작이 의도된 경우라면 명시적으로 만드세요.

```javascript
    // bad
    isFinite('2e3'); // true

// good
    Number.isFinite('2e3'); // false
    Number.isFinite(parseInt('2e3', 10)); // true
    ```

**[⬆ 맨 위로 이동](#table-of-contents)**

## 테스트

<a name="testing--yup"></a><a name="28.1"></a>
  - [30.1](#testing--yup) **네.**

```javascript
    function foo() {
      return true;
    }
    ```

<a name="testing--for-real"></a><a name="28.2"></a>
  - [30.2](#testing--for-real) **진지하게 말씀드리자면**:
    - 어떤 테스트 프레임워크를 사용하든 테스트를 작성해야 합니다!
    - 작고 순수한 함수를 많이 작성하도록 노력하고, 변형(mutation)이 발생하는 곳을 최소화하세요.
    - 스텁(stub)과 모의 객체(mock)는 테스트를 더 취약하게 만들 수 있으므로 주의해서 사용하세요.
    - Airbnb에서는 주로 [`mocha`](https://www.npmjs.com/package/mocha)와 [`jest`](https://www.npmjs.com/package/jest)를 사용합니다. 작고 독립적인 모듈에는 [`tape`](https://www.npmjs.com/package/tape)도 가끔 사용됩니다.
    - 항상 실현 가능하지는 않더라도 100% 테스트 커버리지는 목표로 삼기에 좋은 지표입니다.
    - 버그를 수정할 때마다 *회귀 테스트(regression test)를 작성하세요*. 회귀 테스트 없이 고쳐진 버그는 앞으로 거의 확실히 다시 발생할 것입니다.

**[⬆ 맨 위로 이동](#table-of-contents)**

## 성능

- [레이아웃 및 웹 성능 정보 (On Layout & Web Performance)](https://www.kellegous.com/j/2013/01/26/layout-performance/)
  - [문자열 vs 배열 연결 (String vs Array Concat)](https://web.archive.org/web/20200414200857/https://jsperf.com/string-vs-array-concat/2)
  - [루프 내 Try/Catch 비용 (Try/Catch Cost In a Loop)](https://web.archive.org/web/20200414190827/https://jsperf.com/try-catch-in-loop-cost/12)
  - [뱅 함수 (Bang Function)](https://web.archive.org/web/20200414205426/https://jsperf.com/bang-function)
  - [jQuery Find vs Context, Selector](https://web.archive.org/web/20200414200850/https://jsperf.com/jquery-find-vs-context-sel/164)
  - [스크립트 텍스트를 위한 innerHTML vs textContent](https://web.archive.org/web/20200414205428/https://jsperf.com/innerhtml-vs-textcontent-for-script-text)
  - [긴 문자열 연결 (Long String Concatenation)](https://web.archive.org/web/20200414203914/https://jsperf.com/ya-string-concat/38)
  - [`map()`, `reduce()`, `filter()` 같은 JavaScript 함수들은 배열 순회에 최적화되어 있나요? (Are JavaScript functions like `map()`, `reduce()`, and `filter()` optimized for traversing arrays?)](https://www.quora.com/JavaScript-programming-language-Are-Javascript-functions-like-map-reduce-and-filter-already-optimized-for-traversing-array/answer/Quildreen-Motta)
  - 로딩 중...

**[⬆ 맨 위로 이동](#table-of-contents)**

## 참고자료

**ES6+ 학습하기**

- [최신 ECMA 스펙](https://tc39.github.io/ecma262/)
  - [ExploringJS](https://exploringjs.com/)
  - [ES6 호환성 테이블](https://compat-table.github.io/compat-table/es6/)
  - [ES6 기능 종합 개요](https://web.archive.org/web/20240404212626/http://es6-features.org/)
  - [JavaScript 로드맵](https://roadmap.sh/javascript)

**읽어보기**

- [Standard ECMA-262](https://www.ecma-international.org/ecma-262/6.0/index.html)

**도구**

- 코드 스타일 린터
    - [ESlint](https://eslint.org/) - [Airbnb 스타일 .eslintrc](https://github.com/airbnb/javascript/blob/master/linters/.eslintrc)
    - [JSHint](https://jshint.com/) - [Airbnb 스타일 .jshintrc](https://github.com/airbnb/javascript/blob/master/linters/.jshintrc)
  - Neutrino 프리셋 - [@neutrinojs/airbnb](https://neutrinojs.org/packages/airbnb/)

**기타 스타일 가이드**

- [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html)
  - [Google JavaScript Style Guide (구버전)](https://google.github.io/styleguide/javascriptguide.xml)
  - [jQuery Core 스타일 지침](https://contribute.jquery.org/style-guide/js/)
  - [일관되고 관용적인 JavaScript 작성 원칙 (Principles of Writing Consistent, Idiomatic JavaScript)](https://github.com/rwaldron/idiomatic.js)
  - [StandardJS](https://standardjs.com)

**기타 스타일**

- [중첩 함수에서의 this 명명 (Naming this in nested functions)](https://gist.github.com/cjohansen/4135065) - Christian Johansen
  - [조건부 콜백 (Conditional Callbacks)](https://github.com/airbnb/javascript/issues/52) - Ross Allen
  - [GitHub의 인기 있는 JavaScript 코딩 컨벤션 (Popular JavaScript Coding Conventions on GitHub)](http://sideeffect.kr/popularconvention/#javascript) - 변정훈
  - [자바스크립트의 다중 var 문은 불필요하지 않습니다 (Multiple var statements in JavaScript, not superfluous)](https://benalman.com/news/2012/05/multiple-var-statements-javascript/) - Ben Alman

**추가 읽을거리**

- [JavaScript 클로저 이해하기 (Understanding JavaScript Closures)](https://javascriptweblog.wordpress.com/2010/10/25/understanding-javascript-closures/) - Angus Croll
  - [성급한 프로그래머를 위한 기본 JavaScript (Basic JavaScript for the impatient programmer)](https://www.2ality.com/2013/06/basic-javascript.html) - Dr. Axel Rauschmayer
  - [jQuery가 필요 없을지도 모릅니다 (You Might Not Need jQuery)](https://youmightnotneedjquery.com/) - Zack Bloom & Adam Schwartz
  - [ES6 기능들 (ES6 Features)](https://github.com/lukehoban/es6features) - Luke Hoban
  - [프론트엔드 가이드라인 (Frontend Guidelines)](https://github.com/bendc/frontend-guidelines) - Benjamin De Cock

**도서**

- [JavaScript: The Good Parts](https://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742) - Douglas Crockford
  - [JavaScript Patterns](https://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752) - Stoyan Stefanov
  - [Pro JavaScript Design Patterns](https://www.amazon.com/JavaScript-Design-Patterns-Recipes-Problem-Solution/dp/159059908X) - Ross Harmes and Dustin Diaz
  - [High Performance Web Sites: Essential Knowledge for Front-End Engineers](https://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309) - Steve Souders
  - [Maintainable JavaScript](https://www.amazon.com/Maintainable-JavaScript-Nicholas-C-Zakas/dp/1449327680) - Nicholas C. Zakas
  - [JavaScript Web Applications](https://www.amazon.com/JavaScript-Web-Applications-Alex-MacCaw/dp/144930351X) - Alex MacCaw
  - [Pro JavaScript Techniques](https://www.amazon.com/Pro-JavaScript-Techniques-John-Resig/dp/1590597273) - John Resig
  - [Smashing Node.js: JavaScript Everywhere](https://www.amazon.com/Smashing-Node-js-JavaScript-Everywhere-Magazine/dp/1119962595) - Guillermo Rauch
  - [Secrets of the JavaScript Ninja](https://www.amazon.com/Secrets-JavaScript-Ninja-John-Resig/dp/193398869X) - John Resig and Bear Bibeault
  - [Human JavaScript](http://humanjavascript.com/) - Henrik Joreteg
  - [Superhero.js](http://superherojs.com/) - Kim Joar Bekkelund, Mads Mobæk, & Olav Bjorkoy
  - [JSBooks](https://jsbooks.revolunet.com/) - Julien Bouquillon
  - [Third Party JavaScript](https://www.manning.com/books/third-party-javascript) - Ben Vinegar and Anton Kovalyov
  - [Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript](https://amzn.com/dp/0321812182) - David Herman
  - [Eloquent JavaScript](https://eloquentjavascript.net/) - Marijn Haverbeke
  - [You Don’t Know JS: ES6 & Beyond](https://shop.oreilly.com/product/0636920033769.do) - Kyle Simpson

**블로그**

- [JavaScript Weekly](https://javascriptweekly.com/)
  - [JavaScript, JavaScript...](https://javascriptweblog.wordpress.com/)
  - [Bocoup Weblog](https://bocoup.com/weblog)
  - [Adequately Good](https://www.adequatelygood.com/)
  - [NCZOnline](https://www.nczonline.net/)
  - [Perfection Kills](http://perfectionkills.com/)
  - [Ben Alman](https://benalman.com/)
  - [Dmitry Baranovskiy](http://dmitry.baranovskiy.com/)
  - [nettuts](https://code.tutsplus.com/?s=javascript)

**팟캐스트**

- [JavaScript Air](https://javascriptair.com/)
  - [JavaScript Jabber](https://devchat.tv/js-jabber/)

**[⬆ 맨 위로 이동](#table-of-contents)**

## 실제 사용 사례

이 스타일 가이드를 사용하고 있는 조직들의 목록입니다. 풀 리퀘스트를 보내주시면 목록에 추가해 드리겠습니다.

- **123erfasst**: [123erfasst/javascript](https://github.com/123erfasst/javascript)
  - **4Catalyzer**: [4Catalyzer/javascript](https://github.com/4Catalyzer/javascript)
  - **Aan Zee**: [AanZee/javascript](https://github.com/AanZee/javascript)
  - **Airbnb**: [airbnb/javascript](https://github.com/airbnb/javascript)
  - **AloPeyk**: [AloPeyk](https://github.com/AloPeyk)
  - **AltSchool**: [AltSchool/javascript](https://github.com/AltSchool/javascript)
  - **Apartmint**: [apartmint/javascript](https://github.com/apartmint/javascript)
  - **Ascribe**: [ascribe/javascript](https://github.com/ascribe/javascript)
  - **Avant**: [avantcredit/javascript](https://github.com/avantcredit/javascript)
  - **Axept**: [axept/javascript](https://github.com/axept/javascript)
  - **Billabong**: [billabong/javascript](https://github.com/billabong/javascript)
  - **Bisk**: [bisk](https://github.com/Bisk/)
  - **Brainshark**: [brainshark/javascript](https://github.com/brainshark/javascript)
  - **CaseNine**: [CaseNine/javascript](https://github.com/CaseNine/javascript)
  - **Cerner**: [Cerner](https://github.com/cerner/)
  - **Chartboost**: [ChartBoost/javascript-style-guide](https://github.com/ChartBoost/javascript-style-guide)
  - **Coeur d'Alene Tribe**: [www.cdatribe-nsn.gov](https://www.cdatribe-nsn.gov)
  - **ComparaOnline**: [comparaonline/javascript](https://github.com/comparaonline/javascript-style-guide)
  - **Compass Learning**: [compasslearning/javascript-style-guide](https://github.com/compasslearning/javascript-style-guide)
  - **DailyMotion**: [dailymotion/javascript](https://github.com/dailymotion/javascript)
  - **DoSomething**: [DoSomething/eslint-config](https://github.com/DoSomething/eslint-config)
  - **Digitpaint** [digitpaint/javascript](https://github.com/digitpaint/javascript)
  - **Drupal**: [www.drupal.org](https://git.drupalcode.org/project/drupal/blob/8.6.x/core/.eslintrc.json)
  - **Ecosia**: [ecosia/javascript](https://github.com/ecosia/javascript)
  - **Evolution Gaming**: [evolution-gaming/javascript](https://github.com/evolution-gaming/javascript)
  - **EvozonJs**: [evozonjs/javascript](https://github.com/evozonjs/javascript)
  - **ExactTarget**: [ExactTarget/javascript](https://github.com/ExactTarget/javascript)
  - **Flexberry**: [Flexberry/javascript-style-guide](https://github.com/Flexberry/javascript-style-guide)
  - **Gawker Media**: [gawkermedia](https://github.com/gawkermedia/)
  - **General Electric**: [GeneralElectric/javascript](https://github.com/GeneralElectric/javascript)
  - **Generation Tux**: [GenerationTux/javascript](https://github.com/generationtux/styleguide)
  - **GoodData**: [gooddata/gdc-js-style](https://github.com/gooddata/gdc-js-style)
  - **GreenChef**: [greenchef/javascript](https://github.com/greenchef/javascript)
  - **Grooveshark**: [grooveshark/javascript](https://github.com/grooveshark/javascript)
  - **Grupo-Abraxas**: [Grupo-Abraxas/javascript](https://github.com/Grupo-Abraxas/javascript)
  - **Happeo**: [happeo/javascript](https://github.com/happeo/javascript)
  - **How About We**: [howaboutwe/javascript](https://github.com/howaboutwe/javascript-style-guide)
  - **HubSpot**: [HubSpot/javascript](https://github.com/HubSpot/javascript)
  - **Hyper**: [hyperoslo/javascript-playbook](https://github.com/hyperoslo/javascript-playbook/blob/master/style.md)
  - **ILIAS**: [ILIAS](https://github.com/ILIAS-eLearning/ILIAS)
  - **InterCity Group**: [intercitygroup/javascript-style-guide](https://github.com/intercitygroup/javascript-style-guide)
  - **Jam3**: [Jam3/Javascript-Code-Conventions](https://github.com/Jam3/Javascript-Code-Conventions)
  - **JSSolutions**: [JSSolutions/javascript](https://github.com/JSSolutions/javascript)
  - **Kaplan Komputing**: [kaplankomputing/javascript](https://github.com/kaplankomputing/javascript)
  - **KickorStick**: [kickorstick](https://github.com/kickorstick/)
  - **Kinetica Solutions**: [kinetica/javascript](https://github.com/kinetica/Javascript-style-guide)
  - **LEINWAND**: [LEINWAND/javascript](https://github.com/LEINWAND/javascript)
  - **Lonely Planet**: [lonelyplanet/javascript](https://github.com/lonelyplanet/javascript)
  - **M2GEN**: [M2GEN/javascript](https://github.com/M2GEN/javascript)
  - **Mighty Spring**: [mightyspring/javascript](https://github.com/mightyspring/javascript)
  - **MinnPost**: [MinnPost/javascript](https://github.com/MinnPost/javascript)
  - **MitocGroup**: [MitocGroup/javascript](https://github.com/MitocGroup/javascript)
  - **Muber**: [muber](https://github.com/muber/)
  - **National Geographic Society**: [natgeosociety](https://github.com/natgeosociety/)
  - **NullDev**: [NullDevCo/JavaScript-Styleguide](https://github.com/NullDevCo/JavaScript-Styleguide)
  - **Nulogy**: [nulogy/javascript](https://github.com/nulogy/javascript)
  - **Orange Hill Development**: [orangehill/javascript](https://github.com/orangehill/javascript)
  - **Orion Health**: [orionhealth/javascript](https://github.com/orionhealth/javascript)
  - **Peerby**: [Peerby/javascript](https://github.com/Peerby/javascript)
  - **Pier 1**: [Pier1/javascript](https://github.com/pier1/javascript)
  - **Qotto**: [Qotto/javascript-style-guide](https://github.com/Qotto/javascript-style-guide)
  - **React**: [reactjs.org/docs/how-to-contribute.html#style-guide](https://reactjs.org/docs/how-to-contribute.html#style-guide)
  - **Ripple**: [ripple/javascript-style-guide](https://github.com/ripple/javascript-style-guide)
  - **Sainsbury’s Supermarkets**: [jsainsburyplc](https://github.com/jsainsburyplc)
  - **Shutterfly**: [shutterfly/javascript](https://github.com/shutterfly/javascript)
  - **Sourcetoad**: [sourcetoad/javascript](https://github.com/sourcetoad/javascript)
  - **Springload**: [springload](https://github.com/springload/)
  - **StratoDem Analytics**: [stratodem/javascript](https://github.com/stratodem/javascript)
  - **SteelKiwi Development**: [steelkiwi/javascript](https://github.com/steelkiwi/javascript)
  - **StudentSphere**: [studentsphere/javascript](https://github.com/studentsphere/guide-javascript)
  - **SwoopApp**: [swoopapp/javascript](https://github.com/swoopapp/javascript)
  - **SysGarage**: [sysgarage/javascript-style-guide](https://github.com/sysgarage/javascript-style-guide)
  - **Syzygy Warsaw**: [syzygypl/javascript](https://github.com/syzygypl/javascript)
  - **Target**: [target/javascript](https://github.com/target/javascript)
  - **Terra**: [terra](https://github.com/cerner?utf8=%E2%9C%93&q=terra&type=&language=)
  - **TheLadders**: [TheLadders/javascript](https://github.com/TheLadders/javascript)
  - **The Nerdery**: [thenerdery/javascript-standards](https://github.com/thenerdery/javascript-standards)
  - **Tomify**: [tomprats](https://github.com/tomprats)
  - **Traitify**: [traitify/eslint-config-traitify](https://github.com/traitify/eslint-config-traitify)
  - **T4R Technology**: [T4R-Technology/javascript](https://github.com/T4R-Technology/javascript)
  - **UrbanSim**: [urbansim](https://github.com/urbansim/)
  - **VoxFeed**: [VoxFeed/javascript-style-guide](https://github.com/VoxFeed/javascript-style-guide)
  - **WeBox Studio**: [weboxstudio/javascript](https://github.com/weboxstudio/javascript)
  - **Weggo**: [Weggo/javascript](https://github.com/Weggo/javascript)
  - **Zillow**: [zillow/javascript](https://github.com/zillow/javascript)
  - **Zit Software**: [zit-software/javascript](https://github.com/zit-software/javascript)
  - **ZocDoc**: [ZocDoc/javascript](https://github.com/ZocDoc/javascript)

**[⬆ 맨 위로 이동](#table-of-contents)**

## 번역

이 스타일 가이드는 다른 언어로도 제공됩니다:

- ![br](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **브라질 포르투갈어**: [armoucar/javascript-style-guide](https://github.com/armoucar/javascript-style-guide)
  - ![bg](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Bulgaria.png) **불가리아어**: [borislavvv/javascript](https://github.com/borislavvv/javascript)
  - ![ca](https://raw.githubusercontent.com/fpmweb/javascript-style-guide/master/img/catala.png) **카탈루냐어**: [fpmweb/javascript-style-guide](https://github.com/fpmweb/javascript-style-guide)
  - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **중국어 (간체)**: [lin-123/javascript](https://github.com/lin-123/javascript)
  - ![tw](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Taiwan.png) **중국어 (번체)**: [jigsawye/javascript](https://github.com/jigsawye/javascript)
  - ![fr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/France.png) **프랑스어**: [nmussy/javascript-style-guide](https://github.com/nmussy/javascript-style-guide)
  - ![de](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Germany.png) **독일어**: [timofurrer/javascript-style-guide](https://github.com/timofurrer/javascript-style-guide)
  - ![it](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Italy.png) **이탈리아어**: [sinkswim/javascript-style-guide](https://github.com/sinkswim/javascript-style-guide)
  - ![jp](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **일본어**: [mitsuruog/javascript-style-guide](https://github.com/mitsuruog/javascript-style-guide)
  - ![kr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **한국어**: [ParkSB/javascript-style-guide](https://github.com/ParkSB/javascript-style-guide)
  - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **러시아어**: [leonidlebedev/javascript-airbnb](https://github.com/leonidlebedev/javascript-airbnb)
  - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **스페인어**: [paolocarrasco/javascript-style-guide](https://github.com/paolocarrasco/javascript-style-guide)
  - ![th](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Thailand.png) **태국어**: [lvarayut/javascript-style-guide](https://github.com/lvarayut/javascript-style-guide)
  - ![tr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Turkey.png) **튀르키예어**: [eraycetinay/javascript](https://github.com/eraycetinay/javascript)
  - ![ua](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Ukraine.png) **우크라이나어**: [ivanzusko/javascript](https://github.com/ivanzusko/javascript)
  - ![vn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Vietnam.png) **베트남어**: [dangkyokhoang/javascript-style-guide](https://github.com/dangkyokhoang/javascript-style-guide)

## JavaScript 스타일 가이드 가이드

- [참조](https://github.com/airbnb/javascript/wiki/The-JavaScript-Style-Guide-Guide)

## JavaScript에 대해 대화하기

- [gitter](https://gitter.im/airbnb/javascript)에서 우리를 찾아보세요.

## 기여자

- [기여자 보기](https://github.com/airbnb/javascript/graphs/contributors)

## 라이선스

(The MIT License)

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.

**[⬆ 맨 위로 이동](#table-of-contents)**

## 수정 사항

이 가이드를 포크(fork)하여 팀의 스타일 가이드에 맞게 규칙을 변경하는 것을 권장합니다. 아래에 스타일 가이드에 대한 일부 수정 사항을 나열할 수 있습니다. 이를 통해 병합 충돌(merge conflict)을 처리할 필요 없이 주기적으로 스타일 가이드를 업데이트할 수 있습니다.

# };

javascript

javascript 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

javascript

javascript 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README