├── .gitignore ├── README.md ├── css-in-javascript └── README.md └── es5-deprecated └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | # gitignore 2 | 3 | node_modules/ 4 | .vscode/ 5 | .idea/ 6 | 7 | # Only apps should have lockfiles 8 | yarn.lock 9 | package-lock.json -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [원문: https://github.com/airbnb/javascript](https://github.com/airbnb/javascript) 2 | 3 | # Airbnb JavaScript 스타일 가이드() { 4 | 5 | *대체로 합리적인 JavaScript 접근 방법* 6 | 7 | > **참고**: 이 가이드는 사용자가 [Babel](https://babeljs.io)과 [babel-preset-airbnb](https://npmjs.com/babel-preset-airbnb) 또는 이와 동등한 것을 사용한다고 가정합니다. 또한 사용자가 어플리케이션에 [airbnb-browser-shims](https://npmjs.com/airbnb-browser-shims)와 함께 shims/polyfills 또는 이와 동등한 것을 설치했다고 가정합니다. 8 | 9 | [![Downloads](https://img.shields.io/npm/dm/eslint-config-airbnb.svg)](https://www.npmjs.com/package/eslint-config-airbnb) 10 | [![Downloads](https://img.shields.io/npm/dm/eslint-config-airbnb-base.svg)](https://www.npmjs.com/package/eslint-config-airbnb-base) 11 | [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/airbnb/javascript?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) 12 | 13 | 이 스타일 가이드는 다른 언어로도 제공됩니다. [Translation](#translation)을 보세요. 14 | 15 | 다른 스타일 가이드 16 | 17 | - [ES5 (구버전)](es5-deprecated/) 18 | - [React](https://github.com/airbnb/javascript/tree/master/react/) 19 | - [CSS-in-JavaScript](css-in-javascript/) 20 | - [CSS & Sass](https://github.com/airbnb/css) 21 | - [Ruby](https://github.com/airbnb/ruby) 22 | 23 | ## 목차 24 | 25 | 1. [형 (Types)](#형-types) 26 | 1. [참조 (References)](#참조-references) 27 | 1. [객체 (Objects)](#객체-objects) 28 | 1. [배열 (Arrays)](#배열-arrays) 29 | 1. [비구조화 Destructuring](#비구조화-destructuring) 30 | 1. [문자열 (Strings)](#문자열-strings) 31 | 1. [함수 (Functions)](#함수-functions) 32 | 1. [화살표 함수 (Arrow Functions)](#화살표-함수-arrow-functions) 33 | 1. [클래스 & 생성자 (Classes & Constructors)](#클래스--생성자-classes--constructors) 34 | 1. [모듈 (Modules)](#모듈-modules) 35 | 1. [이터레이터와 제너레이터 (Iterators and Generators)](#이터레이터와-제너레이터-iterators-and-generators) 36 | 1. [속성 (Properties)](#속성-properties) 37 | 1. [변수 (Variables)](#변수-variables) 38 | 1. [호이스팅 (Hoisting)](#호이스팅-hoisting) 39 | 1. [비교 연산자 (Comparison Operators & Equality)](#비교-연산자-comparison-operators--equality) 40 | 1. [블록 (Blocks)](#블록-blocks) 41 | 1. [제어문 (Control Statements)](#제어문-control-statements) 42 | 1. [주석 (Comments)](#주석-comments) 43 | 1. [공백 (Whitespace)](#공백-whitespace) 44 | 1. [쉼표 (Commas)](#쉼표-commas) 45 | 1. [세미콜론 (Semicolons)](#세미콜론-semicolons) 46 | 1. [형변환과 강제 (Type Casting & Coercion)](#형변환과-강제-type-casting--coercion) 47 | 1. [명명규칙 (Naming Conventions)](#명명규칙-naming-conventions) 48 | 1. [접근자 (Accessors)](#접근자-accessors) 49 | 1. [이벤트 (Events)](#이벤트-events) 50 | 1. [제이쿼리 (jQuery)](#제이쿼리-jquery) 51 | 1. [ES5 호환성 (ECMAScript 5 Compatibility)](#ES5-호환성-ecmascript-5-compatibility) 52 | 1. [ECMAScript 6+ (ES 2015+) 스타일](#ecmascript-6-es-2015-스타일) 53 | 1. [표준 라이브러리 (Standard Library)](#표준-라이브러리-standard-library) 54 | 1. [테스트 (Testing)](#테스트-testing) 55 | 1. [성능 (Performance)](#성능-performance) 56 | 1. [자료 (Resources)](#자료-resources) 57 | 1. [In the Wild](#in-the-wild) 58 | 1. [Translation](#translation) 59 | 1. [The JavaScript Style Guide Guide](#the-javascript-style-guide-guide) 60 | 1. [Chat With Us About JavaScript](#chat-with-us-about-javascript) 61 | 1. [Contributors](#contributors) 62 | 1. [License](#license) 63 | 1. [Amendments](#amendments) 64 | 65 | ## 형 (Types) 66 | 67 | 68 | - [1.1](#types--primitives) **원시형**: 원시형에 접근하면 값을 직접 조작하게 됩니다. 69 | 70 | - `string` 71 | - `number` 72 | - `boolean` 73 | - `null` 74 | - `undefined` 75 | - `symbol` 76 | - `bigint` 77 | 78 | ```javascript 79 | const foo = 1; 80 | let bar = foo; 81 | 82 | bar = 9; 83 | 84 | console.log(foo, bar); // => 1, 9 85 | ``` 86 | 87 | - Symbol과 BigInt는 완전히 폴리필되지 않으므로, 이를 지원하지 않는 브라우저/환경을 대상으로 사용해서는 안 됩니다. 88 | 89 | 90 | - [1.2](#types--complex) **참조형**: 참조형에 접근하면 참조를 통해 값을 조작하게 됩니다. 91 | 92 | - `object` 93 | - `array` 94 | - `function` 95 | 96 | ```javascript 97 | const foo = [1, 2]; 98 | const bar = foo; 99 | 100 | bar[0] = 9; 101 | 102 | console.log(foo[0], bar[0]); // => 9, 9 103 | ``` 104 | 105 | **[⬆ back to top](#목차)** 106 | 107 | ## 참조 (References) 108 | 109 | 110 | - [2.1](#references--prefer-const) 모든 참조에는 `var` 대신 `const`를 사용하세요. eslint: [`prefer-const`](https://eslint.org/docs/rules/prefer-const.html), [`no-const-assign`](https://eslint.org/docs/rules/no-const-assign.html) 111 | 112 | > 왜? 참조를 재할당 할 수 없게 함으로써, 이해하기 어려운 동시에 버그로 이어지는 코드를 방지합니다. 113 | 114 | ```javascript 115 | // bad 116 | var a = 1; 117 | var b = 2; 118 | 119 | // good 120 | const a = 1; 121 | const b = 2; 122 | ``` 123 | 124 | 125 | - [2.2](#references--disallow-var) 만약 참조를 재할당 해야 한다면 `var` 대신 `let`을 사용하세요. eslint: [`no-var`](https://eslint.org/docs/rules/no-var.html) 126 | 127 | > 왜? `var`처럼 함수스코프를 취하는 것 보다는 블록스코프를 취하는 `let`이 더 낫습니다. 128 | 129 | ```javascript 130 | // bad 131 | var count = 1; 132 | if (true) { 133 | count += 1; 134 | } 135 | 136 | // good, use the let. 137 | let count = 1; 138 | if (true) { 139 | count += 1; 140 | } 141 | ``` 142 | 143 | 144 | - [2.3](#references--block-scope) `let` 과 `const` 는 둘 다 블록스코프라는 것을 유의하세요. 145 | 146 | ```javascript 147 | // const와 let은 선언된 블록 안에서만 존재합니다. 148 | { 149 | let a = 1; 150 | const b = 1; 151 | } 152 | console.log(a); // ReferenceError 153 | console.log(b); // ReferenceError 154 | ``` 155 | 156 | **[⬆ back to top](#목차)** 157 | 158 | ## 객체 (Objects) 159 | 160 | 161 | - [3.1](#objects--no-new) 객체를 생성할 때는 리터럴 문법을 사용하세요. eslint: [`no-new-object`](https://eslint.org/docs/rules/no-new-object.html) 162 | 163 | ```javascript 164 | // bad 165 | const item = new Object(); 166 | 167 | // good 168 | const item = {}; 169 | ``` 170 | 171 | 172 | - [3.2](#es6-computed-properties) 동적 속성을 갖는 객체를 생성할 때는 속성 계산명을 사용하세요. 173 | 174 | > 왜? 이렇게 하면 객체의 모든 속성을 한 곳에서 정의할 수 있습니다. 175 | 176 | ```javascript 177 | 178 | function getKey(k) { 179 | return `a key named ${k}`; 180 | } 181 | 182 | // bad 183 | const obj = { 184 | id: 5, 185 | name: 'San Francisco', 186 | }; 187 | obj[getKey('enabled')] = true; 188 | 189 | // good 190 | const obj = { 191 | id: 5, 192 | name: 'San Francisco', 193 | [getKey('enabled')]: true, 194 | }; 195 | ``` 196 | 197 | 198 | - [3.3](#es6-object-shorthand) 메소드의 단축구문을 사용하세요. eslint: [`object-shorthand`](https://eslint.org/docs/rules/object-shorthand.html) 199 | 200 | ```javascript 201 | // bad 202 | const atom = { 203 | value: 1, 204 | 205 | addValue: function (value) { 206 | return atom.value + value; 207 | }, 208 | }; 209 | 210 | // good 211 | const atom = { 212 | value: 1, 213 | 214 | addValue(value) { 215 | return atom.value + value; 216 | }, 217 | }; 218 | ``` 219 | 220 | 221 | - [3.4](#es6-object-concise) 속성의 단축구문을 사용하세요. eslint: [`object-shorthand`](https://eslint.org/docs/rules/object-shorthand.html) 222 | 223 | > 왜? 설명이 간결해지기 때문입니다. 224 | 225 | ```javascript 226 | const lukeSkywalker = 'Luke Skywalker'; 227 | 228 | // bad 229 | const obj = { 230 | lukeSkywalker: lukeSkywalker, 231 | }; 232 | 233 | // good 234 | const obj = { 235 | lukeSkywalker, 236 | }; 237 | ``` 238 | 239 | 240 | - [3.5](#objects--grouped-shorthand) 속성의 단축구문은 객체 선언의 시작 부분에 모아주세요. 241 | 242 | > 왜? 어떤 속성이 단축구문을 사용하고 있는지 알기 쉽게 해줍니다. 243 | 244 | ```javascript 245 | const anakinSkywalker = 'Anakin Skywalker'; 246 | const lukeSkywalker = 'Luke Skywalker'; 247 | 248 | // bad 249 | const obj = { 250 | episodeOne: 1, 251 | twoJediWalkIntoACantina: 2, 252 | lukeSkywalker, 253 | episodeThree: 3, 254 | mayTheFourth: 4, 255 | anakinSkywalker, 256 | }; 257 | 258 | // good 259 | const obj = { 260 | lukeSkywalker, 261 | anakinSkywalker, 262 | episodeOne: 1, 263 | twoJediWalkIntoACantina: 2, 264 | episodeThree: 3, 265 | mayTheFourth: 4, 266 | }; 267 | ``` 268 | 269 | 270 | - [3.6](#objects--quoted-props) 유효하지 않은 식별자에만 따옴표 속성을 사용하세요. eslint: [`quote-props`](https://eslint.org/docs/rules/quote-props.html) 271 | 272 | > 왜? 더 읽기 쉽습니다. 이렇게 하면 구문 하이라이팅이 잘 되고, 많은 자바스크립트 엔진이 더 쉽게 최적화 할 수 있습니다. 273 | 274 | ```javascript 275 | // bad 276 | const bad = { 277 | 'foo': 3, 278 | 'bar': 4, 279 | 'data-blah': 5, 280 | }; 281 | 282 | // good 283 | const good = { 284 | foo: 3, 285 | bar: 4, 286 | 'data-blah': 5, 287 | }; 288 | ``` 289 | 290 | 291 | - [3.7](#objects--prototype-builtins) `hasOwnProperty`, `propertyIsEnumerable`, `isPrototypeOf`와 같은 `Object.prototype` 메소드를 직접 호출하지 마세요. eslint: [`no-prototype-builtins`](https://eslint.org/docs/rules/no-prototype-builtins) 292 | 293 | > 왜? 이러한 메소드들은 객체의 속성에 의해 가려질 수 있습니다. - `{ hasOwnProperty: false }` - 또는, 객체가 null 객체(`Object.create(null)`)일 수도 있습니다. 294 | 295 | ```javascript 296 | // bad 297 | console.log(object.hasOwnProperty(key)); 298 | 299 | // good 300 | console.log(Object.prototype.hasOwnProperty.call(object, key)); 301 | 302 | // best 303 | const has = Object.prototype.hasOwnProperty; // 모듈스코프에서 한 번 캐시하세요. 304 | console.log(has.call(object, key)); 305 | /* or */ 306 | import has from 'has'; // https://www.npmjs.com/package/has 307 | console.log(has(object, key)); 308 | ``` 309 | 310 | 311 | - [3.8](#objects--rest-spread) 객체에 대해 얕은 복사를 할 때는 [`Object.assign`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)대신 객체 전개 구문을 사용하세요. 특정 속성이 생략된 새로운 개체를 가져올 때는 객체 나머지 연산자(object rest operator)를 사용하세요. eslint: [`prefer-object-spread`](https://eslint.org/docs/rules/prefer-object-spread) 312 | 313 | ```javascript 314 | // very bad 315 | const original = { a: 1, b: 2 }; 316 | const copy = Object.assign(original, { c: 3 }); // `original`을 변조합니다 ಠ_ಠ 317 | delete copy.a; // 그래서 이렇게 합니다 318 | 319 | // bad 320 | const original = { a: 1, b: 2 }; 321 | const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 } 322 | 323 | // good 324 | const original = { a: 1, b: 2 }; 325 | const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 } 326 | 327 | const { a, ...noA } = copy; // noA => { b: 2, c: 3 } 328 | ``` 329 | 330 | **[⬆ back to top](#목차)** 331 | 332 | ## 배열 (Arrays) 333 | 334 | 335 | - [4.1](#arrays--literals) 배열을 생성할 때 리터럴 구문을 사용하세요. eslint: [`no-array-constructor`](https://eslint.org/docs/rules/no-array-constructor.html) 336 | 337 | ```javascript 338 | // bad 339 | const items = new Array(); 340 | 341 | // good 342 | const items = []; 343 | ``` 344 | 345 | 346 | - [4.2](#arrays--push) 배열에 직접 값을 할당하지 말고 [Array#push](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push)를 사용하세요. 347 | 348 | ```javascript 349 | const someStack = []; 350 | 351 | // bad 352 | someStack[someStack.length] = 'abracadabra'; 353 | 354 | // good 355 | someStack.push('abracadabra'); 356 | ``` 357 | 358 | 359 | - [4.3](#es6-array-spreads) 배열을 복사할 때는 배열 전개 구문 `...` 을 사용하세요. 360 | 361 | ```javascript 362 | // bad 363 | const len = items.length; 364 | const itemsCopy = []; 365 | let i; 366 | 367 | for (i = 0; i < len; i += 1) { 368 | itemsCopy[i] = items[i]; 369 | } 370 | 371 | // good 372 | const itemsCopy = [...items]; 373 | ``` 374 | 375 | 376 | 377 | - [4.4](#arrays--from-iterable) 순회 가능한 객체(iterable object)를 배열로 변환할 때는 [`Array.from`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from) 대신 전개 구문 `...`을 사용하세요. 378 | 379 | ```javascript 380 | const foo = document.querySelectorAll('.foo'); 381 | 382 | // good 383 | const nodes = Array.from(foo); 384 | 385 | // best 386 | const nodes = [...foo]; 387 | ``` 388 | 389 | 390 | - [4.5](#arrays--from-array-like) array-like 객체를 배열로 변환할 때는 [`Array.from`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from)을 사용하세요. 391 | 392 | ```javascript 393 | const arrLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 }; 394 | 395 | // bad 396 | const arr = Array.prototype.slice.call(arrLike); 397 | 398 | // good 399 | const arr = Array.from(arrLike); 400 | ``` 401 | 402 | 403 | - [4.6](#arrays--mapping) 매핑할 때는 전개 구문 `...` 대신 [`Array.from`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from)을 사용하세요. 중간 배열 생성을 방지하기 때문입니다. 404 | 405 | ```javascript 406 | // bad 407 | const baz = [...foo].map(bar); 408 | 409 | // good 410 | const baz = Array.from(foo, bar); 411 | ``` 412 | 413 | 414 | - [4.7](#arrays--callback-return) 배열 메소드 콜백에는 리턴 구문을 사용하세요. 만약 함수가 [8.2](#arrows--implicit-return)와 같이 사이드 이펙트가 없는 단일 표현식을 반환하는 구문으로 구성되어 있다면 리턴 구문을 생략해도 됩니다. eslint: [`array-callback-return`](https://eslint.org/docs/rules/array-callback-return) 415 | 416 | ```javascript 417 | // good 418 | [1, 2, 3].map((x) => { 419 | const y = x + 1; 420 | return x * y; 421 | }); 422 | 423 | // good 424 | [1, 2, 3].map(x => x + 1); 425 | 426 | // bad - no returned value means `acc` becomes undefined after the first iteration 427 | [[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => { 428 | const flatten = acc.concat(item); 429 | acc[index] = flatten; 430 | }); 431 | 432 | // good 433 | [[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => { 434 | const flatten = acc.concat(item); 435 | acc[index] = flatten; 436 | return flatten; 437 | }); 438 | 439 | // bad 440 | inbox.filter((msg) => { 441 | const { subject, author } = msg; 442 | if (subject === 'Mockingbird') { 443 | return author === 'Harper Lee'; 444 | } else { 445 | return false; 446 | } 447 | }); 448 | 449 | // good 450 | inbox.filter((msg) => { 451 | const { subject, author } = msg; 452 | if (subject === 'Mockingbird') { 453 | return author === 'Harper Lee'; 454 | } 455 | 456 | return false; 457 | }); 458 | ``` 459 | 460 | 461 | - [4.8](#arrays--bracket-newline) 배열이 여러 줄에 걸쳐 있다면 배열을 연 이후와 닫기 이전에 줄바꿈을 해주세요. 462 | 463 | ```javascript 464 | // bad 465 | const arr = [ 466 | [0, 1], [2, 3], [4, 5], 467 | ]; 468 | 469 | const objectInArray = [{ 470 | id: 1, 471 | }, { 472 | id: 2, 473 | }]; 474 | 475 | const numberInArray = [ 476 | 1, 2, 477 | ]; 478 | 479 | // good 480 | const arr = [[0, 1], [2, 3], [4, 5]]; 481 | 482 | const objectInArray = [ 483 | { 484 | id: 1, 485 | }, 486 | { 487 | id: 2, 488 | }, 489 | ]; 490 | 491 | const numberInArray = [ 492 | 1, 493 | 2, 494 | ]; 495 | ``` 496 | 497 | **[⬆ back to top](#목차)** 498 | 499 | ## 비구조화 (Destructuring) 500 | 501 | 502 | - [5.1](#destructuring--object) 하나의 객체에서 여러 속성에 접근할 때는 객체 비구조화를 사용하세요. eslint: [`prefer-destructuring`](https://eslint.org/docs/rules/prefer-destructuring) 503 | 504 | > 왜? 비구조화는 속성들을 위한 임시 참조를 만들지 않도록 해주고, 객체의 반복적인 접근을 방지합니다. 반복적인 객체 접근은 중복 코드와 실수를 만들어내고, 더 많은 코드를 읽게 합니다. 또한 객체 비구조화는 블록에서 사용되는 객체의 구조를 정의하는 단일한 위치를 제공함으로써 어떤 것이 사용되는지 알아내기 위해 모든 블록을 읽지 않아도 되도록 해줍니다. 505 | 506 | ```javascript 507 | // bad 508 | function getFullName(user) { 509 | const firstName = user.firstName; 510 | const lastName = user.lastName; 511 | 512 | return `${firstName} ${lastName}`; 513 | } 514 | 515 | // good 516 | function getFullName(user) { 517 | const { firstName, lastName } = user; 518 | return `${firstName} ${lastName}`; 519 | } 520 | 521 | // best 522 | function getFullName({ firstName, lastName }) { 523 | return `${firstName} ${lastName}`; 524 | } 525 | ``` 526 | 527 | 528 | - [5.2](#destructuring--array) 배열 비구조화를 사용하세요. eslint: [`prefer-destructuring`](https://eslint.org/docs/rules/prefer-destructuring) 529 | 530 | ```javascript 531 | const arr = [1, 2, 3, 4]; 532 | 533 | // bad 534 | const first = arr[0]; 535 | const second = arr[1]; 536 | 537 | // good 538 | const [first, second] = arr; 539 | ``` 540 | 541 | 542 | - [5.3](#destructuring--object-over-array) 여러 값을 반환하는 경우 배열 비구조화가 아닌 객체 비구조화를 사용하세요. 543 | 544 | > 왜? 이렇게 하면 이후 호출처에 영향을 주지 않고 새로운 속성을 추가하거나 순서를 변경할 수 있습니다. 545 | 546 | ```javascript 547 | // bad 548 | function processInput(input) { 549 | // 기적이 일어납니다 550 | return [left, right, top, bottom]; 551 | } 552 | 553 | // 반환되는 데이터의 순서를 생각해야합니다 554 | const [left, __, top] = processInput(input); 555 | 556 | // good 557 | function processInput(input) { 558 | // 기적이 일어납니다 559 | return { left, right, top, bottom }; 560 | } 561 | 562 | // 필요한 데이터만 선택하면 됩니다 563 | const { left, top } = processInput(input); 564 | ``` 565 | 566 | **[⬆ back to top](#목차)** 567 | 568 | ## 문자열 (Strings) 569 | 570 | 571 | - [6.1](#strings--quotes) 문자열에는 작은 따옴표 `''`를 사용하세요. eslint: [`quotes`](https://eslint.org/docs/rules/quotes.html) 572 | 573 | ```javascript 574 | // bad 575 | const name = "Capt. Janeway"; 576 | 577 | // bad - template literals should contain interpolation or newlines 578 | const name = `Capt. Janeway`; 579 | 580 | // good 581 | const name = 'Capt. Janeway'; 582 | ``` 583 | 584 | 585 | - [6.2](#strings--line-length) 100자가 넘는 문자열을 문자열 연결을 이용해 여러 줄에 걸쳐 쓰지 마세요. 586 | 587 | > 왜? 문자열이 끊어지면 작업하기 어렵고, 코드를 찾기 어렵게 됩니다. 588 | 589 | ```javascript 590 | // bad 591 | const errorMessage = 'This is a super long error that was thrown because \ 592 | of Batman. When you stop to think about how Batman had anything to do \ 593 | with this, you would get nowhere \ 594 | fast.'; 595 | 596 | // bad 597 | const errorMessage = 'This is a super long error that was thrown because ' + 598 | 'of Batman. When you stop to think about how Batman had anything to do ' + 599 | 'with this, you would get nowhere fast.'; 600 | 601 | // good 602 | 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.'; 603 | ``` 604 | 605 | 606 | - [6.3](#es6-template-literals) 문자열을 생성하는 경우, 문자열 연결 대신 템플릿 문자열을 사용하세요. eslint: [`prefer-template`](https://eslint.org/docs/rules/prefer-template.html) [`template-curly-spacing`](https://eslint.org/docs/rules/template-curly-spacing) 607 | 608 | > 왜? 템플릿 문자열은 덧붙이기와 줄바꿈을 제공하는 간결한 문법으로, 가독성을 높여줍니다. 609 | 610 | ```javascript 611 | // bad 612 | function sayHi(name) { 613 | return 'How are you, ' + name + '?'; 614 | } 615 | 616 | // bad 617 | function sayHi(name) { 618 | return ['How are you, ', name, '?'].join(); 619 | } 620 | 621 | // bad 622 | function sayHi(name) { 623 | return `How are you, ${ name }?`; 624 | } 625 | 626 | // good 627 | function sayHi(name) { 628 | return `How are you, ${name}?`; 629 | } 630 | ``` 631 | 632 | 633 | - [6.4](#strings--eval) 절대로 문자열에 `eval()`을 사용하지 마세요. 너무나 많은 취약점을 만듭니다. eslint: [`no-eval`](https://eslint.org/docs/rules/no-eval) 634 | 635 | 636 | - [6.5](#strings--escaping) 문자열에 불필요한 이스케이프 문자를 사용하지 마세요. eslint: [`no-useless-escape`](https://eslint.org/docs/rules/no-useless-escape) 637 | 638 | > 왜? 백슬래시는 가독성을 해치기 때문에 필요할 때만 사용해야 합니다. 639 | 640 | ```javascript 641 | // bad 642 | const foo = '\'this\' \i\s \"quoted\"'; 643 | 644 | // good 645 | const foo = '\'this\' is "quoted"'; 646 | const foo = `my name is '${name}'`; 647 | ``` 648 | 649 | **[⬆ back to top](#목차)** 650 | 651 | ## 함수 (Functions) 652 | 653 | 654 | - [7.1](#functions--declarations) 함수선언식 대신 기명 함수표현식을 사용하세요. eslint: [`func-style`](https://eslint.org/docs/rules/func-style) 655 | 656 | > 왜? 함수선언은 호이스트됩니다. 즉, 파일에서 함수를 정의하기 전에 함수를 참조하는 것이 쉽다는 것 - 너무 쉽다는 것 - 을 의미합니다. 이것은 가독성과 유지관리성를 해칩니다. 만약 함수의 정의가 나머지 파일을 이해하는데 방해가 될 정도로 크거나 복잡하다면, 이제 함수를 모듈 밖으로 추출해내야 할 때입니다! 포함된 변수로부터 추론된 이름인지와 관계 없이(현대 브라우저 또는 Babel과 같은 컴파일러를 쓸 때 흔히 볼 수 있듯이) 표현의 이름을 명시적으로 짓는 것을 잊지 마세요. 이를 통해 Error 콜 스택에 대한 모든 추정을 제거할 수 있습니다. ([토론](https://github.com/airbnb/javascript/issues/794)) 657 | 658 | ```javascript 659 | // bad 660 | function foo() { 661 | // ... 662 | } 663 | 664 | // bad 665 | const foo = function () { 666 | // ... 667 | }; 668 | 669 | // good 670 | // 변수 참조 호출과 구분되는 이름 671 | const short = function longUniqueMoreDescriptiveLexicalFoo() { 672 | // ... 673 | }; 674 | ``` 675 | 676 | 677 | - [7.2](#functions--iife) 즉시 호출 함수 표현식을 괄호로 감싸세요. eslint: [`wrap-iife`](https://eslint.org/docs/rules/wrap-iife.html) 678 | 679 | > 왜? 즉시 호출 함수 표현식은 하나의 단위이며, 괄호로 이것을 감싸면 괄호 안의 표현을 명확하게 해주기 때문입니다. 모듈을 어디에서나 사용한다면 즉시 호출 표현식은 전혀 필요하지 않다는 점을 주의하세요. 680 | 681 | ```javascript 682 | // 즉시 호출 함수 표현식 (IIFE) 683 | (function () { 684 | console.log('Welcome to the Internet. Please follow me.'); 685 | }()); 686 | ``` 687 | 688 | 689 | - [7.3](#functions--in-blocks) 함수 이외의 블록(`if`, `while`, 등)에서 함수를 선언하지 마세요. 브라우저는 이를 허용하겠지만, 모두 다르게 해석합니다. eslint: [`no-loop-func`](https://eslint.org/docs/rules/no-loop-func.html) 690 | 691 | 692 | - [7.4](#functions--note-on-blocks) **참고:** ECMA-262 명세는 `블록`을 구문의 일종으로 정의하고 있지만 함수선언은 구문이 아닙니다. 693 | 694 | ```javascript 695 | // bad 696 | if (currentUser) { 697 | function test() { 698 | console.log('Nope.'); 699 | } 700 | } 701 | 702 | // good 703 | let test; 704 | if (currentUser) { 705 | test = () => { 706 | console.log('Yup.'); 707 | }; 708 | } 709 | ``` 710 | 711 | 712 | - [7.5](#functions--arguments-shadow) 절대 매개변수 이름을 `arguments`라고 짓지 마세요. 이것은 함수 스코프에 전해지는 `arguments` 객체의 참조를 덮어써 버립니다. 713 | 714 | ```javascript 715 | // bad 716 | function foo(name, options, arguments) { 717 | // ... 718 | } 719 | 720 | // good 721 | function foo(name, options, args) { 722 | // ... 723 | } 724 | ``` 725 | 726 | 727 | - [7.6](#es6-rest) 절대 `arguments`를 사용하지마세요. 대신 나머지 문법(rest syntax) `...`를 사용하세요. eslint: [`prefer-rest-params`](https://eslint.org/docs/rules/prefer-rest-params) 728 | 729 | > 왜? `...`을 사용하면 몇 개의 매개변수를 이용하고 싶은지 확실히 할 수 있습니다. 더 나아가, 나머지 인자(rest arguments)는 `arguments` 와 같은 Array-like 객체가 아닌 진짜 Array입니다. 730 | 731 | ```javascript 732 | // bad 733 | function concatenateAll() { 734 | const args = Array.prototype.slice.call(arguments); 735 | return args.join(''); 736 | } 737 | 738 | // good 739 | function concatenateAll(...args) { 740 | return args.join(''); 741 | } 742 | ``` 743 | 744 | 745 | - [7.7](#es6-default-parameters) 함수의 인자를 변조하기 보다는 기본 매개변수 문법을 사용하세요. 746 | 747 | ```javascript 748 | // really bad 749 | function handleThings(opts) { 750 | // 안돼요! 우리는 함수 인자를 변경하면 안됩니다. 751 | // 더 안 좋은 경우: 만약 opts가 falsy한 값일 경우 당신이 원하는 객체로 752 | // 설정되겠지만, 이는 미묘한 버그를 일으킬 수 있습니다. 753 | opts = opts || {}; 754 | // ... 755 | } 756 | 757 | // still bad 758 | function handleThings(opts) { 759 | if (opts === void 0) { 760 | opts = {}; 761 | } 762 | // ... 763 | } 764 | 765 | // good 766 | function handleThings(opts = {}) { 767 | // ... 768 | } 769 | ``` 770 | 771 | 772 | - [7.8](#functions--default-side-effects) 사이드 이펙트가 있을만한 기본 매개변수는 사용하지 마세요. 773 | 774 | > 왜? 혼란을 야기하기 때문입니다. 775 | 776 | ```javascript 777 | var b = 1; 778 | // bad 779 | function count(a = b++) { 780 | console.log(a); 781 | } 782 | count(); // 1 783 | count(); // 2 784 | count(3); // 3 785 | count(); // 3 786 | ``` 787 | 788 | 789 | - [7.9](#functions--defaults-last) 기본 매개변수는 항상 뒤쪽에 두세요. eslint: [`default-param-last`](https://eslint.org/docs/rules/default-param-last) 790 | 791 | ```javascript 792 | // bad 793 | function handleThings(opts = {}, name) { 794 | // ... 795 | } 796 | 797 | // good 798 | function handleThings(name, opts = {}) { 799 | // ... 800 | } 801 | ``` 802 | 803 | 804 | - [7.10](#functions--constructor) 절대로 새로운 함수를 만들기 위해 함수 생성자를 사용하지 마세요. eslint: [`no-new-func`](https://eslint.org/docs/rules/no-new-func) 805 | 806 | > 왜? 이러한 방법으로 문자열을 평가해 함수를 만드는 것은 `eval()`과 같은 수준의 취약점을 만듭니다. 807 | 808 | ```javascript 809 | // bad 810 | var add = new Function('a', 'b', 'return a + b'); 811 | 812 | // still bad 813 | var subtract = Function('a', 'b', 'return a - b'); 814 | ``` 815 | 816 | 817 | - [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) 818 | 819 | > 왜? 일관성을 갖는 것은 좋으니까요. 그리고 이렇게 하면 이름을 추가하거나 지울 때 공백을 건드릴 필요가 없게 됩니다. 820 | 821 | ```javascript 822 | // bad 823 | const f = function(){}; 824 | const g = function (){}; 825 | const h = function() {}; 826 | 827 | // good 828 | const x = function () {}; 829 | const y = function a() {}; 830 | ``` 831 | 832 | 833 | - [7.12](#functions--mutate-params) 절대로 매개변수를 바꾸지 마세요. eslint: [`no-param-reassign`](https://eslint.org/docs/rules/no-param-reassign.html) 834 | 835 | > 왜? 매개변수로 전달된 객체를 조작하면 원래 호출처에서 원치 않는 사이드 이펙트를 일으킬 수 있습니다. 836 | 837 | ```javascript 838 | // bad 839 | function f1(obj) { 840 | obj.key = 1; 841 | } 842 | 843 | // good 844 | function f2(obj) { 845 | const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1; 846 | } 847 | ``` 848 | 849 | 850 | - [7.13](#functions--reassign-params) 절대로 매개변수를 재할당하지 마세요. eslint: [`no-param-reassign`](https://eslint.org/docs/rules/no-param-reassign.html) 851 | 852 | > 왜? 매개변수를 재할당하는 것은 예측할 수 없는 결과를 불러 일으킵니다. 특히 `arguments` 객체에 접근할 때 말이죠. 또한 V8에서 최적화 문제를 일으킬 수도 있습니다. 853 | 854 | ```javascript 855 | // bad 856 | function f1(a) { 857 | a = 1; 858 | // ... 859 | } 860 | 861 | function f2(a) { 862 | if (!a) { a = 1; } 863 | // ... 864 | } 865 | 866 | // good 867 | function f3(a) { 868 | const b = a || 1; 869 | // ... 870 | } 871 | 872 | function f4(a = 1) { 873 | // ... 874 | } 875 | ``` 876 | 877 | 878 | - [7.14](#functions--spread-vs-apply) 가변 인자 함수를 호출할 때는 전개 구문 `...`을 사용하세요. eslint: [`prefer-spread`](https://eslint.org/docs/rules/prefer-spread) 879 | 880 | > 왜? 이게 더 깔끔합니다. 컨텍스트를 제공할 필요도 없고, `apply`로 `new`를 쉽게 구성할 수도 없습니다. 881 | 882 | ```javascript 883 | // bad 884 | const x = [1, 2, 3, 4, 5]; 885 | console.log.apply(console, x); 886 | 887 | // good 888 | const x = [1, 2, 3, 4, 5]; 889 | console.log(...x); 890 | 891 | // bad 892 | new (Function.prototype.bind.apply(Date, [null, 2016, 8, 5])); 893 | 894 | // good 895 | new Date(...[2016, 8, 5]); 896 | ``` 897 | 898 | 899 | - [7.15](#functions--signature-invocation-indentation) 900 | 여러 줄의 시그니처 또는 호출을 취하는 함수는 이 가이드에 있는 다른 것들처럼 들여쓰기가 되어야 합니다. 한줄에 각 항목을 하나씩 두고, 마지막 항목에 쉼표를 넣습니다. eslint: [`function-paren-newline`](https://eslint.org/docs/rules/function-paren-newline) 901 | 902 | ```javascript 903 | // bad 904 | function foo(bar, 905 | baz, 906 | quux) { 907 | // ... 908 | } 909 | 910 | // good 911 | function foo( 912 | bar, 913 | baz, 914 | quux, 915 | ) { 916 | // ... 917 | } 918 | 919 | // bad 920 | console.log(foo, 921 | bar, 922 | baz); 923 | 924 | // good 925 | console.log( 926 | foo, 927 | bar, 928 | baz, 929 | ); 930 | ``` 931 | 932 | **[⬆ back to top](#목차)** 933 | 934 | ## 화살표 함수 (Arrow Functions) 935 | 936 | 937 | - [8.1](#arrows--use-them) (인라인 콜백을 전달할 때 같이) 익명함수를 사용할 때는 화살표 함수 표현을 사용하세요. eslint: [`prefer-arrow-callback`](https://eslint.org/docs/rules/prefer-arrow-callback.html), [`arrow-spacing`](https://eslint.org/docs/rules/arrow-spacing.html) 938 | 939 | > 왜? 화살표 함수는 그 컨텍스트의 `this`에서 실행하는 버전의 함수를 만들기 때문입니다. 이것은 보통 원하는대로 작동하고, 보다 간결합니다. 940 | 941 | > 이렇게 하는 건 어때요? 만약 당신이 상당히 복잡한 함수를 가지고 있다면, 당신은 그 로직을 명명된 함수 표현식으로 옮길 수 있습니다. 942 | 943 | ```javascript 944 | // bad 945 | [1, 2, 3].map(function (x) { 946 | const y = x + 1; 947 | return x * y; 948 | }); 949 | 950 | // good 951 | [1, 2, 3].map((x) => { 952 | const y = x + 1; 953 | return x * y; 954 | }); 955 | ``` 956 | 957 | 958 | - [8.2](#arrows--implicit-return) 하나의 식으로 구성된 함수가 사이드 이펙트 없는 [표현식](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)을 반환하는 경우, 중괄호를 생략하고 암시적 반환을 사용할 수 있습니다. 그 외에는 중괄호를 그대로 두고, `return`문도 사용하세요. eslint: [`arrow-parens`](https://eslint.org/docs/rules/arrow-parens.html), [`arrow-body-style`](https://eslint.org/docs/rules/arrow-body-style.html) 959 | 960 | > 왜? Syntactic sugar(이해하기 쉽게 디자인된 프로그래밍 언어 내의 문법)니까요. 여러 함수가 연결된 경우 읽기 쉬워집니다. 961 | 962 | ```javascript 963 | // bad 964 | [1, 2, 3].map(number => { 965 | const nextNumber = number + 1; 966 | `A string containing the ${nextNumber}.`; 967 | }); 968 | 969 | // good 970 | [1, 2, 3].map(number => `A string containing the ${number}.`); 971 | 972 | // good 973 | [1, 2, 3].map((number) => { 974 | const nextNumber = number + 1; 975 | return `A string containing the ${nextNumber}.`; 976 | }); 977 | 978 | // good 979 | [1, 2, 3].map((number, index) => ({ 980 | [index]: number, 981 | })); 982 | 983 | // 암시적 반환없이 사이드 이펙트를 수반합니다 984 | function foo(callback) { 985 | const val = callback(); 986 | if (val === true) { 987 | // callback이 참을 반환하면 뭔가를 수행합니다 988 | } 989 | } 990 | 991 | let bool = false; 992 | 993 | // bad 994 | foo(() => bool = true); 995 | 996 | // good 997 | foo(() => { 998 | bool = true; 999 | }); 1000 | ``` 1001 | 1002 | 1003 | - [8.3](#arrows--paren-wrap) 표현식이 여러 줄에 걸쳐 있을 때는 가독성을 높이기 위해 소괄호로 감싸주세요. 1004 | 1005 | > 왜? 함수의 시작과 끝 부분을 알기 쉽게 해주기 때문입니다. 1006 | 1007 | ```javascript 1008 | // bad 1009 | ['get', 'post', 'put'].map(httpMethod => Object.prototype.hasOwnProperty.call( 1010 | httpMagicObjectWithAVeryLongName, 1011 | httpMethod, 1012 | ) 1013 | ); 1014 | 1015 | // good 1016 | ['get', 'post', 'put'].map(httpMethod => ( 1017 | Object.prototype.hasOwnProperty.call( 1018 | httpMagicObjectWithAVeryLongName, 1019 | httpMethod, 1020 | ) 1021 | )); 1022 | ``` 1023 | 1024 | 1025 | - [8.4](#arrows--one-arg-parens) 명확성과 일관성을 위해 항상 인자를 괄호로 감싸세요. eslint: [`arrow-parens`](https://eslint.org/docs/rules/arrow-parens.html) 1026 | 1027 | > 왜? 인자를 추가하거나 제거할 때 변경 사항을 최소화할 수 있습니다. 1028 | 1029 | ```javascript 1030 | // bad 1031 | [1, 2, 3].map(x => x * x); 1032 | 1033 | // good 1034 | [1, 2, 3].map((x) => x * x); 1035 | 1036 | // bad 1037 | [1, 2, 3].map(number => ( 1038 | `A long string with the ${number}. It’s so long that we don’t want it to take up space on the .map line!` 1039 | )); 1040 | 1041 | // good 1042 | [1, 2, 3].map((number) => ( 1043 | `A long string with the ${number}. It’s so long that we don’t want it to take up space on the .map line!` 1044 | )); 1045 | 1046 | // bad 1047 | [1, 2, 3].map(x => { 1048 | const y = x + 1; 1049 | return x * y; 1050 | }); 1051 | 1052 | // good 1053 | [1, 2, 3].map((x) => { 1054 | const y = x + 1; 1055 | return x * y; 1056 | }); 1057 | ``` 1058 | 1059 | 1060 | - [8.5](#arrows--confusing) 화살표 함수 구문(`=>`)과 비교 연산자(`<=`, `>=`)를 헷갈리게 하지 마세요. eslint: [`no-confusing-arrow`](https://eslint.org/docs/rules/no-confusing-arrow) 1061 | 1062 | ```javascript 1063 | // bad 1064 | const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize; 1065 | 1066 | // bad 1067 | const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize; 1068 | 1069 | // good 1070 | const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize); 1071 | 1072 | // good 1073 | const itemHeight = (item) => { 1074 | const { height, largeSize, smallSize } = item; 1075 | return height > 256 ? largeSize : smallSize; 1076 | }; 1077 | ``` 1078 | 1079 | 1080 | - [8.6](#whitespace--implicit-arrow-linebreak) 암시적 반환을 하는 화살표 함수 몸체의 위치를 적절히 설정하세요. eslint: [`implicit-arrow-linebreak`](https://eslint.org/docs/rules/implicit-arrow-linebreak) 1081 | 1082 | ```javascript 1083 | // bad 1084 | (foo) => 1085 | bar; 1086 | 1087 | (foo) => 1088 | (bar); 1089 | 1090 | // good 1091 | (foo) => bar; 1092 | (foo) => (bar); 1093 | (foo) => ( 1094 | bar 1095 | ) 1096 | ``` 1097 | 1098 | **[⬆ back to top](#목차)** 1099 | 1100 | ## 클래스 & 생성자 (Classes & Constructors) 1101 | 1102 | 1103 | - [9.1](#constructors--use-class) `prototype` 을 직접 조작하는것을 피하고 항상 `class` 를 사용하세요. 1104 | 1105 | > 왜? `class` 구문은 간결하고 의미를 알기 쉽기 때문입니다. 1106 | 1107 | ```javascript 1108 | // bad 1109 | function Queue(contents = []) { 1110 | this.queue = [...contents]; 1111 | } 1112 | Queue.prototype.pop = function () { 1113 | const value = this.queue[0]; 1114 | this.queue.splice(0, 1); 1115 | return value; 1116 | }; 1117 | 1118 | // good 1119 | class Queue { 1120 | constructor(contents = []) { 1121 | this.queue = [...contents]; 1122 | } 1123 | pop() { 1124 | const value = this.queue[0]; 1125 | this.queue.splice(0, 1); 1126 | return value; 1127 | } 1128 | } 1129 | ``` 1130 | 1131 | 1132 | - [9.2](#constructors--extends) 상속에는 `extends`를 사용하세요. 1133 | 1134 | > 왜? `instanceof`를 파괴하지 않고 프로토타입 상속을 하기 위해 내장된 방법이기 때문입니다. 1135 | 1136 | ```javascript 1137 | // bad 1138 | const inherits = require('inherits'); 1139 | function PeekableQueue(contents) { 1140 | Queue.apply(this, contents); 1141 | } 1142 | inherits(PeekableQueue, Queue); 1143 | PeekableQueue.prototype.peek = function () { 1144 | return this.queue[0]; 1145 | }; 1146 | 1147 | // good 1148 | class PeekableQueue extends Queue { 1149 | peek() { 1150 | return this.queue[0]; 1151 | } 1152 | } 1153 | ``` 1154 | 1155 | 1156 | - [9.3](#constructors--chaining) 메소드가 `this`를 반환하게 함으로써 메소드 체이닝을 할 수 있습니다. 1157 | 1158 | ```javascript 1159 | // bad 1160 | Jedi.prototype.jump = function () { 1161 | this.jumping = true; 1162 | return true; 1163 | }; 1164 | 1165 | Jedi.prototype.setHeight = function (height) { 1166 | this.height = height; 1167 | }; 1168 | 1169 | const luke = new Jedi(); 1170 | luke.jump(); // => true 1171 | luke.setHeight(20); // => undefined 1172 | 1173 | // good 1174 | class Jedi { 1175 | jump() { 1176 | this.jumping = true; 1177 | return this; 1178 | } 1179 | 1180 | setHeight(height) { 1181 | this.height = height; 1182 | return this; 1183 | } 1184 | } 1185 | 1186 | const luke = new Jedi(); 1187 | 1188 | luke.jump() 1189 | .setHeight(20); 1190 | ``` 1191 | 1192 | 1193 | - [9.4](#constructors--tostring) `toString()`을 사용해도 되지만, 올바르게 동작하는지와 사이드 이펙트가 없는지 확인해 주세요. 1194 | 1195 | ```javascript 1196 | class Jedi { 1197 | constructor(options = {}) { 1198 | this.name = options.name || 'no name'; 1199 | } 1200 | 1201 | getName() { 1202 | return this.name; 1203 | } 1204 | 1205 | toString() { 1206 | return `Jedi - ${this.getName()}`; 1207 | } 1208 | } 1209 | ``` 1210 | 1211 | 1212 | - [9.5](#constructors--no-useless) 클래스는 생성자가 명시되지 않은 경우 기본 생성자를 갖습니다. 빈 생성자 함수나 부모 클래스로 위임하는 함수는 불필요합니다. eslint: [`no-useless-constructor`](https://eslint.org/docs/rules/no-useless-constructor) 1213 | 1214 | ```javascript 1215 | // bad 1216 | class Jedi { 1217 | constructor() {} 1218 | 1219 | getName() { 1220 | return this.name; 1221 | } 1222 | } 1223 | 1224 | // bad 1225 | class Rey extends Jedi { 1226 | constructor(...args) { 1227 | super(...args); 1228 | } 1229 | } 1230 | 1231 | // good 1232 | class Rey extends Jedi { 1233 | constructor(...args) { 1234 | super(...args); 1235 | this.name = 'Rey'; 1236 | } 1237 | } 1238 | ``` 1239 | 1240 | 1241 | - [9.6](#classes--no-duplicate-members) 중복되는 클래스 멤버를 만들지 마세요. eslint: [`no-dupe-class-members`](https://eslint.org/docs/rules/no-dupe-class-members) 1242 | 1243 | > 왜? 중복된 클래스 멤버를 선언하면 암묵적으로 마지막 멤버가 적용됩니다. 중복은 확실히 버그입니다. 1244 | 1245 | ```javascript 1246 | // bad 1247 | class Foo { 1248 | bar() { return 1; } 1249 | bar() { return 2; } 1250 | } 1251 | 1252 | // good 1253 | class Foo { 1254 | bar() { return 1; } 1255 | } 1256 | 1257 | // good 1258 | class Foo { 1259 | bar() { return 2; } 1260 | } 1261 | ``` 1262 | 1263 | 1264 | - [9.7](#classes--methods-use-this) 클래스 메소드는 외부 라이브러리나 프레임워크가 구체적으로 비정적 메소드를 요구하지 않는 이상 `this`를 사용하거나 해당 메소드를 정적 메소드로 만들어야 합니다. 인스턴스 메서드는 수신자의 속성에 따라 다르게 동작함을 나타내야 합니다. eslint: [`class-methods-use-this`](https://eslint.org/docs/rules/class-methods-use-this) 1265 | 1266 | ```javascript 1267 | // bad 1268 | class Foo { 1269 | bar() { 1270 | console.log('bar'); 1271 | } 1272 | } 1273 | 1274 | // good - this를 사용했습니다 1275 | class Foo { 1276 | bar() { 1277 | console.log(this.bar); 1278 | } 1279 | } 1280 | 1281 | // good - constructor가 면제됩니다 1282 | class Foo { 1283 | constructor() { 1284 | // ... 1285 | } 1286 | } 1287 | 1288 | // good - 정적 메소드는 this를 사용하지 않는다고 예상할 수 있습니다 1289 | class Foo { 1290 | static bar() { 1291 | console.log('bar'); 1292 | } 1293 | } 1294 | ``` 1295 | 1296 | **[⬆ back to top](#목차)** 1297 | 1298 | ## 모듈 (Modules) 1299 | 1300 | 1301 | - [10.1](#modules--use-them) 항상 모듈(`import`/`export`)을 비표준 모듈 체계 대신 사용하세요. 언제든 선호하는 모듈 시스템으로 트랜스파일할 수 있습니다. 1302 | 1303 | > 왜? 모듈은 미래입니다. 지금 이 미래를 사용해 봅시다. 1304 | 1305 | ```javascript 1306 | // bad 1307 | const AirbnbStyleGuide = require('./AirbnbStyleGuide'); 1308 | module.exports = AirbnbStyleGuide.es6; 1309 | 1310 | // ok 1311 | import AirbnbStyleGuide from './AirbnbStyleGuide'; 1312 | export default AirbnbStyleGuide.es6; 1313 | 1314 | // best 1315 | import { es6 } from './AirbnbStyleGuide'; 1316 | export default es6; 1317 | ``` 1318 | 1319 | 1320 | - [10.2](#modules--no-wildcard) 와일드카드 import는 사용하지 마세요. 1321 | 1322 | > 왜? single default export임을 확실히 할 수 있습니다. 1323 | 1324 | ```javascript 1325 | // bad 1326 | import * as AirbnbStyleGuide from './AirbnbStyleGuide'; 1327 | 1328 | // good 1329 | import AirbnbStyleGuide from './AirbnbStyleGuide'; 1330 | ``` 1331 | 1332 | 1333 | - [10.3](#modules--no-export-from-import) import문으로부터 직접 export하지 마세요. 1334 | 1335 | > 왜? 한줄이 간결하기는 하지만, 명확한 import와 명확한 export를 통해 일관성을 가질 수 있기 때문입니다. 1336 | 1337 | ```javascript 1338 | // bad 1339 | // filename es6.js 1340 | export { es6 as default } from './AirbnbStyleGuide'; 1341 | 1342 | // good 1343 | // filename es6.js 1344 | import { es6 } from './AirbnbStyleGuide'; 1345 | export default es6; 1346 | ``` 1347 | 1348 | 1349 | - [10.4](#modules--no-duplicate-imports) 같은 경로는 한 곳에서 import하세요. 1350 | eslint: [`no-duplicate-imports`](https://eslint.org/docs/rules/no-duplicate-imports) 1351 | 1352 | > 왜? 같은 경로에서 import하는 여러 줄의 코드는 유지보수를 어렵게 만듭니다. 1353 | 1354 | ```javascript 1355 | // bad 1356 | import foo from 'foo'; 1357 | // … 또 다른 imports … // 1358 | import { named1, named2 } from 'foo'; 1359 | 1360 | // good 1361 | import foo, { named1, named2 } from 'foo'; 1362 | 1363 | // good 1364 | import foo, { 1365 | named1, 1366 | named2, 1367 | } from 'foo'; 1368 | ``` 1369 | 1370 | 1371 | - [10.5](#modules--no-mutable-exports) 가변 바인딩을 export하지 마세요. 1372 | eslint: [`import/no-mutable-exports`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-mutable-exports.md) 1373 | 1374 | > 왜? 변조는 일반적으로 피해야 하지만, 가변 바인딩을 export할 때는 특히 그렇습니다. 이 기술이 어떤 특별한 상황에 필요할 수도 있지만, 일반적으로는 상수 참조만 export되어야 합니다. 1375 | 1376 | ```javascript 1377 | // bad 1378 | let foo = 3; 1379 | export { foo }; 1380 | 1381 | // good 1382 | const foo = 3; 1383 | export { foo }; 1384 | ``` 1385 | 1386 | 1387 | - [10.6](#modules--prefer-default-export) 한가지만 export하는 모듈에서는 이름 붙여진 export보다는 default export를 사용하세요. 1388 | eslint: [`import/prefer-default-export`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/prefer-default-export.md) 1389 | 1390 | > 왜? 하나만 export하는 파일의 가독성과 유지보수성이 더 좋기 때문입니다. 1391 | 1392 | ```javascript 1393 | // bad 1394 | export function foo() {} 1395 | 1396 | // good 1397 | export default function foo() {} 1398 | ``` 1399 | 1400 | 1401 | - [10.7](#modules--imports-first) 모든 `import`구문을 다른 구문들 위에 두세요. 1402 | eslint: [`import/first`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/first.md) 1403 | 1404 | > 왜? `import`구문은 호이스트되기 때문에 이것을 가장 위에 두면 예상치 못한 결과를 막을 수 있습니다. 1405 | 1406 | ```javascript 1407 | // bad 1408 | import foo from 'foo'; 1409 | foo.init(); 1410 | 1411 | import bar from 'bar'; 1412 | 1413 | // good 1414 | import foo from 'foo'; 1415 | import bar from 'bar'; 1416 | 1417 | foo.init(); 1418 | ``` 1419 | 1420 | 1421 | - [10.8](#modules--multiline-imports-over-newlines) 여러 줄에 걸친 import는 여러 줄의 배열이나 객체 리터럴처럼 들여쓰기하세요. eslint: [`object-curly-newline`](https://eslint.org/docs/rules/object-curly-newline) 1422 | 1423 | > 왜? 스타일 가이드에 있는 다른 모든 중괄호 블록들 처럼 중괄호는 같은 들여쓰기 규칙을 따릅니다. 콤마가 그렇듯이 말이죠. 1424 | 1425 | ```javascript 1426 | // bad 1427 | import {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path'; 1428 | 1429 | // good 1430 | import { 1431 | longNameA, 1432 | longNameB, 1433 | longNameC, 1434 | longNameD, 1435 | longNameE, 1436 | } from 'path'; 1437 | ``` 1438 | 1439 | 1440 | - [10.9](#modules--no-webpack-loader-syntax) 모듈 import 구문에서 Webpack loader 구문을 사용하지 마세요. 1441 | eslint: [`import/no-webpack-loader-syntax`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-webpack-loader-syntax.md) 1442 | 1443 | > 왜? import에서 Webpack 구문을 사용하면 이 코드가 모듈 번들러에 연결되기 때문입니다. loader 구문은 `webpack.config.js`에서 사용하세요. 1444 | 1445 | ```javascript 1446 | // bad 1447 | import fooSass from 'css!sass!foo.scss'; 1448 | import barCss from 'style!css!bar.css'; 1449 | 1450 | // good 1451 | import fooSass from 'foo.scss'; 1452 | import barCss from 'bar.css'; 1453 | ``` 1454 | 1455 | 1456 | - [10.10](#modules--import-extensions) 자바스크립트 파일 확장자를 명시하지 마세요. 1457 | eslint: [`import/extensions`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/extensions.md) 1458 | 1459 | > 왜? 확장자를 명시하면 모든 소비자에서 import하는 모듈의 세부적 구현을 부적절하게 하드코딩하고, 리팩토링을 막게 됩니다. 1460 | 1461 | ```javascript 1462 | // bad 1463 | import foo from './foo.js'; 1464 | import bar from './bar.jsx'; 1465 | import baz from './baz/index.jsx'; 1466 | 1467 | // good 1468 | import foo from './foo'; 1469 | import bar from './bar'; 1470 | import baz from './baz'; 1471 | 1472 | **[⬆ back to top](#목차)** 1473 | 1474 | ## 이터레이터와 제너레이터 (Iterators and Generators) 1475 | 1476 | 1477 | - [11.1](#iterators--nope) 이터레이터를 사용하지 마세요. `for-in`이나 `for-of`같은 루프 대신 자바스크립트의 고급함수를 사용하세요. eslint: [`no-iterator`](https://eslint.org/docs/rules/no-iterator.html) [`no-restricted-syntax`](https://eslint.org/docs/rules/no-restricted-syntax) 1478 | 1479 | > 왜? 고급함수는 불변 규칙을 적용합니다. 사이드 이펙트에 대해 추측하는 것보다 값을 반환하는 순수 함수를 다루는 것이 더 간단합니다. 1480 | 1481 | > 배열을 이터레이트할 때 `map()` / `every()` / `filter()` / `find()` / `findIndex()` / `reduce()` / `some()` / ... 를 사용하세요. 배열을 생성할 때는 `Object.keys()` / `Object.values()` / `Object.entries()`를 사용해서 모든 객체를 이터레이트 할 수 있습니다. 1482 | 1483 | ```javascript 1484 | const numbers = [1, 2, 3, 4, 5]; 1485 | 1486 | // bad 1487 | let sum = 0; 1488 | for (let num of numbers) { 1489 | sum += num; 1490 | } 1491 | sum === 15; 1492 | 1493 | // good 1494 | let sum = 0; 1495 | numbers.forEach((num) => { 1496 | sum += num; 1497 | }); 1498 | sum === 15; 1499 | 1500 | // best (use the functional force) 1501 | const sum = numbers.reduce((total, num) => total + num, 0); 1502 | sum === 15; 1503 | 1504 | // bad 1505 | const increasedByOne = []; 1506 | for (let i = 0; i < numbers.length; i++) { 1507 | increasedByOne.push(numbers[i] + 1); 1508 | } 1509 | 1510 | // good 1511 | const increasedByOne = []; 1512 | numbers.forEach((num) => { 1513 | increasedByOne.push(num + 1); 1514 | }); 1515 | 1516 | // best (keeping it functional) 1517 | const increasedByOne = numbers.map(num => num + 1); 1518 | ``` 1519 | 1520 | 1521 | - [11.2](#generators--nope) 지금은 제너레이터를 사용하지 마세요. 1522 | 1523 | > 왜? ES5로 잘 트랜스파일되지 않기 때문입니다. 1524 | 1525 | 1526 | - [11.3](#generators--spacing) 만약 반드시 제너레이터를 사용해야 하거나 [우리의 조언](#generators--nope)을 무시하는 경우, 함수 시그니처의 공백이 적절한지 확인하세요. eslint: [`generator-star-spacing`](https://eslint.org/docs/rules/generator-star-spacing) 1527 | 1528 | > 왜? `function`과 `*`는 같은 개념의 키워드입니다. - `*`은 `function`, `function*`의 제어자가 아니며, 이들은 `function`과 다른 고유한 구조입니다. 1529 | 1530 | ```javascript 1531 | // bad 1532 | function * foo() { 1533 | // ... 1534 | } 1535 | 1536 | // bad 1537 | const bar = function * () { 1538 | // ... 1539 | }; 1540 | 1541 | // bad 1542 | const baz = function *() { 1543 | // ... 1544 | }; 1545 | 1546 | // bad 1547 | const quux = function*() { 1548 | // ... 1549 | }; 1550 | 1551 | // bad 1552 | function*foo() { 1553 | // ... 1554 | } 1555 | 1556 | // bad 1557 | function *foo() { 1558 | // ... 1559 | } 1560 | 1561 | // very bad 1562 | function 1563 | * 1564 | foo() { 1565 | // ... 1566 | } 1567 | 1568 | // very bad 1569 | const wat = function 1570 | * 1571 | () { 1572 | // ... 1573 | }; 1574 | 1575 | // good 1576 | function* foo() { 1577 | // ... 1578 | } 1579 | 1580 | // good 1581 | const foo = function* () { 1582 | // ... 1583 | }; 1584 | ``` 1585 | 1586 | **[⬆ back to top](#목차)** 1587 | 1588 | ## 속성 (Properties) 1589 | 1590 | 1591 | - [12.1](#properties--dot) 속성에 접근할 때는 마침표를 사용하세요. eslint: [`dot-notation`](https://eslint.org/docs/rules/dot-notation.html) 1592 | 1593 | ```javascript 1594 | const luke = { 1595 | jedi: true, 1596 | age: 28, 1597 | }; 1598 | 1599 | // bad 1600 | const isJedi = luke['jedi']; 1601 | 1602 | // good 1603 | const isJedi = luke.jedi; 1604 | ``` 1605 | 1606 | 1607 | - [12.2](#properties--bracket) 변수를 사용해 속성에 접근할 때는 대괄호 `[]`를 사용하세요. 1608 | 1609 | ```javascript 1610 | const luke = { 1611 | jedi: true, 1612 | age: 28, 1613 | }; 1614 | 1615 | function getProp(prop) { 1616 | return luke[prop]; 1617 | } 1618 | 1619 | const isJedi = getProp('jedi'); 1620 | ``` 1621 | 1622 | 1623 | - [12.3](#es2016-properties--exponentiation-operator) 제곱 계산을 할 때는 제곱 연산자 `**`을 사용하세요. eslint: [`no-restricted-properties`](https://eslint.org/docs/rules/no-restricted-properties). 1624 | 1625 | ```javascript 1626 | // bad 1627 | const binary = Math.pow(2, 10); 1628 | 1629 | // good 1630 | const binary = 2 ** 10; 1631 | ``` 1632 | 1633 | **[⬆ back to top](#목차)** 1634 | 1635 | ## 변수 (Variables) 1636 | 1637 | 1638 | - [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) 1639 | 1640 | ```javascript 1641 | // bad 1642 | superPower = new SuperPower(); 1643 | 1644 | // good 1645 | const superPower = new SuperPower(); 1646 | ``` 1647 | 1648 | 1649 | - [13.2](#variables--one-const) 하나의 변수 선언/할당에는 하나의 `const` 또는 `let`을 사용하세요. eslint: [`one-var`](https://eslint.org/docs/rules/one-var.html) 1650 | 1651 | > 왜? 이렇게 하면 쉽게 새로운 변수를 추가할 수 있고, `,`를 `;`로 바꿔버리는 것에 대해 걱정할 필요가 없습니다. 또한 한번에 모든 선언을 건너뛰는 대신 디버거를 사용해 각 선언을 단계별로 살펴볼 수 있습니다. 1652 | 1653 | ```javascript 1654 | // bad 1655 | const items = getItems(), 1656 | goSportsTeam = true, 1657 | dragonball = 'z'; 1658 | 1659 | // bad 1660 | // (위 코드와 비교해 실수를 짚어보세요) 1661 | const items = getItems(), 1662 | goSportsTeam = true; 1663 | dragonball = 'z'; 1664 | 1665 | // good 1666 | const items = getItems(); 1667 | const goSportsTeam = true; 1668 | const dragonball = 'z'; 1669 | ``` 1670 | 1671 | 1672 | - [13.3](#variables--const-let-group) `const`를 그룹화한 다음에 `let`을 그룹화 하세요. 1673 | 1674 | > 왜? 이전에 할당한 변수에 대해 새 변수를 추가하는 경우 유용하기 때문입니다. 1675 | 1676 | ```javascript 1677 | // bad 1678 | let i, len, dragonball, 1679 | items = getItems(), 1680 | goSportsTeam = true; 1681 | 1682 | // bad 1683 | let i; 1684 | const items = getItems(); 1685 | let dragonball; 1686 | const goSportsTeam = true; 1687 | let len; 1688 | 1689 | // good 1690 | const goSportsTeam = true; 1691 | const items = getItems(); 1692 | let dragonball; 1693 | let i; 1694 | let length; 1695 | ``` 1696 | 1697 | 1698 | - [13.4](#variables--define-where-used) 필요한 곳에서 변수를 할당하되, 합당한 곳에 두세요. 1699 | 1700 | > 왜? `let`과 `const`는 블록스코프이기 때문입니다. 함수스코프가 아닙니다. 1701 | 1702 | ```javascript 1703 | // bad - unnecessary function call 1704 | function checkName(hasName) { 1705 | const name = getName(); 1706 | 1707 | if (hasName === 'test') { 1708 | return false; 1709 | } 1710 | 1711 | if (name === 'test') { 1712 | this.setName(''); 1713 | return false; 1714 | } 1715 | 1716 | return name; 1717 | } 1718 | 1719 | // good 1720 | function checkName(hasName) { 1721 | if (hasName === 'test') { 1722 | return false; 1723 | } 1724 | 1725 | const name = getName(); 1726 | 1727 | if (name === 'test') { 1728 | this.setName(''); 1729 | return false; 1730 | } 1731 | 1732 | return name; 1733 | } 1734 | ``` 1735 | 1736 | 1737 | - [13.5](#variables--no-chain-assignment) 변수 할당 체이닝을 하지 마세요. eslint: [`no-multi-assign`](https://eslint.org/docs/rules/no-multi-assign) 1738 | 1739 | > 왜? 변수 할당 체이닝은 암시적인 전역 변수를 만들기 때문입니다. 1740 | 1741 | ```javascript 1742 | // bad 1743 | (function example() { 1744 | // 자바스크립트는 이것을 1745 | // let a = ( b = ( c = 1 ) ); 1746 | // 로 해석합니다. 1747 | // let 키워드는 변수 a에만 적용됩니다. 1748 | // 변수 b와 c는 전역 변수가 됩니다. 1749 | let a = b = c = 1; 1750 | }()); 1751 | 1752 | console.log(a); // throws ReferenceError 1753 | console.log(b); // 1 1754 | console.log(c); // 1 1755 | 1756 | // good 1757 | (function example() { 1758 | let a = 1; 1759 | let b = a; 1760 | let c = a; 1761 | }()); 1762 | 1763 | console.log(a); // throws ReferenceError 1764 | console.log(b); // throws ReferenceError 1765 | console.log(c); // throws ReferenceError 1766 | 1767 | // `const`에도 동일하게 적용됩니다 1768 | ``` 1769 | 1770 | 1771 | - [13.6](#variables--unary-increment-decrement) 단항 증감 연산자(`++`, `--`)를 사용하지 마세요. eslint [`no-plusplus`](https://eslint.org/docs/rules/no-plusplus) 1772 | 1773 | > 왜? eslint 문서에 따르면, 단항 증감 구문은 자동으로 세미콜론을 삽입하며, 어플리케이션에서 값을 증감할 때 오류를 일으킬 수 있습니다. 또한 `num += 1`과 같은 구문을 통해 값을 변경하는 것이 `num++`이나 `num ++`와 같은 구문을 사용하는 것보다 더 의미있는 일이라고 생각합니다. 단항 증감 구문을 사용하지 않으면 프로그램에서 예기치 않은 동작을 일으키는 전위 증감 연산을 막을 수 있습니다. 1774 | 1775 | ```javascript 1776 | // bad 1777 | 1778 | const array = [1, 2, 3]; 1779 | let num = 1; 1780 | num++; 1781 | --num; 1782 | 1783 | let sum = 0; 1784 | let truthyCount = 0; 1785 | for (let i = 0; i < array.length; i++) { 1786 | let value = array[i]; 1787 | sum += value; 1788 | if (value) { 1789 | truthyCount++; 1790 | } 1791 | } 1792 | 1793 | // good 1794 | 1795 | const array = [1, 2, 3]; 1796 | let num = 1; 1797 | num += 1; 1798 | num -= 1; 1799 | 1800 | const sum = array.reduce((a, b) => a + b, 0); 1801 | const truthyCount = array.filter(Boolean).length; 1802 | ``` 1803 | 1804 | 1805 | - [13.7](#variables--linebreak) 값을 할당할 때 `=`의 앞 또는 뒤에서 줄바꿈을 하지 마세요. 만약 할당이 [`max-len`](https://eslint.org/docs/rules/max-len.html)을 넘기는 경우, 값을 괄호로 둘러싸세요. eslint [`operator-linebreak`](https://eslint.org/docs/rules/operator-linebreak.html). 1806 | 1807 | > 왜? `=` 주위에서 줄바꿈을 하는 것은 할당 값을 모호하게 합니다. 1808 | 1809 | ```javascript 1810 | // bad 1811 | const foo = 1812 | superLongLongLongLongLongLongLongLongFunctionName(); 1813 | 1814 | // bad 1815 | const foo 1816 | = 'superLongLongLongLongLongLongLongLongString'; 1817 | 1818 | // good 1819 | const foo = ( 1820 | superLongLongLongLongLongLongLongLongFunctionName() 1821 | ); 1822 | 1823 | // good 1824 | const foo = 'superLongLongLongLongLongLongLongLongString'; 1825 | ``` 1826 | 1827 | 1828 | - [13.8](#variables--no-unused-vars) 사용하지 않는 변수를 남겨두지 마세요. eslint: [`no-unused-vars`](https://eslint.org/docs/rules/no-unused-vars) 1829 | 1830 | > 왜? 선언되었지만 사용되지 않는 변수는 완벽하지 않은 리팩토링으로 인한 에러일 수 있습니다. 그런 변수는 코드의 자리를 차지하며, 읽는 사람이 혼란에 빠지도록 만듭니다. 1831 | 1832 | ```javascript 1833 | // bad 1834 | 1835 | var some_unused_var = 42; 1836 | 1837 | // 쓰기 전용 변수는 사용한 것으로 간주되지 않습니다. 1838 | var y = 10; 1839 | y = 5; 1840 | 1841 | // 자신의 변경을 읽는 것은 사용한 것으로 간주되지 않습니다. 1842 | var z = 0; 1843 | z = z + 1; 1844 | 1845 | // 사용되지 않은 함수 인자. 1846 | function getX(x, y) { 1847 | return x; 1848 | } 1849 | 1850 | // good 1851 | 1852 | function getXPlusY(x, y) { 1853 | return x + y; 1854 | } 1855 | 1856 | var x = 1; 1857 | var y = a + 2; 1858 | 1859 | alert(getXPlusY(x, y)); 1860 | 1861 | // 'type'은 사용되지 않을 경우 무시됩니다. 나머지 속성의 형제이기 때문입니다. 1862 | // 이것은 특정 키를 생략하는 객체를 추출하는 형식입니다. 1863 | var { type, ...coords } = data; 1864 | // 'coords'는 이제 'data' 객체에서 'type' 속성이 빠진 'data' 객체입니다. 1865 | ``` 1866 | 1867 | **[⬆ back to top](#목차)** 1868 | 1869 | ## 호이스팅 (Hoisting) 1870 | 1871 | 1872 | - [14.1](#hoisting--about) `var` 선언은 할당없이 가장 가까운 함수 스코프의 꼭대기에 호이스트됩니다. `const`와 `let` 선언은 [Temporal Dead Zones (TDZ)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_Dead_Zone)라고 불리는 새로운 개념의 혜택을 받습니다. [왜 typeof는 더 이상 안전하지 않은가](https://web.archive.org/web/20200121061528/http://es-discourse.com/t/why-typeof-is-no-longer-safe/15)에 대해서 알고있는 것이 중요합니다. 1873 | 1874 | ```javascript 1875 | // (전역 변수 notDefined가 존재하지 않는다고 판정한 경우) 1876 | // 동작하지 않습니다 1877 | function example() { 1878 | console.log(notDefined); // => throws a ReferenceError 1879 | } 1880 | 1881 | // 그 변수를 참조하는 코드의 뒤에서 그 변수를 선언한 경우 1882 | // 변수가 호이스트된 상태에서 동작합니다. 1883 | // 주의：`true` 라는 값 자체는 호이스트되지 않습니다. 1884 | function example() { 1885 | console.log(declaredButNotAssigned); // => undefined 1886 | var declaredButNotAssigned = true; 1887 | } 1888 | 1889 | // 인터프리터는 변수선언을 스코프의 선두에 호이스트합니다 1890 | // 위의 예는 다음과 같이 다시 쓸수 있습니다: 1891 | function example() { 1892 | let declaredButNotAssigned; 1893 | console.log(declaredButNotAssigned); // => undefined 1894 | declaredButNotAssigned = true; 1895 | } 1896 | 1897 | // const와 let을 이용한 경우 1898 | function example() { 1899 | console.log(declaredButNotAssigned); // => throws a ReferenceError 1900 | console.log(typeof declaredButNotAssigned); // => throws a ReferenceError 1901 | const declaredButNotAssigned = true; 1902 | } 1903 | ``` 1904 | 1905 | 1906 | - [14.2](#hoisting--anon-expressions) 익명함수의 경우 함수가 할당되기 전의 변수가 호이스트됩니다. 1907 | 1908 | ```javascript 1909 | function example() { 1910 | console.log(anonymous); // => undefined 1911 | 1912 | anonymous(); // => TypeError anonymous is not a function 1913 | 1914 | var anonymous = function () { 1915 | console.log('anonymous function expression'); 1916 | }; 1917 | } 1918 | ``` 1919 | 1920 | 1921 | - [14.3](#hoisting--named-expressions) 명명함수의 경우에도 똑같이 변수가 호이스트됩니다. 함수의 이름이나 본체는 호이스트되지 않습니다. 1922 | 1923 | ```javascript 1924 | function example() { 1925 | console.log(named); // => undefined 1926 | 1927 | named(); // => TypeError named is not a function 1928 | 1929 | superPower(); // => ReferenceError superPower is not defined 1930 | 1931 | var named = function superPower() { 1932 | console.log('Flying'); 1933 | }; 1934 | } 1935 | 1936 | // 함수 이름이 변수 이름과 동일할 때도 마찬가지다. 1937 | function example() { 1938 | console.log(named); // => undefined 1939 | 1940 | named(); // => TypeError named is not a function 1941 | 1942 | var named = function named() { 1943 | console.log('named'); 1944 | }; 1945 | } 1946 | ``` 1947 | 1948 | 1949 | - [14.4](#hoisting--declarations) 함수선언은 함수명과 함수본체가 호이스트됩니다. 1950 | 1951 | ```javascript 1952 | function example() { 1953 | superPower(); // => Flying 1954 | 1955 | function superPower() { 1956 | console.log('Flying'); 1957 | } 1958 | } 1959 | ``` 1960 | 1961 | - 더 자세한 정보는 이곳을 참고해주세요 [JavaScript Scoping & Hoisting](http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting/) by [Ben Cherry](http://www.adequatelygood.com/). 1962 | 1963 | **[⬆ back to top](#목차)** 1964 | 1965 | ## 비교 연산자 (Comparison Operators & Equality) 1966 | 1967 | 1968 | - [15.1](#comparison--eqeqeq) `==`와 `!=` 대신 `===`와 `!==`를 사용하세요. eslint: [`eqeqeq`](https://eslint.org/docs/rules/eqeqeq.html) 1969 | 1970 | 1971 | - [15.2](#comparison--if) `if`문과 같은 조건식은 `ToBoolean` 메소드에 의한 강제형변환으로 평가되어 항상 다음과 같은 간단한 규칙을 따릅니다: 1972 | 1973 | - **Objects**는 **true**로 평가됩니다. 1974 | - **Undefined**는 **false**로 평가됩니다. 1975 | - **Null**는 **false**로 평가됩니다. 1976 | - **Booleans**는 **boolean형의 값**으로 평가됩니다. 1977 | - **Numbers**는 **true**로 평가됩니다. 하지만 **+0, -0, NaN**의 경우 **false**로 평가됩니다. 1978 | - **Strings**는 **true**로 평가됩니다. 하지만 빈 문자열 `''`은, **false**로 평가됩니다. 1979 | 1980 | ```javascript 1981 | if ([0] && []) { 1982 | // true 1983 | // 배열(빈 배열 포함)은 객체이며, 객체는 참으로 평가됩니다. 1984 | } 1985 | ``` 1986 | 1987 | 1988 | - [15.3](#comparison--shortcuts) 불리언 비교에는 단축형을 사용하세요. 단, 숫자나 문자열은 명시적으로 비교하세요. 1989 | 1990 | ```javascript 1991 | // bad 1992 | if (isValid === true) { 1993 | // ... 1994 | } 1995 | 1996 | // good 1997 | if (isValid) { 1998 | // ... 1999 | } 2000 | 2001 | // bad 2002 | if (name) { 2003 | // ... 2004 | } 2005 | 2006 | // good 2007 | if (name !== '') { 2008 | // ... 2009 | } 2010 | 2011 | // bad 2012 | if (collection.length) { 2013 | // ... 2014 | } 2015 | 2016 | // good 2017 | if (collection.length > 0) { 2018 | // ... 2019 | } 2020 | ``` 2021 | 2022 | 2023 | - [15.4](#comparison--moreinfo) 더 자세한 정보는 이곳을 참고해주세요. [Truth Equality and JavaScript](https://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108) by Angus Croll. 2024 | 2025 | 2026 | - [15.5](#comparison--switch-blocks) 렉시컬 선언 (e.g. `let`, `const`, `function`, and `class`)을 포함하는 `case`와 `default` 구문 안에 블록을 만들 때는 괄호를 사용하세요. eslint: [`no-case-declarations`](https://eslint.org/docs/rules/no-case-declarations.html) 2027 | 2028 | > 왜? 렉시컬 선언은 `switch` 블록 전체에서 접근할 수 있지만, 할당된 경우에만 초기화됩니다. `case`에 다다랐을 때 말이죠. 이것은 여러 `case` 구문이 같은 것을 정의하려 할 때 문제를 일으킵니다. 2029 | 2030 | ```javascript 2031 | // bad 2032 | switch (foo) { 2033 | case 1: 2034 | let x = 1; 2035 | break; 2036 | case 2: 2037 | const y = 2; 2038 | break; 2039 | case 3: 2040 | function f() { 2041 | // ... 2042 | } 2043 | break; 2044 | default: 2045 | class C {} 2046 | } 2047 | 2048 | // good 2049 | switch (foo) { 2050 | case 1: { 2051 | let x = 1; 2052 | break; 2053 | } 2054 | case 2: { 2055 | const y = 2; 2056 | break; 2057 | } 2058 | case 3: { 2059 | function f() { 2060 | // ... 2061 | } 2062 | break; 2063 | } 2064 | case 4: 2065 | bar(); 2066 | break; 2067 | default: { 2068 | class C {} 2069 | } 2070 | } 2071 | ``` 2072 | 2073 | 2074 | - [15.6](#comparison--nested-ternaries) 삼항 연산자를 중첩해서는 안되며, 일반적으로 한줄에 표현해야 합니다. eslint: [`no-nested-ternary`](https://eslint.org/docs/rules/no-nested-ternary.html) 2075 | 2076 | ```javascript 2077 | // bad 2078 | const foo = maybe1 > maybe2 2079 | ? "bar" 2080 | : value1 > value2 ? "baz" : null; 2081 | 2082 | // split into 2 separated ternary expressions 2083 | const maybeNull = value1 > value2 ? 'baz' : null; 2084 | 2085 | // better 2086 | const foo = maybe1 > maybe2 2087 | ? 'bar' 2088 | : maybeNull; 2089 | 2090 | // best 2091 | const foo = maybe1 > maybe2 ? 'bar' : maybeNull; 2092 | ``` 2093 | 2094 | 2095 | - [15.7](#comparison--unneeded-ternary) 불필요한 삼항 연산자를 사용하지 마세요. eslint: [`no-unneeded-ternary`](https://eslint.org/docs/rules/no-unneeded-ternary.html) 2096 | 2097 | ```javascript 2098 | // bad 2099 | const foo = a ? a : b; 2100 | const bar = c ? true : false; 2101 | const baz = c ? false : true; 2102 | 2103 | // good 2104 | const foo = a || b; 2105 | const bar = !!c; 2106 | const baz = !c; 2107 | ``` 2108 | 2109 | 2110 | - [15.8](#comparison--no-mixed-operators) 연산자를 섞어 사용할 때 해당 연산자들을 괄호로 둘러싸세요. 유일한 예외는 산술 연산자 (`+`, `-`, `**`)입니다. 이들의 우선순위는 상식적으로 이해할 수 있습니다. `/`와 `*`은 섞일 경우 순서가 모호할 수 있으므로 괄호로 감싸는 것을 추천합니다. eslint: [`no-mixed-operators`](https://eslint.org/docs/rules/no-mixed-operators.html) 2111 | 2112 | > 왜? 이렇게 하면 코드가 더 읽기 쉬워지며, 개발자의 의도가 명확해집니다. 2113 | 2114 | ```javascript 2115 | // bad 2116 | const foo = a && b < 0 || c > 0 || d + 1 === 0; 2117 | 2118 | // bad 2119 | const bar = a ** b - 5 % d; 2120 | 2121 | // bad 2122 | // (a || b) && c 으로 혼동할 수 있습니다. 2123 | if (a || b && c) { 2124 | return d; 2125 | } 2126 | 2127 | // good 2128 | const foo = (a && b < 0) || c > 0 || (d + 1 === 0); 2129 | 2130 | // good 2131 | const bar = (a ** b) - (5 % d); 2132 | 2133 | // good 2134 | if (a || (b && c)) { 2135 | return d; 2136 | } 2137 | 2138 | // good 2139 | const bar = a + b / c * d; 2140 | ``` 2141 | 2142 | **[⬆ back to top](#목차)** 2143 | 2144 | ## 블록 (Blocks) 2145 | 2146 | 2147 | - [16.1](#blocks--braces) 여러 줄의 블록에는 중괄호를 사용하세요. eslint: [`nonblock-statement-body-position`](https://eslint.org/docs/rules/nonblock-statement-body-position) 2148 | 2149 | ```javascript 2150 | // bad 2151 | if (test) 2152 | return false; 2153 | 2154 | // good 2155 | if (test) return false; 2156 | 2157 | // good 2158 | if (test) { 2159 | return false; 2160 | } 2161 | 2162 | // bad 2163 | function foo() { return false; } 2164 | 2165 | // good 2166 | function bar() { 2167 | return false; 2168 | } 2169 | ``` 2170 | 2171 | 2172 | - [16.2](#blocks--cuddled-elses) 여러 줄의 `if`와 `else`문을 사용할 때는 `else`를 `if` 블록의 닫는 중괄호와 같은 줄에 두세요. eslint: [`brace-style`](https://eslint.org/docs/rules/brace-style.html) 2173 | 2174 | ```javascript 2175 | // bad 2176 | if (test) { 2177 | thing1(); 2178 | thing2(); 2179 | } 2180 | else { 2181 | thing3(); 2182 | } 2183 | 2184 | // good 2185 | if (test) { 2186 | thing1(); 2187 | thing2(); 2188 | } else { 2189 | thing3(); 2190 | } 2191 | ``` 2192 | 2193 | 2194 | - [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) 2195 | 2196 | ```javascript 2197 | // bad 2198 | function foo() { 2199 | if (x) { 2200 | return x; 2201 | } else { 2202 | return y; 2203 | } 2204 | } 2205 | 2206 | // bad 2207 | function cats() { 2208 | if (x) { 2209 | return x; 2210 | } else if (y) { 2211 | return y; 2212 | } 2213 | } 2214 | 2215 | // bad 2216 | function dogs() { 2217 | if (x) { 2218 | return x; 2219 | } else { 2220 | if (y) { 2221 | return y; 2222 | } 2223 | } 2224 | } 2225 | 2226 | // good 2227 | function foo() { 2228 | if (x) { 2229 | return x; 2230 | } 2231 | 2232 | return y; 2233 | } 2234 | 2235 | // good 2236 | function cats() { 2237 | if (x) { 2238 | return x; 2239 | } 2240 | 2241 | if (y) { 2242 | return y; 2243 | } 2244 | } 2245 | 2246 | // good 2247 | function dogs(x) { 2248 | if (x) { 2249 | if (z) { 2250 | return y; 2251 | } 2252 | } else { 2253 | return z; 2254 | } 2255 | } 2256 | ``` 2257 | 2258 | **[⬆ back to top](#목차)** 2259 | 2260 | ## 제어문 (Control Statements) 2261 | 2262 | 2263 | - [17.1](#control-statements) 제어문 (`if`, `while` 등)이 너무 길거나 최대 길이를 넘긴 경우, 각 조건을 새로운 줄에 두세요. 논리 연산자는 줄의 시작부분에 있어야 합니다. 2264 | 2265 | > 왜? 줄의 맨 처음에 연산자를 두면 연산자의 정렬을 유지하고, 메소드 체이닝과 비슷한 패턴을 따를 수 있습니다. 또, 이렇게 하면 복잡한 로직을 쉽게 볼 수 있도록 만들어 가독성을 높입니다. 2266 | 2267 | ```javascript 2268 | // bad 2269 | if ((foo === 123 || bar === 'abc') && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening()) { 2270 | thing1(); 2271 | } 2272 | 2273 | // bad 2274 | if (foo === 123 && 2275 | bar === 'abc') { 2276 | thing1(); 2277 | } 2278 | 2279 | // bad 2280 | if (foo === 123 2281 | && bar === 'abc') { 2282 | thing1(); 2283 | } 2284 | 2285 | // bad 2286 | if ( 2287 | foo === 123 && 2288 | bar === 'abc' 2289 | ) { 2290 | thing1(); 2291 | } 2292 | 2293 | // good 2294 | if ( 2295 | foo === 123 2296 | && bar === 'abc' 2297 | ) { 2298 | thing1(); 2299 | } 2300 | 2301 | // good 2302 | if ( 2303 | (foo === 123 || bar === 'abc') 2304 | && doesItLookGoodWhenItBecomesThatLong() 2305 | && isThisReallyHappening() 2306 | ) { 2307 | thing1(); 2308 | } 2309 | 2310 | // good 2311 | if (foo === 123 && bar === 'abc') { 2312 | thing1(); 2313 | } 2314 | ``` 2315 | 2316 | 2317 | - [17.2](#control-statements--value-selection). 선택 연산자를 제어 구문 대신 쓰지 마세요. 2318 | 2319 | ```javascript 2320 | // bad 2321 | !isRunning && startRunning(); 2322 | 2323 | // good 2324 | if (!isRunning) { 2325 | startRunning(); 2326 | } 2327 | ``` 2328 | 2329 | **[⬆ back to top](#목차)** 2330 | 2331 | ## 주석 (Comments) 2332 | 2333 | 2334 | - [18.1](#comments--multiline) 여러 줄에 걸친 주석을 쓸 때는 `/** ... */`을 사용하세요. 2335 | 2336 | ```javascript 2337 | // bad 2338 | // make()는 전달된 태그명을 기반으로 2339 | // 새로운 요소를 반환한다. 2340 | // 2341 | // @param {String} tag 2342 | // @return {Element} element 2343 | function make(tag) { 2344 | 2345 | // ... 2346 | 2347 | return element; 2348 | } 2349 | 2350 | // good 2351 | /** 2352 | * make()는 전달된 태그명을 기반으로 2353 | * 새로운 요소를 반환한다. 2354 | */ 2355 | function make(tag) { 2356 | 2357 | // ... 2358 | 2359 | return element; 2360 | } 2361 | ``` 2362 | 2363 | 2364 | - [18.2](#comments--singleline) 한줄 주석을 쓸 때는 `//`을 사용하세요. 주석 전에는 빈 행을 넣어주세요. 2365 | 2366 | ```javascript 2367 | // bad 2368 | const active = true; // is current tab 2369 | 2370 | // good 2371 | // is current tab 2372 | const active = true; 2373 | 2374 | // bad 2375 | function getType() { 2376 | console.log('fetching type...'); 2377 | // set the default type to 'no type' 2378 | const type = this.type || 'no type'; 2379 | 2380 | return type; 2381 | } 2382 | 2383 | // good 2384 | function getType() { 2385 | console.log('fetching type...'); 2386 | 2387 | // set the default type to 'no type' 2388 | const type = this.type || 'no type'; 2389 | 2390 | return type; 2391 | } 2392 | 2393 | // also good 2394 | function getType() { 2395 | // set the default type to 'no type' 2396 | const type = this.type || 'no type'; 2397 | 2398 | return type; 2399 | } 2400 | ``` 2401 | 2402 | 2403 | - [18.3](#comments--spaces) 모든 주석은 공백으로 시작해야 합니다. eslint: [`spaced-comment`](https://eslint.org/docs/rules/spaced-comment) 2404 | 2405 | ```javascript 2406 | // bad 2407 | //is current tab 2408 | const active = true; 2409 | 2410 | // good 2411 | // is current tab 2412 | const active = true; 2413 | 2414 | // bad 2415 | /** 2416 | *make()는 전달된 태그명을 기반으로 2417 | *새로운 요소를 반환한다. 2418 | */ 2419 | function make(tag) { 2420 | 2421 | // ... 2422 | 2423 | return element; 2424 | } 2425 | 2426 | // good 2427 | /** 2428 | * make()는 전달된 태그명을 기반으로 2429 | * 새로운 요소를 반환한다. 2430 | */ 2431 | function make(tag) { 2432 | 2433 | // ... 2434 | 2435 | return element; 2436 | } 2437 | ``` 2438 | 2439 | 2440 | - [18.4](#comments--actionitems) 문제를 지적하고 재고를 촉구하는 경우나 문제의 해결책을 제안하는 경우 등에는 주석 앞에 `FIXME` 나 `TODO` 를 붙임으로써 다른 개발자의 빠른 이해를 도울수 있습니다. 이런 것들은 어떤 행동을 따른다는 의미로 통상의 주석와는 다릅니다. 행동이라는 것은 `FIXME -- 해결이 필요` 또는 `TODO -- 구현이 필요` 를 뜻합니다. 2441 | 2442 | 2443 | - [18.5](#comments--fixme) 문제에 대한 주석으로 `// FIXME:`를 사용하세요. 2444 | 2445 | ```javascript 2446 | class Calculator extends Abacus { 2447 | constructor() { 2448 | super(); 2449 | 2450 | // FIXME: 전역 변수를 사용해서는 안 됨 2451 | total = 0; 2452 | } 2453 | } 2454 | ``` 2455 | 2456 | 2457 | - [18.6](#comments--todo) 문제의 해결책에 대한 주석으로 `// TODO:`를 사용하세요. 2458 | 2459 | ```javascript 2460 | class Calculator extends Abacus { 2461 | constructor() { 2462 | super(); 2463 | 2464 | // TODO: total은 옵션 파라메터로 설정해야함 2465 | this.total = 0; 2466 | } 2467 | } 2468 | ``` 2469 | 2470 | **[⬆ back to top](#목차)** 2471 | 2472 | ## 공백 (Whitespace) 2473 | 2474 | 2475 | - [19.1](#whitespace--spaces) 탭은 공백문자 2개로 설정하세요. eslint: [`indent`](https://eslint.org/docs/rules/indent.html) 2476 | 2477 | ```javascript 2478 | // bad 2479 | function foo() { 2480 | ∙∙∙∙let name; 2481 | } 2482 | 2483 | // bad 2484 | function bar() { 2485 | ∙let name; 2486 | } 2487 | 2488 | // good 2489 | function baz() { 2490 | ∙∙let name; 2491 | } 2492 | ``` 2493 | 2494 | 2495 | - [19.2](#whitespace--before-blocks) 주요 중괄호 앞에는 공백을 1개 넣으세요. eslint: [`space-before-blocks`](https://eslint.org/docs/rules/space-before-blocks.html) 2496 | 2497 | ```javascript 2498 | // bad 2499 | function test(){ 2500 | console.log('test'); 2501 | } 2502 | 2503 | // good 2504 | function test() { 2505 | console.log('test'); 2506 | } 2507 | 2508 | // bad 2509 | dog.set('attr',{ 2510 | age: '1 year', 2511 | breed: 'Bernese Mountain Dog', 2512 | }); 2513 | 2514 | // good 2515 | dog.set('attr', { 2516 | age: '1 year', 2517 | breed: 'Bernese Mountain Dog', 2518 | }); 2519 | ``` 2520 | 2521 | 2522 | - [19.3](#whitespace--around-keywords) 제어문 (`if`, `while` 등)의 소괄호 앞에는 공백을 1개 넣으세요. 함수선언이나 함수호출시 인자 리스트 앞에는 공백을 넣지 마세요. eslint: [`keyword-spacing`](https://eslint.org/docs/rules/keyword-spacing.html) 2523 | 2524 | ```javascript 2525 | // bad 2526 | if(isJedi) { 2527 | fight (); 2528 | } 2529 | 2530 | // good 2531 | if (isJedi) { 2532 | fight(); 2533 | } 2534 | 2535 | // bad 2536 | function fight () { 2537 | console.log ('Swooosh!'); 2538 | } 2539 | 2540 | // good 2541 | function fight() { 2542 | console.log('Swooosh!'); 2543 | } 2544 | ``` 2545 | 2546 | 2547 | - [19.4](#whitespace--infix-ops) 연산자 사이에 공백을 넣으세요. eslint: [`space-infix-ops`](https://eslint.org/docs/rules/space-infix-ops.html) 2548 | 2549 | ```javascript 2550 | // bad 2551 | const x=y+5; 2552 | 2553 | // good 2554 | const x = y + 5; 2555 | ``` 2556 | 2557 | 2558 | - [19.5](#whitespace--newline-at-end) 파일 끝에는 개행문자를 1개 넣으세요. eslint: [`eol-last`](https://github.com/eslint/eslint/blob/master/docs/rules/eol-last.md) 2559 | 2560 | ```javascript 2561 | // bad 2562 | import { es6 } from './AirbnbStyleGuide'; 2563 | // ... 2564 | export default es6; 2565 | ``` 2566 | 2567 | ```javascript 2568 | // bad 2569 | import { es6 } from './AirbnbStyleGuide'; 2570 | // ... 2571 | export default es6;↵ 2572 | ↵ 2573 | ``` 2574 | 2575 | ```javascript 2576 | // good 2577 | import { es6 } from './AirbnbStyleGuide'; 2578 | // ... 2579 | export default es6;↵ 2580 | ``` 2581 | 2582 | 2583 | - [19.6](#whitespace--chains) 길게 메소드를 체이닝하는 경우 (2개 메소드 이상) 들여쓰기를 하세요. 또한 해당 줄이 새로운 구문이 아니라 메소드 호출임을 강조하는 마침표를 맨 앞에 두세요. 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) 2584 | 2585 | ```javascript 2586 | // bad 2587 | $('#items').find('.selected').highlight().end().find('.open').updateCount(); 2588 | 2589 | // bad 2590 | $('#items'). 2591 | find('.selected'). 2592 | highlight(). 2593 | end(). 2594 | find('.open'). 2595 | updateCount(); 2596 | 2597 | // good 2598 | $('#items') 2599 | .find('.selected') 2600 | .highlight() 2601 | .end() 2602 | .find('.open') 2603 | .updateCount(); 2604 | 2605 | // bad 2606 | const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true) 2607 | .attr('width', (radius + margin) * 2).append('svg:g') 2608 | .attr('transform', `translate(${radius + margin},${radius + margin})`) 2609 | .call(tron.led); 2610 | 2611 | // good 2612 | const leds = stage.selectAll('.led') 2613 | .data(data) 2614 | .enter().append('svg:svg') 2615 | .classed('led', true) 2616 | .attr('width', (radius + margin) * 2) 2617 | .append('svg:g') 2618 | .attr('transform', `translate(${radius + margin},${radius + margin})`) 2619 | .call(tron.led); 2620 | 2621 | // good 2622 | const leds = stage.selectAll('.led').data(data); 2623 | ``` 2624 | 2625 | 2626 | - [19.7](#whitespace--after-blocks) 구문의 앞과 블록의 뒤에는 빈 행을 두세요. 2627 | 2628 | ```javascript 2629 | // bad 2630 | if (foo) { 2631 | return bar; 2632 | } 2633 | return baz; 2634 | 2635 | // good 2636 | if (foo) { 2637 | return bar; 2638 | } 2639 | 2640 | return baz; 2641 | 2642 | // bad 2643 | const obj = { 2644 | foo() { 2645 | }, 2646 | bar() { 2647 | }, 2648 | }; 2649 | return obj; 2650 | 2651 | // good 2652 | const obj = { 2653 | foo() { 2654 | }, 2655 | 2656 | bar() { 2657 | }, 2658 | }; 2659 | 2660 | return obj; 2661 | 2662 | // bad 2663 | const arr = [ 2664 | function foo() { 2665 | }, 2666 | function bar() { 2667 | }, 2668 | ]; 2669 | return arr; 2670 | 2671 | // good 2672 | const arr = [ 2673 | function foo() { 2674 | }, 2675 | 2676 | function bar() { 2677 | }, 2678 | ]; 2679 | 2680 | return arr; 2681 | ``` 2682 | 2683 | 2684 | - [19.8](#whitespace--padded-blocks) 블록에 빈 행을 끼워 넣지 마세요. eslint: [`padded-blocks`](https://eslint.org/docs/rules/padded-blocks.html) 2685 | 2686 | ```javascript 2687 | // bad 2688 | function bar() { 2689 | 2690 | console.log(foo); 2691 | 2692 | } 2693 | 2694 | // bad 2695 | if (baz) { 2696 | 2697 | console.log(qux); 2698 | } else { 2699 | console.log(foo); 2700 | 2701 | } 2702 | 2703 | // bad 2704 | class Foo { 2705 | 2706 | constructor(bar) { 2707 | this.bar = bar; 2708 | } 2709 | } 2710 | 2711 | // good 2712 | function bar() { 2713 | console.log(foo); 2714 | } 2715 | 2716 | // good 2717 | if (baz) { 2718 | console.log(qux); 2719 | } else { 2720 | console.log(foo); 2721 | } 2722 | ``` 2723 | 2724 | 2725 | - [19.9](#whitespace--no-multiple-blanks) 여러 빈 행을 두지 마세요. eslint: [`no-multiple-empty-lines`](https://eslint.org/docs/rules/no-multiple-empty-lines) 2726 | 2727 | 2728 | ```javascript 2729 | // bad 2730 | class Person { 2731 | constructor(fullName, email, birthday) { 2732 | this.fullName = fullName; 2733 | 2734 | 2735 | this.email = email; 2736 | 2737 | 2738 | this.setAge(birthday); 2739 | } 2740 | 2741 | 2742 | setAge(birthday) { 2743 | const today = new Date(); 2744 | 2745 | 2746 | const age = this.getAge(today, birthday); 2747 | 2748 | 2749 | this.age = age; 2750 | } 2751 | 2752 | 2753 | getAge(today, birthday) { 2754 | // .. 2755 | } 2756 | } 2757 | 2758 | // good 2759 | class Person { 2760 | constructor(fullName, email, birthday) { 2761 | this.fullName = fullName; 2762 | this.email = email; 2763 | this.setAge(birthday); 2764 | } 2765 | 2766 | setAge(birthday) { 2767 | const today = new Date(); 2768 | const age = getAge(today, birthday); 2769 | this.age = age; 2770 | } 2771 | 2772 | getAge(today, birthday) { 2773 | // .. 2774 | } 2775 | } 2776 | ``` 2777 | 2778 | 2779 | - [19.10](#whitespace--in-parens) 소괄호 안쪽에 공백을 두지 마세요. eslint: [`space-in-parens`](https://eslint.org/docs/rules/space-in-parens.html) 2780 | 2781 | ```javascript 2782 | // bad 2783 | function bar( foo ) { 2784 | return foo; 2785 | } 2786 | 2787 | // good 2788 | function bar(foo) { 2789 | return foo; 2790 | } 2791 | 2792 | // bad 2793 | if ( foo ) { 2794 | console.log(foo); 2795 | } 2796 | 2797 | // good 2798 | if (foo) { 2799 | console.log(foo); 2800 | } 2801 | ``` 2802 | 2803 | 2804 | - [19.11](#whitespace--in-brackets) 대괄호 안쪽에 공백을 두지 마세요. eslint: [`array-bracket-spacing`](https://eslint.org/docs/rules/array-bracket-spacing.html) 2805 | 2806 | ```javascript 2807 | // bad 2808 | const foo = [ 1, 2, 3 ]; 2809 | console.log(foo[ 0 ]); 2810 | 2811 | // good 2812 | const foo = [1, 2, 3]; 2813 | console.log(foo[0]); 2814 | ``` 2815 | 2816 | 2817 | - [19.12](#whitespace--in-braces) 중괄호 안쪽에 공백을 두세요. eslint: [`object-curly-spacing`](https://eslint.org/docs/rules/object-curly-spacing.html) 2818 | 2819 | ```javascript 2820 | // bad 2821 | const foo = {clark: 'kent'}; 2822 | 2823 | // good 2824 | const foo = { clark: 'kent' }; 2825 | ``` 2826 | 2827 | 2828 | - [19.13](#whitespace--max-len) 한줄의 코드가 100자를 넘기는 것을 피하세요. (공백 포함) 주의: [앞의 규칙](#strings--line-length)에 따르면, 긴 문자열은 이 규칙에서 제외되며, 분리되어서는 안 됩니다. eslint: [`max-len`](https://eslint.org/docs/rules/max-len.html) 2829 | 2830 | > 왜? 가독성과 유지보수성을 보장해주기 때문입니다. 2831 | 2832 | ```javascript 2833 | // bad 2834 | const foo = jsonData && jsonData.foo && jsonData.foo.bar && jsonData.foo.bar.baz && jsonData.foo.bar.baz.quux && jsonData.foo.bar.baz.quux.xyzzy; 2835 | 2836 | // bad 2837 | $.ajax({ method: 'POST', url: 'https://airbnb.com/', data: { name: 'John' } }).done(() => console.log('Congratulations!')).fail(() => console.log('You have failed this city.')); 2838 | 2839 | // good 2840 | const foo = jsonData 2841 | && jsonData.foo 2842 | && jsonData.foo.bar 2843 | && jsonData.foo.bar.baz 2844 | && jsonData.foo.bar.baz.quux 2845 | && jsonData.foo.bar.baz.quux.xyzzy; 2846 | 2847 | // good 2848 | $.ajax({ 2849 | method: 'POST', 2850 | url: 'https://airbnb.com/', 2851 | data: { name: 'John' }, 2852 | }) 2853 | .done(() => console.log('Congratulations!')) 2854 | .fail(() => console.log('You have failed this city.')); 2855 | ``` 2856 | 2857 | 2858 | - [19.14](#whitespace--block-spacing) 여는 블록 토큰과 같은 행의 다음 토큰 내의 공백을 일관성있게 하세요. 이 규칙은 닫는 블록 토큰과 같은 행의 이전 토큰에도 적용됩니다. eslint: [`block-spacing`](https://eslint.org/docs/rules/block-spacing) 2859 | 2860 | ```javascript 2861 | // bad 2862 | function foo() {return true;} 2863 | if (foo) { bar = 0;} 2864 | 2865 | // good 2866 | function foo() { return true; } 2867 | if (foo) { bar = 0; } 2868 | ``` 2869 | 2870 | 2871 | - [19.15](#whitespace--comma-spacing) 쉼표 이전에는 공백을 넣지 말고, 쉼표 이후에는 공백을 넣으세요. eslint: [`comma-spacing`](https://eslint.org/docs/rules/comma-spacing) 2872 | 2873 | ```javascript 2874 | // bad 2875 | var foo = 1,bar = 2; 2876 | var arr = [1 , 2]; 2877 | 2878 | // good 2879 | var foo = 1, bar = 2; 2880 | var arr = [1, 2]; 2881 | ``` 2882 | 2883 | 2884 | - [19.16](#whitespace--computed-property-spacing) 계산된 속성 내에는 공백을 넣으세요. eslint: [`computed-property-spacing`](https://eslint.org/docs/rules/computed-property-spacing) 2885 | 2886 | ```javascript 2887 | // bad 2888 | obj[foo ] 2889 | obj[ 'foo'] 2890 | var x = {[ b ]: a} 2891 | obj[foo[ bar ]] 2892 | 2893 | // good 2894 | obj[foo] 2895 | obj['foo'] 2896 | var x = { [b]: a } 2897 | obj[foo[bar]] 2898 | ``` 2899 | 2900 | 2901 | - [19.17](#whitespace--func-call-spacing) 함수를 호출할 때는 공백을 넣지 마세요. eslint: [`func-call-spacing`](https://eslint.org/docs/rules/func-call-spacing) 2902 | 2903 | ```javascript 2904 | // bad 2905 | func (); 2906 | 2907 | func 2908 | (); 2909 | 2910 | // good 2911 | func(); 2912 | ``` 2913 | 2914 | 2915 | - [19.18](#whitespace--key-spacing) 객체 리터럴 속성의 키와 값 사이에는 공백을 넣으세요. eslint: [`key-spacing`](https://eslint.org/docs/rules/key-spacing) 2916 | 2917 | ```javascript 2918 | // bad 2919 | var obj = { foo : 42 }; 2920 | var obj2 = { foo:42 }; 2921 | 2922 | // good 2923 | var obj = { foo: 42 }; 2924 | ``` 2925 | 2926 | 2927 | - [19.19](#whitespace--no-trailing-spaces) 행의 마지막에 공백을 남겨두지 마세요. eslint: [`no-trailing-spaces`](https://eslint.org/docs/rules/no-trailing-spaces) 2928 | 2929 | 2930 | - [19.20](#whitespace--no-multiple-empty-lines) 여러 빈 행을 쓰지 마세요. 단, 파일의 마지막 행에는 빈 행을 두세요. 파일의 시작에는 빈 행을 두지 마세요. eslint: [`no-multiple-empty-lines`](https://eslint.org/docs/rules/no-multiple-empty-lines) 2931 | 2932 | 2933 | ```javascript 2934 | // bad - 여러 개의 빈 줄 2935 | var x = 1; 2936 | 2937 | 2938 | var y = 2; 2939 | 2940 | // bad - 파일 끝에 2개 이상의 빈 줄 2941 | var x = 1; 2942 | var y = 2; 2943 | 2944 | 2945 | // bad - 파일 시작에 1개 이상의 빈 줄 2946 | 2947 | var x = 1; 2948 | var y = 2; 2949 | 2950 | // good 2951 | var x = 1; 2952 | var y = 2; 2953 | 2954 | ``` 2955 | 2956 | 2957 | **[⬆ back to top](#목차)** 2958 | 2959 | ## 쉼표 (Commas) 2960 | 2961 | 2962 | - [20.1](#commas--leading-trailing) 맨 앞의 쉼표: **안 됩니다.** eslint: [`comma-style`](https://eslint.org/docs/rules/comma-style.html) 2963 | 2964 | ```javascript 2965 | // bad 2966 | const story = [ 2967 | once 2968 | , upon 2969 | , aTime 2970 | ]; 2971 | 2972 | // good 2973 | const story = [ 2974 | once, 2975 | upon, 2976 | aTime, 2977 | ]; 2978 | 2979 | // bad 2980 | const hero = { 2981 | firstName: 'Ada' 2982 | , lastName: 'Lovelace' 2983 | , birthYear: 1815 2984 | , superPower: 'computers' 2985 | }; 2986 | 2987 | // good 2988 | const hero = { 2989 | firstName: 'Ada', 2990 | lastName: 'Lovelace', 2991 | birthYear: 1815, 2992 | superPower: 'computers', 2993 | }; 2994 | ``` 2995 | 2996 | 2997 | - [20.2](#commas--dangling) 끝의 쉼표: **좋아요.** eslint: [`comma-dangle`](https://eslint.org/docs/rules/comma-dangle.html) 2998 | 2999 | > 왜? 이것은 깨끗한 git의 diffs로 이어집니다. 또한 Babel과 같은 트랜스파일러는 트랜스파일하는 사이에 쓸데없는 끝의 쉼표를 제거합니다. 이것은 레거시 브라우저에서의 [불필요한 쉼표 문제](es5-deprecated/README.md#commas)를 고민할 필요가 없는 것을 의미합니다. 3000 | 3001 | ```diff 3002 | // bad - 마지막에 쉼표가 없는 경우 git diff 3003 | const hero = { 3004 | firstName: 'Florence', 3005 | - lastName: 'Nightingale' 3006 | + lastName: 'Nightingale', 3007 | + inventorOf: ['coxcomb chart', 'modern nursing'] 3008 | }; 3009 | 3010 | // good - 마지막에 쉼표가 있는 경우 git diff 3011 | const hero = { 3012 | firstName: 'Florence', 3013 | lastName: 'Nightingale', 3014 | + inventorOf: ['coxcomb chart', 'modern nursing'], 3015 | }; 3016 | ``` 3017 | 3018 | ```javascript 3019 | // bad 3020 | const hero = { 3021 | firstName: 'Dana', 3022 | lastName: 'Scully' 3023 | }; 3024 | 3025 | const heroes = [ 3026 | 'Batman', 3027 | 'Superman' 3028 | ]; 3029 | 3030 | // good 3031 | const hero = { 3032 | firstName: 'Dana', 3033 | lastName: 'Scully', 3034 | }; 3035 | 3036 | const heroes = [ 3037 | 'Batman', 3038 | 'Superman', 3039 | ]; 3040 | 3041 | // bad 3042 | function createHero( 3043 | firstName, 3044 | lastName, 3045 | inventorOf 3046 | ) { 3047 | // does nothing 3048 | } 3049 | 3050 | // good 3051 | function createHero( 3052 | firstName, 3053 | lastName, 3054 | inventorOf, 3055 | ) { 3056 | // does nothing 3057 | } 3058 | 3059 | // good ("나머지" 요소 뒤에 쉼표가 없다는 점에 주의하세요) 3060 | function createHero( 3061 | firstName, 3062 | lastName, 3063 | inventorOf, 3064 | ...heroArgs 3065 | ) { 3066 | // does nothing 3067 | } 3068 | 3069 | // bad 3070 | createHero( 3071 | firstName, 3072 | lastName, 3073 | inventorOf 3074 | ); 3075 | 3076 | // good 3077 | createHero( 3078 | firstName, 3079 | lastName, 3080 | inventorOf, 3081 | ); 3082 | 3083 | // good ("나머지" 요소 뒤에 쉼표가 없다는 점에 주의하세요) 3084 | createHero( 3085 | firstName, 3086 | lastName, 3087 | inventorOf, 3088 | ...heroArgs 3089 | ); 3090 | ``` 3091 | 3092 | **[⬆ back to top](#목차)** 3093 | 3094 | ## 세미콜론 (Semicolons) 3095 | 3096 | 3097 | - [21.1](#semicolons--required) **씁시다.** eslint: [`semi`](https://eslint.org/docs/rules/semi.html) 3098 | 3099 | > 왜? 자바스크립트가 세미콜론이 없는 줄바꿈을 만났을 때, [자동 세미콜론 삽입](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion) 규칙에 따라 그 줄바꿈을 구문의 끝으로 간주할지 여부를 결정하고, (이름이 암시하듯) 세미콜론을 줄바꿈 이전에 삽입합니다. ASI는 몇가지 별난 동작을 포함하고 있지만, 만약 자바스크립트가 줄바꿈을 잘못 해석한다면 코드가 망가져버릴 것입니다. 이 규칙은 새로운 기능이 자바스크립트의 일부가 되면서 더 복잡해집니다. 구문의 끝을 명시하고, 빠뜨린 세미콜론을 잡도록 linter를 설정하면 문제가 발생하는 것을 막을 수 있습니다. 3100 | 3101 | ```javascript 3102 | // bad - 예외 발생 3103 | const luke = {} 3104 | const leia = {} 3105 | [luke, leia].forEach(jedi => jedi.father = 'vader') 3106 | 3107 | // bad - 예외 발생 3108 | const reaction = "No! That's impossible!" 3109 | (async function meanwhileOnTheFalcon() { 3110 | // handle `leia`, `lando`, `chewie`, `r2`, `c3p0` 3111 | // ... 3112 | }()) 3113 | 3114 | // bad - returns `undefined` instead of the value on the next line - always happens when `return` is on a line by itself because of ASI! 3115 | function foo() { 3116 | return 3117 | 'search your feelings, you know it to be foo' 3118 | } 3119 | 3120 | // good 3121 | const luke = {}; 3122 | const leia = {}; 3123 | [luke, leia].forEach((jedi) => { 3124 | jedi.father = 'vader'; 3125 | }); 3126 | 3127 | // good 3128 | const reaction = "No! That's impossible!"; 3129 | (async function meanwhileOnTheFalcon() { 3130 | // handle `leia`, `lando`, `chewie`, `r2`, `c3p0` 3131 | // ... 3132 | }()); 3133 | 3134 | // good 3135 | function foo() { 3136 | return 'search your feelings, you know it to be foo'; 3137 | } 3138 | ``` 3139 | 3140 | [Read more](https://stackoverflow.com/questions/7365172/semicolon-before-self-invoking-function/7365214#7365214). 3141 | 3142 | **[⬆ back to top](#목차)** 3143 | 3144 | ## 형변환과 강제 (Type Casting & Coercion) 3145 | 3146 | 3147 | - [22.1](#coercion--explicit) 구문의 선두에서 형을 강제합니다. 3148 | 3149 | 3150 | - [22.2](#coercion--strings) 문자열: eslint: [`no-new-wrappers`](https://eslint.org/docs/rules/no-new-wrappers) 3151 | 3152 | ```javascript 3153 | // => this.reviewScore = 9; 3154 | 3155 | // bad 3156 | const totalScore = new String(this.reviewScore); // typeof totalScore is "object" not "string" 3157 | 3158 | // bad 3159 | const totalScore = this.reviewScore + ''; // invokes this.reviewScore.valueOf() 3160 | 3161 | // bad 3162 | const totalScore = this.reviewScore.toString(); // isn’t guaranteed to return a string 3163 | 3164 | // good 3165 | const totalScore = String(this.reviewScore); 3166 | ``` 3167 | 3168 | 3169 | - [22.3](#coercion--numbers) 숫자: 형변환을 하는 경우 `Number`를 사용하고, 문자열을 파싱하는 경우에는 기수를 인자로 넘겨 `parseInt`를 사용하세요. eslint: [`radix`](https://eslint.org/docs/rules/radix) [`no-new-wrappers`](https://eslint.org/docs/rules/no-new-wrappers) 3170 | 3171 | > 왜? `parseInt` 함수는 특정 기수(radix)에 따른 문자열 인자의 내용을 해석하고, 이에 따라 판단되는 정수 값을 만듭니다. 이때 문자열 맨앞의 공백은 무시됩니다. 만약 기수가 `undefined` 또는 `0`이라면 `10`으로 취급되며, 숫자가 `0x` 또는 `0X` 문자로 시작하는 경우엔 16진수로 취급됩니다. ECMAScript 3와의 차이는 8진수 해석을 허용하는가에 있습니다. 많은 구현체들이 2013부터 이러한 동작을 채택하지 않았는데, 오래된 브라우저들을 지원해야 하므로 기수를 항상 명시해야 합니다. 3172 | 3173 | ```javascript 3174 | const inputValue = '4'; 3175 | 3176 | // bad 3177 | const val = new Number(inputValue); 3178 | 3179 | // bad 3180 | const val = +inputValue; 3181 | 3182 | // bad 3183 | const val = inputValue >> 0; 3184 | 3185 | // bad 3186 | const val = parseInt(inputValue); 3187 | 3188 | // good 3189 | const val = Number(inputValue); 3190 | 3191 | // good 3192 | const val = parseInt(inputValue, 10); 3193 | ``` 3194 | 3195 | 3196 | - [22.4](#coercion--comment-deviations) 어떤 이유로 인해 `parseInt`가 병목현상을 일으켜 [성능적인 이유](https://jsperf.com/coercion-vs-casting/3)로 비트 시프트를 사용해야 하는 경우 하려고 했던 것을 왜(why)와 무엇(what)으로 설명해 주석으로 남겨주세요. 3197 | 3198 | ```javascript 3199 | // good 3200 | /** 3201 | * parseInt was the reason my code was slow. 3202 | * Bitshifting the String to coerce it to a 3203 | * Number made it a lot faster. 3204 | * 코드가 느린 원인은 parseInt였음. 3205 | * 비트 시프트를 통해 문자열을 강제 형변환하여 3206 | * 성능을 개선시킴. 3207 | */ 3208 | const val = inputValue >> 0; 3209 | ``` 3210 | 3211 | 3212 | - [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입니다: 3213 | 3214 | ```javascript 3215 | 2147483647 >> 0; // => 2147483647 3216 | 2147483648 >> 0; // => -2147483648 3217 | 2147483649 >> 0; // => -2147483647 3218 | ``` 3219 | 3220 | 3221 | - [22.6](#coercion--booleans) 불리언: eslint: [`no-new-wrappers`](https://eslint.org/docs/rules/no-new-wrappers) 3222 | 3223 | ```javascript 3224 | const age = 0; 3225 | 3226 | // bad 3227 | const hasAge = new Boolean(age); 3228 | 3229 | // good 3230 | const hasAge = Boolean(age); 3231 | 3232 | // best 3233 | const hasAge = !!age; 3234 | ``` 3235 | 3236 | **[⬆ back to top](#목차)** 3237 | 3238 | ## 명명규칙 (Naming Conventions) 3239 | 3240 | 3241 | - [23.1](#naming--descriptive) 한 문자로 된 이름은 피하세요. 이름으로부터 의도가 읽혀질 수 있게 해주세요. eslint: [`id-length`](https://eslint.org/docs/rules/id-length) 3242 | 3243 | ```javascript 3244 | // bad 3245 | function q() { 3246 | // ... 3247 | } 3248 | 3249 | // good 3250 | function query() { 3251 | // ... 3252 | } 3253 | ``` 3254 | 3255 | 3256 | - [23.2](#naming--camelCase) 객체, 함수, 인스턴스에는 캐멀케이스(camelCase)를 사용하세요. eslint: [`camelcase`](https://eslint.org/docs/rules/camelcase.html) 3257 | 3258 | ```javascript 3259 | // bad 3260 | const OBJEcttsssss = {}; 3261 | const this_is_my_object = {}; 3262 | function c() {} 3263 | 3264 | // good 3265 | const thisIsMyObject = {}; 3266 | function thisIsMyFunction() {} 3267 | ``` 3268 | 3269 | 3270 | - [23.3](#naming--PascalCase) 클래스나 생성자에는 파스칼케이스(PascalCase)를 사용하세요. eslint: [`new-cap`](https://eslint.org/docs/rules/new-cap.html) 3271 | 3272 | ```javascript 3273 | // bad 3274 | function user(options) { 3275 | this.name = options.name; 3276 | } 3277 | 3278 | const bad = new user({ 3279 | name: 'nope', 3280 | }); 3281 | 3282 | // good 3283 | class User { 3284 | constructor(options) { 3285 | this.name = options.name; 3286 | } 3287 | } 3288 | 3289 | const good = new User({ 3290 | name: 'yup', 3291 | }); 3292 | ``` 3293 | 3294 | 3295 | - [23.4](#naming--leading-underscore) 언더스코어를 사용하지 마세요. eslint: [`no-underscore-dangle`](https://eslint.org/docs/rules/no-underscore-dangle.html) 3296 | 3297 | > 왜? 자바스크립트는 속성이나 메소드 측면에서 은닉된 정보라는 개념을 가지고 있지 않습니다. 언더스코어는 일반적으로 “private”을 의미하지만, 사실 자바스크립트에서 해당 속성은 완전히 public하며, 이는 공공 API의 일부입니다. 이 관례는 개발자들로 하여금 변화가 깨지지 않는 것으로 간주하거나 테스트가 필요하지 않다고 잘못 생각하게 만듭니다. 요약: 만약 뭔가를 “private”하게 사용하고 싶다면, 그것은 있을 수 없는 일입니다. 3298 | 3299 | ```javascript 3300 | // bad 3301 | this.__firstName__ = 'Panda'; 3302 | this.firstName_ = 'Panda'; 3303 | this._firstName = 'Panda'; 3304 | 3305 | // good 3306 | this.firstName = 'Panda'; 3307 | 3308 | // good, in environments where WeakMaps are available 3309 | // see https://kangax.github.io/compat-table/es6/#test-WeakMap 3310 | const firstNames = new WeakMap(); 3311 | firstNames.set(this, 'Panda'); 3312 | ``` 3313 | 3314 | 3315 | - [23.5](#naming--self-this) 참조를 `this`에 저장하지 마세요. 화살표 함수나 [Function#bind](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)를 사용하세요. 3316 | 3317 | ```javascript 3318 | // bad 3319 | function foo() { 3320 | const self = this; 3321 | return function () { 3322 | console.log(self); 3323 | }; 3324 | } 3325 | 3326 | // bad 3327 | function foo() { 3328 | const that = this; 3329 | return function () { 3330 | console.log(that); 3331 | }; 3332 | } 3333 | 3334 | // good 3335 | function foo() { 3336 | return () => { 3337 | console.log(this); 3338 | }; 3339 | } 3340 | ``` 3341 | 3342 | 3343 | - [23.6](#naming--filename-matches-export) 파일 이름은 default export의 이름과 일치해야 합니다. 3344 | 3345 | ```javascript 3346 | // 파일 1 내용 3347 | class CheckBox { 3348 | // ... 3349 | } 3350 | export default CheckBox; 3351 | 3352 | // 파일 2 내용 3353 | export default function fortyTwo() { return 42; } 3354 | 3355 | // 파일 3 내용 3356 | export default function insideDirectory() {} 3357 | 3358 | // 다른 파일 3359 | // bad 3360 | import CheckBox from './checkBox'; // PascalCase import/export, camelCase filename 3361 | import FortyTwo from './FortyTwo'; // PascalCase import/filename, camelCase export 3362 | import InsideDirectory from './InsideDirectory'; // PascalCase import/filename, camelCase export 3363 | 3364 | // bad 3365 | import CheckBox from './check_box'; // PascalCase import/export, snake_case filename 3366 | import forty_two from './forty_two'; // snake_case import/filename, camelCase export 3367 | import inside_directory from './inside_directory'; // snake_case import, camelCase export 3368 | import index from './inside_directory/index'; // requiring the index file explicitly 3369 | import insideDirectory from './insideDirectory/index'; // requiring the index file explicitly 3370 | 3371 | // good 3372 | import CheckBox from './CheckBox'; // PascalCase export/import/filename 3373 | import fortyTwo from './fortyTwo'; // camelCase export/import/filename 3374 | import insideDirectory from './insideDirectory'; // camelCase export/import/directory name/implicit "index" 3375 | // ^ supports both insideDirectory.js and insideDirectory/index.js 3376 | ``` 3377 | 3378 | 3379 | - [23.7](#naming--camelCase-default-export) 함수를 export-default할 때 캐멀케이스(camelCase)를 사용하세요. 파일 이름은 함수 이름과 같아야 합니다. 3380 | 3381 | ```javascript 3382 | function makeStyleGuide() { 3383 | // ... 3384 | } 3385 | 3386 | export default makeStyleGuide; 3387 | ``` 3388 | 3389 | 3390 | - [23.8](#naming--PascalCase-singleton) 생성자 / 클래스 / 싱글톤 / 함수 라이브러리 / 단순 객체를 export할 때 파스칼케이스(PascalCase)를 사용하세요. 3391 | 3392 | ```javascript 3393 | const AirbnbStyleGuide = { 3394 | es6: { 3395 | }, 3396 | }; 3397 | 3398 | export default AirbnbStyleGuide; 3399 | ``` 3400 | 3401 | 3402 | - [23.9](#naming--Acronyms-and-Initialisms) 두문자어와 이니셜은 모두 대문자이거나 모두 소문자이어야 합니다. 3403 | 3404 | > 왜? 이름은 가독성을 위한 것이지 컴퓨터 알고리즘을 위한 것이 아니기 때문입니다. 3405 | 3406 | ```javascript 3407 | // bad 3408 | import SmsContainer from './containers/SmsContainer'; 3409 | 3410 | // bad 3411 | const HttpRequests = [ 3412 | // ... 3413 | ]; 3414 | 3415 | // good 3416 | import SMSContainer from './containers/SMSContainer'; 3417 | 3418 | // good 3419 | const HTTPRequests = [ 3420 | // ... 3421 | ]; 3422 | 3423 | // also good 3424 | const httpRequests = [ 3425 | // ... 3426 | ]; 3427 | 3428 | // best 3429 | import TextMessageContainer from './containers/TextMessageContainer'; 3430 | 3431 | // best 3432 | const requests = [ 3433 | // ... 3434 | ]; 3435 | ``` 3436 | 3437 | 3438 | - [23.10](#naming--uppercase) 상수 이름을 대문자로 짓는 것은 해당 상수가 (1) 내보내기 될 때, (2) `const` 타입일 때 (값이 재할당되지 못할 때), (3) 그 상수와 상수가 중첩된 속성이 절대 변하지 않는다는 것을 신뢰할 수 있을 때만 하세요. 3439 | 3440 | > 왜? 이것은 변수가 영원히 변하지 않는다는 것을 확신할 수 없을 때 도움을 주기 위한 추가적인 도구입니다. 대문자 변수는 변수와 변수의 속성이 변하지 않는다는 것을 프로그래머에게 알려줍니다. 3441 | 3442 | - 모든 `const` 변수 이름을 대문자로 짓나요? - 이것은 필수사항이 아니며, 파일 내 상수 이름을 꼭 대문자로 지을 필요는 없습니다. 하지만 내보내기되는 상수 이름은 대문자로 지어야 합니다. 3443 | 3444 | - 내보내기 되는 객체 이름을 대문자로 짓나요? - 최상위 수준의 내보내기를 할 때 대문자로 이름짓고 (예시: `EXPORTED_OBJECT.key`) 모든 중첩된 속성이 변경되지 않도록 유지합니다. 3445 | 3446 | ```javascript 3447 | // bad 3448 | const PRIVATE_VARIABLE = 'should not be unnecessarily uppercased within a file'; 3449 | 3450 | // bad 3451 | export const THING_TO_BE_CHANGED = 'should obviously not be uppercased'; 3452 | 3453 | // bad 3454 | export let REASSIGNABLE_VARIABLE = 'do not use let with uppercase variables'; 3455 | 3456 | // --- 3457 | 3458 | // allowed but does not supply semantic value 3459 | export const apiKey = 'SOMEKEY'; 3460 | 3461 | // better in most cases 3462 | export const API_KEY = 'SOMEKEY'; 3463 | 3464 | // --- 3465 | 3466 | // bad - unnecessarily uppercases key while adding no semantic value 3467 | export const MAPPING = { 3468 | KEY: 'value' 3469 | }; 3470 | 3471 | // good 3472 | export const MAPPING = { 3473 | key: 'value' 3474 | }; 3475 | ``` 3476 | 3477 | **[⬆ back to top](#목차)** 3478 | 3479 | ## 접근자 (Accessors) 3480 | 3481 | 3482 | - [24.1](#accessors--not-required) 속성을 위한 접근자 함수는 필수가 아닙니다. 3483 | 3484 | 3485 | - [24.2](#accessors--no-getters-setters) 자바스크립트 getters/setters를 사용하지 마세요. 예기치못한 사이드 이펙트를 일으키고 테스트와 유지보수를 어렵게 만듭니다. 접근자 함수를 만들고 싶다면 대신, `getVal()`과 `setVal('hello')`를 사용하세요. 3486 | 3487 | ```javascript 3488 | // bad 3489 | class Dragon { 3490 | get age() { 3491 | // ... 3492 | } 3493 | 3494 | set age(value) { 3495 | // ... 3496 | } 3497 | } 3498 | 3499 | // good 3500 | class Dragon { 3501 | getAge() { 3502 | // ... 3503 | } 3504 | 3505 | setAge(value) { 3506 | // ... 3507 | } 3508 | } 3509 | ``` 3510 | 3511 | 3512 | - [24.3](#accessors--boolean-prefix) 속성이나 메소드가 `boolean`이라면, `isVal()`이나 `hasVal()`을 사용하세요. 3513 | 3514 | ```javascript 3515 | // bad 3516 | if (!dragon.age()) { 3517 | return false; 3518 | } 3519 | 3520 | // good 3521 | if (!dragon.hasAge()) { 3522 | return false; 3523 | } 3524 | ``` 3525 | 3526 | 3527 | - [24.4](#accessors--consistent) `get()`과 `set()` 함수를 만들되, 일관성있게 만드세요. 3528 | 3529 | ```javascript 3530 | class Jedi { 3531 | constructor(options = {}) { 3532 | const lightsaber = options.lightsaber || 'blue'; 3533 | this.set('lightsaber', lightsaber); 3534 | } 3535 | 3536 | set(key, val) { 3537 | this[key] = val; 3538 | } 3539 | 3540 | get(key) { 3541 | return this[key]; 3542 | } 3543 | } 3544 | ``` 3545 | 3546 | **[⬆ back to top](#목차)** 3547 | 3548 | ## 이벤트 (Events) 3549 | 3550 | 3551 | - [25.1](#events--hash) (DOM이벤트나 Backbone 이벤트와 같은) 이벤트로 payload의 값을 넘길 경우 raw값 보다는 해시값을 넘겨주세요. 이렇게하면 이후 기여자가 이벤트에 관련한 모든 핸들러를 찾아서 바꾸는 대신 이벤트 payload에 값을 추가할 수 있습니다. 예를 들면 이렇게요: 3552 | 3553 | ```javascript 3554 | // bad 3555 | $(this).trigger('listingUpdated', listing.id); 3556 | 3557 | // ... 3558 | 3559 | $(this).on('listingUpdated', (e, listingID) => { 3560 | // do something with listingID 3561 | }); 3562 | ``` 3563 | 3564 | 이쪽이 더 좋습니다: 3565 | 3566 | ```javascript 3567 | // good 3568 | $(this).trigger('listingUpdated', { listingID: listing.id }); 3569 | 3570 | // ... 3571 | 3572 | $(this).on('listingUpdated', (e, data) => { 3573 | // do something with data.listingID 3574 | }); 3575 | ``` 3576 | 3577 | **[⬆ back to top](#목차)** 3578 | 3579 | ## 제이쿼리 (jQuery) 3580 | 3581 | 3582 | - [26.1](#jquery--dollar-prefix) 제이쿼리 객체 변수의 앞에는 `$`를 붙여주세요. 3583 | 3584 | ```javascript 3585 | // bad 3586 | const sidebar = $('.sidebar'); 3587 | 3588 | // good 3589 | const $sidebar = $('.sidebar'); 3590 | 3591 | // good 3592 | const $sidebarBtn = $('.sidebar-btn'); 3593 | ``` 3594 | 3595 | 3596 | - [26.2](#jquery--cache) 제이쿼리의 검색결과를 캐시하세요. 3597 | 3598 | ```javascript 3599 | // bad 3600 | function setSidebar() { 3601 | $('.sidebar').hide(); 3602 | 3603 | // ... 3604 | 3605 | $('.sidebar').css({ 3606 | 'background-color': 'pink', 3607 | }); 3608 | } 3609 | 3610 | // good 3611 | function setSidebar() { 3612 | const $sidebar = $('.sidebar'); 3613 | $sidebar.hide(); 3614 | 3615 | // ... 3616 | 3617 | $sidebar.css({ 3618 | 'background-color': 'pink', 3619 | }); 3620 | } 3621 | ``` 3622 | 3623 | 3624 | - [26.3](#jquery--queries) DOM 검색에는 `$('.sidebar ul')`이나 parent > child `$('.sidebar > ul')`와 같은 캐스케이딩를 사용하세요. [jsPerf](http://jsperf.com/jquery-find-vs-context-sel/16) 3625 | 3626 | 3627 | - [26.4](#jquery--find) 한정된 제이쿼리 객체 쿼리에는 `find`를 사용하세요. 3628 | 3629 | ```javascript 3630 | // bad 3631 | $('ul', '.sidebar').hide(); 3632 | 3633 | // bad 3634 | $('.sidebar').find('ul').hide(); 3635 | 3636 | // good 3637 | $('.sidebar ul').hide(); 3638 | 3639 | // good 3640 | $('.sidebar > ul').hide(); 3641 | 3642 | // good 3643 | $sidebar.find('ul').hide(); 3644 | ``` 3645 | 3646 | **[⬆ back to top](#목차)** 3647 | 3648 | ## ES5 호환성 (ECMAScript 5 Compatibility) 3649 | 3650 | 3651 | - [27.1](#es5-compat--kangax) [Kangax](https://twitter.com/kangax/)의 ES5 [호환성 표](https://kangax.github.io/es5-compat-table/)를 참고하세요. 3652 | 3653 | **[⬆ back to top](#목차)** 3654 | 3655 | 3656 | ## ECMAScript 6+ (ES 2015+) 스타일 3657 | 3658 | 3659 | - [28.1](#es6-styles) 여러 ES6+ 기능과 관련된 링크 모음입니다. 3660 | 3661 | 1. [화살표 함수 (Arrow Functions)](#화살표-함수-arrow-functions) 3662 | 1. [클래스 (Classes)](#클래스와-&-생성자-classes--constructors) 3663 | 1. [객체 단축형 (Object Shorthand)](#es6-object-shorthand) 3664 | 1. [객체 속성 단축형 (Object Concise)](#es6-object-concise) 3665 | 1. [객체 속성 계산 (Object Computed Properties)](#es6-computed-properties) 3666 | 1. [템플릿 문자열 (Template Strings)](#es6-template-literals) 3667 | 1. [비구조화 (Destructuring)](#비구조화-destructuring) 3668 | 1. [기본 매개변수 (Default Parameters)](#es6-default-parameters) 3669 | 1. [나머지 구문 (Rest)](#es6-rest) 3670 | 1. [배열 전개 (Array Spreads)](#es6-array-spreads) 3671 | 1. [Let과 Const (Let and Const)](#참조-references) 3672 | 1. [제곱 연산자 (Exponentiation Operator)](#es2016-properties--exponentiation-operator) 3673 | 1. [이터레이터와 제너레이터 (Iterators and Generators)](#이터레이터와-제너레이터-iterators-and-generators) 3674 | 1. [모듈 (Modules)](#모듈-modules) 3675 | 3676 | 3677 | - [28.2](#tc39-proposals) 스테이지3에 이르지 못하는 [TC39 proposals](https://github.com/tc39/proposals)를 사용하지 마세요. 3678 | 3679 | > 왜? [그것들은 확정되지 않았습니다](https://tc39.github.io/process-document/). 그리고 이들은 변경되거나 완전히 폐기될 수도 있습니다. 우리는 자바스크립트를 사용하기를 원하지만, proposals는 아직 자바스크립트가 아닙니다. 3680 | 3681 | **[⬆ back to top](#목차)** 3682 | 3683 | ## 표준 라이브러리 (Standard Library) 3684 | 3685 | [표준 라이브러리](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects)는 기능적으로 문제가 있지만 레거시 이유로 아직 남아있는 유틸리티들을 포함하고 있습니다. 3686 | 3687 | 3688 | - [29.1](#standard-library--isnan) 전역 `isNaN` 대신 `Number.isNaN`을 사용하세요. 3689 | eslint: [`no-restricted-globals`](https://eslint.org/docs/rules/no-restricted-globals) 3690 | 3691 | > 왜? 전역 `isNaN`은 숫자가 아닌 것을 숫자로 강제하고, NaN으로 간주되는 모든 것을 true로 반환합니다. 3692 | > 만약 이것을 사용해야 한다면 명시적으로 사용하세요. 3693 | 3694 | ```javascript 3695 | // bad 3696 | isNaN('1.2'); // false 3697 | isNaN('1.2.3'); // true 3698 | 3699 | // good 3700 | Number.isNaN('1.2.3'); // false 3701 | Number.isNaN(Number('1.2.3')); // true 3702 | ``` 3703 | 3704 | 3705 | - [29.2](#standard-library--isfinite) 전역 `isFinite` 대신 `Number.isFinite`을 사용하세요. 3706 | eslint: [`no-restricted-globals`](https://eslint.org/docs/rules/no-restricted-globals) 3707 | 3708 | > 왜? 전역 `isFinite`은 숫자가 아닌 것을 숫자로 강제하고, 유한한 숫자로 간주되는 모든 것을 true로 반환합니다. 3709 | > 만약 이것을 사용해야 한다면 명시적으로 사용하세요. 3710 | 3711 | ```javascript 3712 | // bad 3713 | isFinite('2e3'); // true 3714 | 3715 | // good 3716 | Number.isFinite('2e3'); // false 3717 | Number.isFinite(parseInt('2e3', 10)); // true 3718 | ``` 3719 | 3720 | **[⬆ back to top](#목차)** 3721 | 3722 | ## 테스트 (Testing) 3723 | 3724 | 3725 | - [30.1](#testing--yup) **합시다.** 3726 | 3727 | ```javascript 3728 | function foo() { 3729 | return true; 3730 | } 3731 | ``` 3732 | 3733 | 3734 | - [30.2](#testing--for-real) **진지하게 생각해보죠**: 3735 | - 어떤 테스트 프레임워크를 사용하든 테스트를 작성하세요! 3736 | - 작고 순수한 기능을 쓰도록 노력하고, 조작이 일어나는 곳을 최소화하세요. 3737 | - stubs과 mocks에 주의하세요 - 테스트를 더 다루기 힘들게 만들 수 있습니다. 3738 | - Airbnb에서는 [`mocha`](https://www.npmjs.com/package/mocha)와 [`jest`](https://www.npmjs.com/package/jest)를 주로 사용합니다. [`tape`](https://www.npmjs.com/package/tape)도 때때로 작은 개별 모듈에 사용됩니다. 3739 | - 100% 테스트 적용 범위에 도달하는 것이 항상 실용적이지는 않지만, 좋은 목표입니다. 3740 | - 버그를 고칠 때마다 _회귀 테스트_ 를 작성하세요. 회귀 테스트 없이 고쳐진 버그는 미래에 거의 분명히 문제를 다시 일으킵니다. 3741 | 3742 | **[⬆ back to top](#목차)** 3743 | 3744 | ## 성능 (Performance) 3745 | 3746 | - [On Layout & Web Performance](https://www.kellegous.com/j/2013/01/26/layout-performance/) 3747 | - [String vs Array Concat](https://jsperf.com/string-vs-array-concat/2) 3748 | - [Try/Catch Cost In a Loop](https://jsperf.com/try-catch-in-loop-cost) 3749 | - [Bang Function](https://jsperf.com/bang-function) 3750 | - [jQuery Find vs Context, Selector](https://jsperf.com/jquery-find-vs-context-sel/13) 3751 | - [innerHTML vs textContent for script text](https://jsperf.com/innerhtml-vs-textcontent-for-script-text) 3752 | - [Long String Concatenation](https://jsperf.com/ya-string-concat) 3753 | - [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) 3754 | - Loading... 3755 | 3756 | **[⬆ back to top](#목차)** 3757 | 3758 | ## 자료 (Resources) 3759 | 3760 | **Learning ES6+** 3761 | 3762 | - [Latest ECMA spec](https://tc39.github.io/ecma262/) 3763 | - [ExploringJS](http://exploringjs.com/) 3764 | - [ES6 Compatibility Table](https://kangax.github.io/compat-table/es6/) 3765 | - [Comprehensive Overview of ES6 Features](http://es6-features.org/) 3766 | 3767 | **Read This** 3768 | 3769 | - [Standard ECMA-262](http://www.ecma-international.org/ecma-262/6.0/index.html) 3770 | 3771 | **Tools** 3772 | 3773 | - Code Style Linters 3774 | - [ESlint](https://eslint.org/) - [Airbnb Style .eslintrc](https://github.com/airbnb/javascript/blob/master/linters/.eslintrc) 3775 | - [JSHint](http://jshint.com/) - [Airbnb Style .jshintrc](https://github.com/airbnb/javascript/blob/master/linters/.jshintrc) 3776 | - Neutrino Preset - [@neutrinojs/airbnb](https://neutrinojs.org/packages/airbnb/) 3777 | 3778 | **Other Style Guides** 3779 | 3780 | - [Google JavaScript Style Guide](https://google.github.io/styleguide/javascriptguide.xml) 3781 | - [jQuery Core Style Guidelines](https://contribute.jquery.org/style-guide/js/) 3782 | - [Principles of Writing Consistent, Idiomatic JavaScript](https://github.com/rwaldron/idiomatic.js) 3783 | - [StandardJS](https://standardjs.com) 3784 | 3785 | **Other Styles** 3786 | 3787 | - [Naming this in nested functions](https://gist.github.com/cjohansen/4135065) - Christian Johansen 3788 | - [Conditional Callbacks](https://github.com/airbnb/javascript/issues/52) - Ross Allen 3789 | - [Popular JavaScript Coding Conventions on GitHub](http://sideeffect.kr/popularconvention/#javascript) - JeongHoon Byun 3790 | - [Multiple var statements in JavaScript, not superfluous](http://benalman.com/news/2012/05/multiple-var-statements-javascript/) - Ben Alman 3791 | 3792 | **Further Reading** 3793 | 3794 | - [Understanding JavaScript Closures](https://javascriptweblog.wordpress.com/2010/10/25/understanding-javascript-closures/) - Angus Croll 3795 | - [Basic JavaScript for the impatient programmer](http://www.2ality.com/2013/06/basic-javascript.html) - Dr. Axel Rauschmayer 3796 | - [You Might Not Need jQuery](http://youmightnotneedjquery.com/) - Zack Bloom & Adam Schwartz 3797 | - [ES6 Features](https://github.com/lukehoban/es6features) - Luke Hoban 3798 | - [Frontend Guidelines](https://github.com/bendc/frontend-guidelines) - Benjamin De Cock 3799 | 3800 | **Books** 3801 | 3802 | - [JavaScript: The Good Parts](https://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742) - Douglas Crockford 3803 | - [JavaScript Patterns](https://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752) - Stoyan Stefanov 3804 | - [Pro JavaScript Design Patterns](https://www.amazon.com/JavaScript-Design-Patterns-Recipes-Problem-Solution/dp/159059908X) - Ross Harmes and Dustin Diaz 3805 | - [High Performance Web Sites: Essential Knowledge for Front-End Engineers](https://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309) - Steve Souders 3806 | - [Maintainable JavaScript](https://www.amazon.com/Maintainable-JavaScript-Nicholas-C-Zakas/dp/1449327680) - Nicholas C. Zakas 3807 | - [JavaScript Web Applications](https://www.amazon.com/JavaScript-Web-Applications-Alex-MacCaw/dp/144930351X) - Alex MacCaw 3808 | - [Pro JavaScript Techniques](https://www.amazon.com/Pro-JavaScript-Techniques-John-Resig/dp/1590597273) - John Resig 3809 | - [Smashing Node.js: JavaScript Everywhere](https://www.amazon.com/Smashing-Node-js-JavaScript-Everywhere-Magazine/dp/1119962595) - Guillermo Rauch 3810 | - [Secrets of the JavaScript Ninja](https://www.amazon.com/Secrets-JavaScript-Ninja-John-Resig/dp/193398869X) - John Resig and Bear Bibeault 3811 | - [Human JavaScript](http://humanjavascript.com/) - Henrik Joreteg 3812 | - [Superhero.js](http://superherojs.com/) - Kim Joar Bekkelund, Mads Mobæk, & Olav Bjorkoy 3813 | - [JSBooks](http://jsbooks.revolunet.com/) - Julien Bouquillon 3814 | - [Third Party JavaScript](https://www.manning.com/books/third-party-javascript) - Ben Vinegar and Anton Kovalyov 3815 | - [Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript](http://amzn.com/0321812182) - David Herman 3816 | - [Eloquent JavaScript](http://eloquentjavascript.net/) - Marijn Haverbeke 3817 | - [You Don’t Know JS: ES6 & Beyond](http://shop.oreilly.com/product/0636920033769.do) - Kyle Simpson 3818 | 3819 | **Blogs** 3820 | 3821 | - [JavaScript Weekly](http://javascriptweekly.com/) 3822 | - [JavaScript, JavaScript...](https://javascriptweblog.wordpress.com/) 3823 | - [Bocoup Weblog](https://bocoup.com/weblog) 3824 | - [Adequately Good](http://www.adequatelygood.com/) 3825 | - [NCZOnline](https://www.nczonline.net/) 3826 | - [Perfection Kills](http://perfectionkills.com/) 3827 | - [Ben Alman](http://benalman.com/) 3828 | - [Dmitry Baranovskiy](http://dmitry.baranovskiy.com/) 3829 | - [nettuts](http://code.tutsplus.com/?s=javascript) 3830 | 3831 | **Podcasts** 3832 | 3833 | - [JavaScript Air](https://javascriptair.com/) 3834 | - [JavaScript Jabber](https://devchat.tv/js-jabber/) 3835 | 3836 | **[⬆ back to top](#목차)** 3837 | 3838 | ## In the Wild 3839 | 3840 | 아래 목록은 이 스타일 가이드를 사용하고 있는 단체들입니다. 우리에게 풀 리퀘스트를 보내면 리스트에 추가해드리겠습니다. 3841 | 3842 | - **123erfasst**: [123erfasst/javascript](https://github.com/123erfasst/javascript) 3843 | - **4Catalyzer**: [4Catalyzer/javascript](https://github.com/4Catalyzer/javascript) 3844 | - **Aan Zee**: [AanZee/javascript](https://github.com/AanZee/javascript) 3845 | - **Airbnb**: [airbnb/javascript](https://github.com/airbnb/javascript) 3846 | - **AltSchool**: [AltSchool/javascript](https://github.com/AltSchool/javascript) 3847 | - **Apartmint**: [apartmint/javascript](https://github.com/apartmint/javascript) 3848 | - **Ascribe**: [ascribe/javascript](https://github.com/ascribe/javascript) 3849 | - **Avant**: [avantcredit/javascript](https://github.com/avantcredit/javascript) 3850 | - **Axept**: [axept/javascript](https://github.com/axept/javascript) 3851 | - **Billabong**: [billabong/javascript](https://github.com/billabong/javascript) 3852 | - **Bisk**: [bisk](https://github.com/Bisk/) 3853 | - **Bonhomme**: [bonhommeparis/javascript](https://github.com/bonhommeparis/javascript) 3854 | - **Brainshark**: [brainshark/javascript](https://github.com/brainshark/javascript) 3855 | - **CaseNine**: [CaseNine/javascript](https://github.com/CaseNine/javascript) 3856 | - **Cerner**: [Cerner](https://github.com/cerner/) 3857 | - **Chartboost**: [ChartBoost/javascript-style-guide](https://github.com/ChartBoost/javascript-style-guide) 3858 | - **ComparaOnline**: [comparaonline/javascript](https://github.com/comparaonline/javascript-style-guide) 3859 | - **Compass Learning**: [compasslearning/javascript-style-guide](https://github.com/compasslearning/javascript-style-guide) 3860 | - **DailyMotion**: [dailymotion/javascript](https://github.com/dailymotion/javascript) 3861 | - **DoSomething**: [DoSomething/eslint-config](https://github.com/DoSomething/eslint-config) 3862 | - **Digitpaint** [digitpaint/javascript](https://github.com/digitpaint/javascript) 3863 | - **Drupal**: [www.drupal.org](https://git.drupalcode.org/project/drupal/blob/8.6.x/core/.eslintrc.json) 3864 | - **Ecosia**: [ecosia/javascript](https://github.com/ecosia/javascript) 3865 | - **Evernote**: [evernote/javascript-style-guide](https://github.com/evernote/javascript-style-guide) 3866 | - **Evolution Gaming**: [evolution-gaming/javascript](https://github.com/evolution-gaming/javascript) 3867 | - **EvozonJs**: [evozonjs/javascript](https://github.com/evozonjs/javascript) 3868 | - **ExactTarget**: [ExactTarget/javascript](https://github.com/ExactTarget/javascript) 3869 | - **Flexberry**: [Flexberry/javascript-style-guide](https://github.com/Flexberry/javascript-style-guide) 3870 | - **Gawker Media**: [gawkermedia](https://github.com/gawkermedia/) 3871 | - **General Electric**: [GeneralElectric/javascript](https://github.com/GeneralElectric/javascript) 3872 | - **Generation Tux**: [GenerationTux/javascript](https://github.com/generationtux/styleguide) 3873 | - **GoodData**: [gooddata/gdc-js-style](https://github.com/gooddata/gdc-js-style) 3874 | - **Grooveshark**: [grooveshark/javascript](https://github.com/grooveshark/javascript) 3875 | - **Grupo-Abraxas**: [Grupo-Abraxas/javascript](https://github.com/Grupo-Abraxas/javascript) 3876 | - **Honey**: [honeyscience/javascript](https://github.com/honeyscience/javascript) 3877 | - **How About We**: [howaboutwe/javascript](https://github.com/howaboutwe/javascript-style-guide) 3878 | - **HubSpot**: [HubSpot/javascript](https://github.com/HubSpot/javascript) 3879 | - **Hyper**: [hyperoslo/javascript-playbook](https://github.com/hyperoslo/javascript-playbook/blob/master/style.md) 3880 | - **InterCity Group**: [intercitygroup/javascript-style-guide](https://github.com/intercitygroup/javascript-style-guide) 3881 | - **Jam3**: [Jam3/Javascript-Code-Conventions](https://github.com/Jam3/Javascript-Code-Conventions) 3882 | - **JSSolutions**: [JSSolutions/javascript](https://github.com/JSSolutions/javascript) 3883 | - **Kaplan Komputing**: [kaplankomputing/javascript](https://github.com/kaplankomputing/javascript) 3884 | - **KickorStick**: [kickorstick](https://github.com/kickorstick/) 3885 | - **Kinetica Solutions**: [kinetica/javascript](https://github.com/kinetica/Javascript-style-guide) 3886 | - **LEINWAND**: [LEINWAND/javascript](https://github.com/LEINWAND/javascript) 3887 | - **Lonely Planet**: [lonelyplanet/javascript](https://github.com/lonelyplanet/javascript) 3888 | - **M2GEN**: [M2GEN/javascript](https://github.com/M2GEN/javascript) 3889 | - **Mighty Spring**: [mightyspring/javascript](https://github.com/mightyspring/javascript) 3890 | - **MinnPost**: [MinnPost/javascript](https://github.com/MinnPost/javascript) 3891 | - **MitocGroup**: [MitocGroup/javascript](https://github.com/MitocGroup/javascript) 3892 | - **Muber**: [muber](https://github.com/muber/) 3893 | - **National Geographic**: [natgeo](https://github.com/natgeo/) 3894 | - **Nulogy**: [nulogy/javascript](https://github.com/nulogy/javascript) 3895 | - **Orange Hill Development**: [orangehill/javascript](https://github.com/orangehill/javascript) 3896 | - **Orion Health**: [orionhealth/javascript](https://github.com/orionhealth/javascript) 3897 | - **OutBoxSoft**: [OutBoxSoft/javascript](https://github.com/OutBoxSoft/javascript) 3898 | - **Peerby**: [Peerby/javascript](https://github.com/Peerby/javascript) 3899 | - **Pier 1**: [Pier1/javascript](https://github.com/pier1/javascript) 3900 | - **Qotto**: [Qotto/javascript-style-guide](https://github.com/Qotto/javascript-style-guide) 3901 | - **React**: [facebook.github.io/react/contributing/how-to-contribute.html#style-guide](https://facebook.github.io/react/contributing/how-to-contribute.html#style-guide) 3902 | - **REI**: [reidev/js-style-guide](https://github.com/rei/code-style-guides/) 3903 | - **Ripple**: [ripple/javascript-style-guide](https://github.com/ripple/javascript-style-guide) 3904 | - **Sainsbury's Supermarkets**: [jsainsburyplc](https://github.com/jsainsburyplc) 3905 | - **Shutterfly**: [shutterfly/javascript](https://github.com/shutterfly/javascript) 3906 | - **Sourcetoad**: [sourcetoad/javascript](https://github.com/sourcetoad/javascript) 3907 | - **Springload**: [springload](https://github.com/springload/) 3908 | - **StratoDem Analytics**: [stratodem/javascript](https://github.com/stratodem/javascript) 3909 | - **SteelKiwi Development**: [steelkiwi/javascript](https://github.com/steelkiwi/javascript) 3910 | - **StudentSphere**: [studentsphere/javascript](https://github.com/studentsphere/guide-javascript) 3911 | - **SwoopApp**: [swoopapp/javascript](https://github.com/swoopapp/javascript) 3912 | - **SysGarage**: [sysgarage/javascript-style-guide](https://github.com/sysgarage/javascript-style-guide) 3913 | - **Syzygy Warsaw**: [syzygypl/javascript](https://github.com/syzygypl/javascript) 3914 | - **Target**: [target/javascript](https://github.com/target/javascript) 3915 | - **TheLadders**: [TheLadders/javascript](https://github.com/TheLadders/javascript) 3916 | - **The Nerdery**: [thenerdery/javascript-standards](https://github.com/thenerdery/javascript-standards) 3917 | - **T4R Technology**: [T4R-Technology/javascript](https://github.com/T4R-Technology/javascript) 3918 | - **UrbanSim**: [urbansim](https://github.com/urbansim/) 3919 | - **VoxFeed**: [VoxFeed/javascript-style-guide](https://github.com/VoxFeed/javascript-style-guide) 3920 | - **WeBox Studio**: [weboxstudio/javascript](https://github.com/weboxstudio/javascript) 3921 | - **Weggo**: [Weggo/javascript](https://github.com/Weggo/javascript) 3922 | - **Zillow**: [zillow/javascript](https://github.com/zillow/javascript) 3923 | - **ZocDoc**: [ZocDoc/javascript](https://github.com/ZocDoc/javascript) 3924 | 3925 | **[⬆ back to top](#목차)** 3926 | 3927 | ## Translation 3928 | 3929 | 이 스타일 가이드는 다른 언어로도 제공됩니다: 3930 | 3931 | - ![br](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Brazilian Portuguese**: [armoucar/javascript-style-guide](https://github.com/armoucar/javascript-style-guide) 3932 | - ![bg](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Bulgaria.png) **Bulgarian**: [borislavvv/javascript](https://github.com/borislavvv/javascript) 3933 | - ![ca](https://raw.githubusercontent.com/fpmweb/javascript-style-guide/master/img/catala.png) **Catalan**: [fpmweb/javascript-style-guide](https://github.com/fpmweb/javascript-style-guide) 3934 | - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **Chinese (Simplified)**: [yuche/javascript](https://github.com/yuche/javascript) 3935 | - ![tw](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Taiwan.png) **Chinese (Traditional)**: [jigsawye/javascript](https://github.com/jigsawye/javascript) 3936 | - ![fr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/France.png) **French**: [nmussy/javascript-style-guide](https://github.com/nmussy/javascript-style-guide) 3937 | - ![de](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Germany.png) **German**: [timofurrer/javascript-style-guide](https://github.com/timofurrer/javascript-style-guide) 3938 | - ![it](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Italy.png) **Italian**: [sinkswim/javascript-style-guide](https://github.com/sinkswim/javascript-style-guide) 3939 | - ![jp](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **Japanese**: [mitsuruog/javascript-style-guide](https://github.com/mitsuruog/javascript-style-guide) 3940 | - ![kr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **Korean**: [ParkSB/javascript-style-guide](https://github.com/ParkSB/javascript-style-guide) 3941 | - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: [leonidlebedev/javascript-airbnb](https://github.com/leonidlebedev/javascript-airbnb) 3942 | - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [paolocarrasco/javascript-style-guide](https://github.com/paolocarrasco/javascript-style-guide) 3943 | - ![th](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Thailand.png) **Thai**: [lvarayut/javascript-style-guide](https://github.com/lvarayut/javascript-style-guide) 3944 | - ![tr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Turkey.png) **Turkish**: [eraycetinay/javascript](https://github.com/eraycetinay/javascript) 3945 | - ![ua](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Ukraine.png) **Ukrainian**: [ivanzusko/javascript](https://github.com/ivanzusko/javascript) 3946 | - ![vn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Vietnam.png) **Vietnam**: [hngiang/javascript-style-guide](https://github.com/hngiang/javascript-style-guide) 3947 | 3948 | ## The JavaScript Style Guide Guide 3949 | 3950 | - [Reference](https://github.com/airbnb/javascript/wiki/The-JavaScript-Style-Guide-Guide) 3951 | 3952 | ## Chat With Us About JavaScript 3953 | 3954 | - Find us on [gitter](https://gitter.im/airbnb/javascript). 3955 | 3956 | ## Contributors 3957 | 3958 | - [View Contributors](https://github.com/airbnb/javascript/graphs/contributors) 3959 | 3960 | ## License 3961 | 3962 | (The MIT License) 3963 | 3964 | Copyright (c) 2012 Airbnb 3965 | 3966 | Permission is hereby granted, free of charge, to any person obtaining 3967 | a copy of this software and associated documentation files (the 3968 | 'Software'), to deal in the Software without restriction, including 3969 | without limitation the rights to use, copy, modify, merge, publish, 3970 | distribute, sublicense, and/or sell copies of the Software, and to 3971 | permit persons to whom the Software is furnished to do so, subject to 3972 | the following conditions: 3973 | 3974 | The above copyright notice and this permission notice shall be 3975 | included in all copies or substantial portions of the Software. 3976 | 3977 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, 3978 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 3979 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 3980 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 3981 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 3982 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 3983 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 3984 | 3985 | **[⬆ back to top](#목차)** 3986 | 3987 | ## Amendments 3988 | 3989 | 우리는 당신이 이 가이드를 포크해서 당신의 팀에 알맞도록 고쳐 쓰기를 바랍니다. 아래에 스타일 가이드의 수정 사항을 나열하세요. 이렇게 하면 병합 충돌(marge conflicts)을 신경쓰지 않고 스타일 가이드를 정기적으로 업데이트 할 수 있습니다. 3990 | 3991 | # }; 3992 | -------------------------------------------------------------------------------- /css-in-javascript/README.md: -------------------------------------------------------------------------------- 1 | [원문: https://github.com/airbnb/javascript/tree/master/css-in-javascript](https://github.com/airbnb/javascript/tree/master/css-in-javascript) 2 | 3 | # Airbnb CSS-in-JavaScript 스타일 가이드 4 | 5 | *대체로 합리적인 CSS-in-JavaScript에 대한 접근 방법* 6 | 7 | ## 목차 8 | 9 | 1. [명명규칙 (Naming)](#명명규칙-naming) 10 | 1. [순서 (Ordering)](#순서-ordering) 11 | 1. [중첩 (Nesting)](#중첩-nesting) 12 | 1. [인라인 (Inline)](#인라인-inline) 13 | 1. [테마 (Themes)](#테마-themes) 14 | 15 | ## 명명규칙 (Naming) 16 | 17 | - Use camelCase for object keys (i.e. "selectors"). 18 | - 객체 키에 캐멀케이스(camelCase)를 사용하세요. (i.e. "selectors"). 19 | 20 | > Why? We access these keys as properties on the `styles` object in the component, so it is most convenient to use camelCase. 21 | 22 | > 왜? 우리는 키를 컴포넌트 내 `styles` 객체의 속성으로 사용하기 때문에, 캐멀케이스(camelCase)를 사용하는 것이 가장 편리합니다. 23 | 24 | ```js 25 | // bad 26 | { 27 | 'bermuda-triangle': { 28 | display: 'none', 29 | }, 30 | } 31 | 32 | // good 33 | { 34 | bermudaTriangle: { 35 | display: 'none', 36 | }, 37 | } 38 | ``` 39 | 40 | - Use an underscore for modifiers to other styles. 41 | - 다른 스타일 제어자에는 언더스코어를 사용하세요. 42 | 43 | > Why? Similar to BEM, this naming convention makes it clear that the styles are intended to modify the element preceded by the underscore. Underscores do not need to be quoted, so they are preferred over other characters, such as dashes. 44 | 45 | > 왜? BEM과 비슷하게, 이 명명규칙은 스타일이 언더스코어 앞에 있는 요소를 수정하기 위한 것임을 분명하게 해줍니다. 언더스코어는 인용될 필요가 없으므로 대시와 같은 다른 문자들보다 더 낫습니다. 46 | 47 | ```js 48 | // bad 49 | { 50 | bruceBanner: { 51 | color: 'pink', 52 | transition: 'color 10s', 53 | }, 54 | 55 | bruceBannerTheHulk: { 56 | color: 'green', 57 | }, 58 | } 59 | 60 | // good 61 | { 62 | bruceBanner: { 63 | color: 'pink', 64 | transition: 'color 10s', 65 | }, 66 | 67 | bruceBanner_theHulk: { 68 | color: 'green', 69 | }, 70 | } 71 | ``` 72 | 73 | - Use `selectorName_fallback` for sets of fallback styles. 74 | - fallback 스타일의 묶음에 `selectorName_fallback`을 사용하세요. 75 | 76 | > Why? Similar to modifiers, keeping the naming consistent helps reveal the relationship of these styles to the styles that override them in more adequate browsers. 77 | 78 | > 왜? 제어자와 비슷하게, 일관적인 명명규칙은 브라우저에서 스타일들을 오버라이드하는 스타일과의 관계를 보여주는 데 도움이 됩니다. 79 | 80 | ```js 81 | // bad 82 | { 83 | muscles: { 84 | display: 'flex', 85 | }, 86 | 87 | muscles_sadBears: { 88 | width: '100%', 89 | }, 90 | } 91 | 92 | // good 93 | { 94 | muscles: { 95 | display: 'flex', 96 | }, 97 | 98 | muscles_fallback: { 99 | width: '100%', 100 | }, 101 | } 102 | ``` 103 | 104 | - Use a separate selector for sets of fallback styles. 105 | - fallback 스타일의 묶음에는 선택자 분리해서 사용하세요. 106 | 107 | > Why? Keeping fallback styles contained in a separate object clarifies their purpose, which improves readability. 108 | 109 | > 왜? 분리된 객체를 포함하는 fallback 스타일을 유지하면 이들의 목적을 분명히 할 수 있고, 가독성을 높일수도 있습니다. 110 | 111 | ```js 112 | // bad 113 | { 114 | muscles: { 115 | display: 'flex', 116 | }, 117 | 118 | left: { 119 | flexGrow: 1, 120 | display: 'inline-block', 121 | }, 122 | 123 | right: { 124 | display: 'inline-block', 125 | }, 126 | } 127 | 128 | // good 129 | { 130 | muscles: { 131 | display: 'flex', 132 | }, 133 | 134 | left: { 135 | flexGrow: 1, 136 | }, 137 | 138 | left_fallback: { 139 | display: 'inline-block', 140 | }, 141 | 142 | right_fallback: { 143 | display: 'inline-block', 144 | }, 145 | } 146 | ``` 147 | 148 | - Use device-agnostic names (e.g. "small", "medium", and "large") to name media query breakpoints. 149 | - 미디어 쿼리 브레이크 포인트에는 device-agnostic 이름 (e.g. "small", "medium", and "large")을 사용하세요. 150 | 151 | > Why? Commonly used names like "phone", "tablet", and "desktop" do not match the characteristics of the devices in the real world. Using these names sets the wrong expectations. 152 | 153 | > 왜? 일반적으로 사용되는 "phone", "tablet", "desktop"과 같은 이름은 실제 세계의 장치 특성과 일치하지 않습니다. 이러한 이름은 잘못된 예외를 만듭니다. 154 | 155 | ```js 156 | // bad 157 | const breakpoints = { 158 | mobile: '@media (max-width: 639px)', 159 | tablet: '@media (max-width: 1047px)', 160 | desktop: '@media (min-width: 1048px)', 161 | }; 162 | 163 | // good 164 | const breakpoints = { 165 | small: '@media (max-width: 639px)', 166 | medium: '@media (max-width: 1047px)', 167 | large: '@media (min-width: 1048px)', 168 | }; 169 | ``` 170 | 171 | ## 순서 (Ordering) 172 | 173 | - Define styles after the component. 174 | - 컴포넌트 다음에 스타일을 정의하세요. 175 | 176 | > Why? We use a higher-order component to theme our styles, which is naturally used after the component definition. Passing the styles object directly to this function reduces indirection. 177 | 178 | > 왜? 우리는 컴포넌트를 스타일의 상위에 두는데, 이는 구성 요소의 정의 이후에 자연스럽게 사용됩니다. 스타일 객체를 직접 함수에 전달하면 간접적인 참조를 줄일 수 있습니다. 179 | 180 | ```jsx 181 | // bad 182 | const styles = { 183 | container: { 184 | display: 'inline-block', 185 | }, 186 | }; 187 | 188 | function MyComponent({ styles }) { 189 | return ( 190 |
191 | Never doubt that a small group of thoughtful, committed citizens can 192 | change the world. Indeed, it’s the only thing that ever has. 193 |
194 | ); 195 | } 196 | 197 | export default withStyles(() => styles)(MyComponent); 198 | 199 | // good 200 | function MyComponent({ styles }) { 201 | return ( 202 |
203 | Never doubt that a small group of thoughtful, committed citizens can 204 | change the world. Indeed, it’s the only thing that ever has. 205 |
206 | ); 207 | } 208 | 209 | export default withStyles(() => ({ 210 | container: { 211 | display: 'inline-block', 212 | }, 213 | }))(MyComponent); 214 | ``` 215 | 216 | ## 중첩 (Nesting) 217 | 218 | - Leave a blank line between adjacent blocks at the same indentation level. 219 | - 같은 들여쓰기 레벨에서 블록과 블록 사이에 빈 행을 넣으세요. 220 | 221 | > Why? The whitespace improves readability and reduces the likelihood of merge conflicts. 222 | 223 | > 왜? 공백은 가독성을 높이고, 병합 충돌(merge conflicts) 가능성을 줄입니다. 224 | 225 | ```js 226 | // bad 227 | { 228 | bigBang: { 229 | display: 'inline-block', 230 | '::before': { 231 | content: "''", 232 | }, 233 | }, 234 | universe: { 235 | border: 'none', 236 | }, 237 | } 238 | 239 | // good 240 | { 241 | bigBang: { 242 | display: 'inline-block', 243 | 244 | '::before': { 245 | content: "''", 246 | }, 247 | }, 248 | 249 | universe: { 250 | border: 'none', 251 | }, 252 | } 253 | ``` 254 | 255 | ## 인라인 (Inline) 256 | 257 | - Use inline styles for styles that have a high cardinality (e.g. uses the value of a prop) and not for styles that have a low cardinality. 258 | - 카디널리티가 높은 스타일 (e.g. prop의 값을 사용)에는 인라인 스타일을 사용하고, 카디널리티가 낮은 스타일에는 사용하지 마세요. 259 | 260 | > Why? Generating themed stylesheets can be expensive, so they are best for discrete sets of styles. 261 | 262 | > 왜? 테마 스타일시트를 만드는 것은 비용이 많이 들 수 있기 때문에, 개별 스타일 시트에 가장 적합합니다. 263 | 264 | ```jsx 265 | // bad 266 | export default function MyComponent({ spacing }) { 267 | return ( 268 |
269 | ); 270 | } 271 | 272 | // good 273 | function MyComponent({ styles, spacing }) { 274 | return ( 275 |
276 | ); 277 | } 278 | export default withStyles(() => ({ 279 | periodic: { 280 | display: 'table', 281 | }, 282 | }))(MyComponent); 283 | ``` 284 | 285 | ## 테마 (Themes) 286 | 287 | - Use an abstraction layer such as [react-with-styles](https://github.com/airbnb/react-with-styles) that enables theming. *react-with-styles gives us things like `withStyles()`, `ThemedStyleSheet`, and `css()` which are used in some of the examples in this document.* 288 | - 테마를 설정할 수 있게 해주는 [react-with-styles](https://github.com/airbnb/react-with-styles)와 같은 추상 레이어를 사용하세요. *react-with-styles은 `withStyles()`, `ThemedStyleSheet`, `css()`와 같이 이 문서의 예제에 사용되는 것들을 제공합니다.* 289 | 290 | > Why? It is useful to have a set of shared variables for styling your components. Using an abstraction layer makes this more convenient. Additionally, this can help prevent your components from being tightly coupled to any particular underlying implementation, which gives you more freedom. 291 | 292 | > 왜? 컴포넌트를 스타일링하기 위해 공유되는 변수들의 묶음을 사용하면 많은 도움이 되며, 추상 레이어를 사용하면 더 편리해집니다. 추가로, 이를 통해 컴포넌트가 특정 underlying implementation와 결합되지 않도록 방지할 수 있으며, 이는 더 많은 자유를 누릴 수 있게 해줍니다. 293 | 294 | - Define colors only in themes. 295 | - 테마에서만 색깔을 정의하세요. 296 | 297 | ```js 298 | // bad 299 | export default withStyles(() => ({ 300 | chuckNorris: { 301 | color: '#bada55', 302 | }, 303 | }))(MyComponent); 304 | 305 | // good 306 | export default withStyles(({ color }) => ({ 307 | chuckNorris: { 308 | color: color.badass, 309 | }, 310 | }))(MyComponent); 311 | ``` 312 | 313 | - Define fonts only in themes. 314 | - 테마에서만 폰트를 정의하세요. 315 | 316 | ```js 317 | // bad 318 | export default withStyles(() => ({ 319 | towerOfPisa: { 320 | fontStyle: 'italic', 321 | }, 322 | }))(MyComponent); 323 | 324 | // good 325 | export default withStyles(({ font }) => ({ 326 | towerOfPisa: { 327 | fontStyle: font.italic, 328 | }, 329 | }))(MyComponent); 330 | ``` 331 | 332 | - Define fonts as sets of related styles. 333 | - 관련 스타일의 묶음으로 폰트를 정의하세요. 334 | 335 | ```js 336 | // bad 337 | export default withStyles(() => ({ 338 | towerOfPisa: { 339 | fontFamily: 'Italiana, "Times New Roman", serif', 340 | fontSize: '2em', 341 | fontStyle: 'italic', 342 | lineHeight: 1.5, 343 | }, 344 | }))(MyComponent); 345 | 346 | // good 347 | export default withStyles(({ font }) => ({ 348 | towerOfPisa: { 349 | ...font.italian, 350 | }, 351 | }))(MyComponent); 352 | ``` 353 | 354 | - Define base grid units in theme (either as a value or a function that takes a multiplier). 355 | - 테마에서 그리드를 정의하세요. (배수를 취하는 함수나 값으로) 356 | 357 | ```js 358 | // bad 359 | export default withStyles(() => ({ 360 | rip: { 361 | bottom: '-6912px', // 6 feet 362 | }, 363 | }))(MyComponent); 364 | 365 | // good 366 | export default withStyles(({ units }) => ({ 367 | rip: { 368 | bottom: units(864), // 6 feet, assuming our unit is 8px 369 | }, 370 | }))(MyComponent); 371 | 372 | // good 373 | export default withStyles(({ unit }) => ({ 374 | rip: { 375 | bottom: 864 * unit, // 6 feet, assuming our unit is 8px 376 | }, 377 | }))(MyComponent); 378 | ``` 379 | 380 | - Define media queries only in themes. 381 | - 테마에서만 미디어 쿼리를 정의하세요. 382 | 383 | ```js 384 | // bad 385 | export default withStyles(() => ({ 386 | container: { 387 | width: '100%', 388 | 389 | '@media (max-width: 1047px)': { 390 | width: '50%', 391 | }, 392 | }, 393 | }))(MyComponent); 394 | 395 | // good 396 | export default withStyles(({ breakpoint }) => ({ 397 | container: { 398 | width: '100%', 399 | 400 | [breakpoint.medium]: { 401 | width: '50%', 402 | }, 403 | }, 404 | }))(MyComponent); 405 | ``` 406 | 407 | - Define tricky fallback properties in themes. 408 | - 테마에서 tricky fallback 속성을 정의하세요. 409 | 410 | > Why? Many CSS-in-JavaScript implementations merge style objects together which makes specifying fallbacks for the same property (e.g. `display`) a little tricky. To keep the approach unified, put these fallbacks in the theme. 411 | 412 | > 왜? 많은 CSS-in-JavaScript 구현은 동일한 속성에 대한 fallback을 지정하는 스타일 객체를 함께 병합합니다. (e.g. `display`) 접근 방식을 통합적으로 유지하려면, 이러한 fallback을 테마에 두세요. 413 | 414 | ```js 415 | // bad 416 | export default withStyles(() => ({ 417 | .muscles { 418 | display: 'flex', 419 | }, 420 | 421 | .muscles_fallback { 422 | 'display ': 'table', 423 | }, 424 | }))(MyComponent); 425 | 426 | // good 427 | export default withStyles(({ fallbacks }) => ({ 428 | .muscles { 429 | display: 'flex', 430 | }, 431 | 432 | .muscles_fallback { 433 | [fallbacks.display]: 'table', 434 | }, 435 | }))(MyComponent); 436 | 437 | // good 438 | export default withStyles(({ fallback }) => ({ 439 | .muscles { 440 | display: 'flex', 441 | }, 442 | 443 | .muscles_fallback { 444 | [fallback('display')]: 'table', 445 | }, 446 | }))(MyComponent); 447 | ``` 448 | 449 | - Create as few custom themes as possible. Many applications may only have one theme. 450 | - 가능한 적은 커스텀 테마를 만드세요. 많은 어플리케이션이 오직 한가지의 테마만을 가지고 있습니다. 451 | 452 | - Namespace custom theme settings under a nested object with a unique and descriptive key. 453 | - 네임스페이스 커스텀 테마 설정은 고유하고 설명적인 키와 함께 중첩된 객체에 안에 두세요. 454 | 455 | ```js 456 | // bad 457 | ThemedStyleSheet.registerTheme('mySection', { 458 | mySectionPrimaryColor: 'green', 459 | }); 460 | 461 | // good 462 | ThemedStyleSheet.registerTheme('mySection', { 463 | mySection: { 464 | primaryColor: 'green', 465 | }, 466 | }); 467 | ``` 468 | 469 | --- 470 | 471 | CSS puns adapted from [Saijo George](https://saijogeorge.com/css-puns/). -------------------------------------------------------------------------------- /es5-deprecated/README.md: -------------------------------------------------------------------------------- 1 | [원문:https://github.com/airbnb/javascript](https://github.com/airbnb/javascript) 2 | 3 | # Airbnb JavaScript 스타일 가이드() { 4 | 5 | 6 | ## 목차 7 | 8 | 1. [Types](#types) 9 | 1. [Objects](#objects) 10 | 1. [Arrays](#arrays) 11 | 1. [Strings](#strings) 12 | 1. [Functions](#functions) 13 | 1. [Properties](#properties) 14 | 1. [Variables](#variables) 15 | 1. [Hoisting](#hoisting) 16 | 1. [Conditional Expressions & Equality](#conditionals) 17 | 1. [Blocks](#blocks) 18 | 1. [Comments](#comments) 19 | 1. [Whitespace](#whitespace) 20 | 1. [Commas](#commas) 21 | 1. [Semicolons](#semicolons) 22 | 1. [Type Casting & Coercion](#type-coercion) 23 | 1. [Naming Conventions](#naming-conventions) 24 | 1. [Accessors](#accessors) 25 | 1. [Constructors](#constructors) 26 | 1. [Events](#events) 27 | 1. [Modules](#modules) 28 | 1. [jQuery](#jquery) 29 | 1. [ES5 Compatibility](#es5) 30 | 1. [Testing](#testing) 31 | 1. [Performance](#performance) 32 | 1. [Resources](#resources) 33 | 1. [In the Wild](#in-the-wild) 34 | 1. [Translation](#translation) 35 | 1. [The JavaScript Style Guide Guide](#guide-guide) 36 | 1. [Contributors](#contributors) 37 | 1. [License](#license) 38 | 39 | ## Types [원문](https://github.com/airbnb/javascript#types) 40 | 41 | - **Primitives**: primitive type은 그 값을 직접 조작합니다. 42 | 43 | + `string` 44 | + `number` 45 | + `boolean` 46 | + `null` 47 | + `undefined` 48 | 49 | ```javascript 50 | var foo = 1, 51 | bar = foo; 52 | 53 | bar = 9; 54 | 55 | console.log(foo, bar); // => 1, 9 56 | ``` 57 | - **Complex**: 참조형(Complex)은 참조를 통해 값을 조작합니다. 58 | 59 | + `object` 60 | + `array` 61 | + `function` 62 | 63 | ```javascript 64 | var foo = [1, 2], 65 | bar = foo; 66 | 67 | bar[0] = 9; 68 | 69 | console.log(foo[0], bar[0]); // => 9, 9 70 | ``` 71 | 72 | **[[↑]](#TOC)** 73 | 74 | ## Objects [원문](https://github.com/airbnb/javascript#objects) 75 | 76 | - Object를 만들 때는 리터럴 구문을 사용하십시오. 77 | 78 | ```javascript 79 | // bad 80 | var item = new Object(); 81 | 82 | // good 83 | var item = {}; 84 | ``` 85 | 86 | - [예약어(reserved words)](http://es5.github.io/#x7.6.1)를 키로 사용하지 마십시오. 이것은 IE8에서 동작하지 않습니다. [More info](https://github.com/airbnb/javascript/issues/61) 87 | 88 | ```javascript 89 | // bad 90 | var superman = { 91 | default: { clark: 'kent' }, 92 | private: true 93 | }; 94 | 95 | // good 96 | var superman = { 97 | defaults: { clark: 'kent' }, 98 | hidden: true 99 | }; 100 | ``` 101 | 102 | - 예약어 대신 알기 쉬운 동의어(readable synonyms)를 사용하십시오. 103 | 104 | ```javascript 105 | // bad 106 | var superman = { 107 | class: 'alien' 108 | }; 109 | 110 | // bad 111 | var superman = { 112 | klass: 'alien' 113 | }; 114 | 115 | // good 116 | var superman = { 117 | type: 'alien' 118 | }; 119 | 120 | ``` 121 | **[[↑]](#TOC)** 122 | 123 | ## Arrays [원문](https://github.com/airbnb/javascript#arrays) 124 | 125 | - 배열을 만들 때 리터럴 구문을 사용하십시오. 126 | 127 | ```javascript 128 | // bad 129 | var items = new Array(); 130 | 131 | // good 132 | var items = []; 133 | ``` 134 | 135 | - 길이를 알 수없는 경우는 Array#push를 사용하십시오. 136 | 137 | ```javascript 138 | var someStack = []; 139 | 140 | 141 | // bad 142 | someStack[someStack.length] = 'abracadabra'; 143 | 144 | // good 145 | someStack.push('abracadabra'); 146 | ``` 147 | 148 | - 배열을 복사 할 필요가있는 경우 Array#slice를 사용하십시오. [jsPerf](http://jsperf.com/converting-arguments-to-an-array/7) 149 | 150 | ```javascript 151 | var len = items.length, 152 | itemsCopy = [], 153 | i; 154 | 155 | // bad 156 | for (i = 0; i < len; i++) { 157 | itemsCopy[i] = items[i]; 158 | } 159 | 160 | // good 161 | itemsCopy = items.slice(); 162 | ``` 163 | 164 | - Array와 비슷한(Array-Like)한 Object를 Array에 변환하는 경우는 Array#slice를 사용하십시오. 165 | 166 | ```javascript 167 | function trigger() { 168 | var args = Array.prototype.slice.call(arguments); 169 | ... 170 | } 171 | ``` 172 | 173 | **[[↑]](#TOC)** 174 | 175 | 176 | ## Strings [원문](https://github.com/airbnb/javascript#strings) 177 | 178 | - 문자열은 작은 따옴표`''`를 사용하십시오. 179 | 180 | ```javascript 181 | // bad 182 | var name = "Bob Parr"; 183 | 184 | // good 185 | var name = 'Bob Parr'; 186 | 187 | // bad 188 | var fullName = "Bob " + this.lastName; 189 | 190 | // good 191 | var fullName = 'Bob ' + this.lastName; 192 | ``` 193 | 194 | - 80 문자 이상의 문자열은 문자열 연결을 사용하여 여러 줄에 걸쳐 기술 할 필요가 있습니다. 195 | - Note : 문자열 연결을 많이하면 성능에 영향을 줄 수 있습니다. [jsPerf](http://jsperf.com/ya-string-concat) & [Discussion](https://github.com/airbnb/javascript/issues/40) 196 | 197 | ```javascript 198 | // bad 199 | var 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.'; 200 | 201 | // bad 202 | var errorMessage = 'This is a super long error that \ 203 | was thrown because of Batman. \ 204 | When you stop to think about \ 205 | how Batman had anything to do \ 206 | with this, you would get nowhere \ 207 | fast.'; 208 | 209 | 210 | // good 211 | var errorMessage = 'This is a super long error that ' + 212 | 'was thrown because of Batman.' + 213 | 'When you stop to think about ' + 214 | 'how Batman had anything to do ' + 215 | 'with this, you would get nowhere ' + 216 | 'fast.'; 217 | ``` 218 | 219 | - 프로그램에서 문자열을 생성 할 필요가 있는 경우 (특히 IE는) 문자열 연결 대신 Array#join을 사용하십시오. [jsPerf](http://jsperf.com/string-vs-array-concat/2). 220 | 221 | ```javascript 222 | var items, 223 | messages, 224 | length, 225 | i; 226 | 227 | messages = [{ 228 | state: 'success', 229 | message: 'This one worked.' 230 | },{ 231 | state: 'success', 232 | message: 'This one worked as well.' 233 | },{ 234 | state: 'error', 235 | message: 'This one did not work.' 236 | }]; 237 | 238 | length = messages.length; 239 | 240 | // bad 241 | function inbox(messages) { 242 | items = ''; 249 | } 250 | 251 | // good 252 | function inbox(messages) { 253 | items = []; 254 | 255 | for (i = 0; i < length; i++) { 256 | items[i] = messages[i].message; 257 | } 258 | 259 | return ''; 260 | } 261 | ``` 262 | 263 | **[[↑]](#TOC)** 264 | 265 | 266 | ## Functions [원문](https://github.com/airbnb/javascript#functions) 267 | 268 | - 함수식(Function expressions) 269 | 270 | ```javascript 271 | // 익명함수식(anonymous function expression) 272 | var anonymous = function() { 273 | return true; 274 | }; 275 | 276 | // 명명된 함수식(named function expression) 277 | var named = function named() { 278 | return true; 279 | }; 280 | 281 | // 즉시실행 함수식(immediately-invoked function expression (IIFE)) 282 | (function() { 283 | console.log('Welcome to the Internet. Please follow me.'); 284 | })(); 285 | ``` 286 | 287 | - (if 및 while 등) 블록 내에서 변수에 함수를 할당하는 대신 함수를 선언하지 마십시오. 브라우저는 허용하지만 (마치 'bad news bears'처럼) 모두 다른 방식으로 해석됩니다. 288 | - **Note:** ECMA-262에서는`block`은 statements의 목록에 정의되어 있습니다 만, 함수 선언은 statements가 없습니다. [이 문제는 ECMA-262의 설명을 참조하십시오. ](http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf#page=97). 289 | 290 | ```javascript 291 | // bad 292 | if (currentUser) { 293 | function test() { 294 | console.log('Nope.'); 295 | } 296 | } 297 | 298 | // good 299 | var test; 300 | if (currentUser) { 301 | test = function test() { 302 | console.log('Yup.'); 303 | }; 304 | } 305 | ``` 306 | 307 | - 매개 변수(parameter)에 `arguments`를 절대 지정하지 마십시오. 이것은 함수 범위로 전달 될`arguments`객체의 참조를 덮어 쓸 것입니다. 308 | 309 | ```javascript 310 | // bad 311 | function nope(name, options, arguments) { 312 | // ...stuff... 313 | } 314 | 315 | // good 316 | function yup(name, options, args) { 317 | // ...stuff... 318 | } 319 | ``` 320 | 321 | **[[↑]](#TOC)** 322 | 323 | 324 | 325 | ## Properties [원문](https://github.com/airbnb/javascript#properties) 326 | 327 | - 속성에 액세스하려면 도트`.`를 사용하십시오. 328 | 329 | ```javascript 330 | var luke = { 331 | jedi: true, 332 | age: 28 333 | }; 334 | 335 | // bad 336 | var isJedi = luke['jedi']; 337 | 338 | // good 339 | var isJedi = luke.jedi; 340 | ``` 341 | 342 | - 변수를 사용하여 속성에 접근하려면 대괄호`[]`을 사용하십시오. 343 | 344 | ```javascript 345 | var luke = { 346 | jedi: true, 347 | age: 28 348 | }; 349 | 350 | function getProp(prop) { 351 | return luke[prop]; 352 | } 353 | 354 | var isJedi = getProp('jedi'); 355 | ``` 356 | 357 | **[[↑]](#TOC)** 358 | 359 | 360 | ## Variables [원문](https://github.com/airbnb/javascript#variables) 361 | 362 | - 변수를 선언 할 때는 항상 `var`를 사용하십시오. 그렇지 않으면 전역 변수로 선언됩니다. 전역 네임 스페이스를 오염시키지 않도록 Captain Planet도 경고하고 있습니다. 363 | 364 | ```javascript 365 | // bad 366 | superPower = new SuperPower(); 367 | 368 | // good 369 | var superPower = new SuperPower(); 370 | ``` 371 | 372 | - 여러 변수를 선언하려면 하나의 `var`를 사용하여 변수마다 줄바꿈하여 선언하십시오. 373 | 374 | ```javascript 375 | // bad 376 | var items = getItems(); 377 | var goSportsTeam = true; 378 | var dragonball = 'z'; 379 | 380 | // good 381 | var items = getItems(), 382 | goSportsTeam = true, 383 | dragonball = 'z'; 384 | ``` 385 | 386 | - 정의되지 않은 변수를 마지막으로 선언하십시오. 이것은 나중에 이미 할당된 변수 중 하나를 지정해야하는 경우에 유용합니다. 387 | 388 | ```javascript 389 | // bad 390 | var i, len, dragonball, 391 | items = getItems(), 392 | goSportsTeam = true; 393 | 394 | // bad 395 | var i, items = getItems(), 396 | dragonball, 397 | goSportsTeam = true, 398 | len; 399 | 400 | // good 401 | var items = getItems(), 402 | goSportsTeam = true, 403 | dragonball, 404 | length, 405 | i; 406 | ``` 407 | 408 | - 변수의 할당은 스코프의 시작 부분에서 해주십시오. 이것은 변수 선언과 Hoisting 관련 문제를 해결합니다. 409 | 410 | ```javascript 411 | // bad 412 | function() { 413 | test(); 414 | console.log('doing stuff..'); 415 | 416 | //..other stuff.. 417 | 418 | var name = getName(); 419 | 420 | if (name === 'test') { 421 | return false; 422 | } 423 | 424 | return name; 425 | } 426 | 427 | // good 428 | function() { 429 | var name = getName(); 430 | 431 | test(); 432 | console.log('doing stuff..'); 433 | 434 | //..other stuff.. 435 | 436 | if (name === 'test') { 437 | return false; 438 | } 439 | 440 | return name; 441 | } 442 | 443 | // bad 444 | function() { 445 | var name = getName(); 446 | 447 | if (!arguments.length) { 448 | return false; 449 | } 450 | 451 | return true; 452 | } 453 | 454 | // good 455 | function() { 456 | if (!arguments.length) { 457 | return false; 458 | } 459 | 460 | var name = getName(); 461 | 462 | return true; 463 | } 464 | ``` 465 | 466 | **[[↑]](#TOC)** 467 | 468 | 469 | ## Hoisting [원문](https://github.com/airbnb/javascript#hoisting) 470 | 471 | - 해당 스코프의 시작 부분에 Hoist된 변수선언은 할당되지 않습니다. 472 | 473 | ```javascript 474 | // (notDefined가 전역 변수에 존재하지 않는다고 가정했을 경우) 475 | // 이것은 동작하지 않습니다. 476 | function example() { 477 | console.log(notDefined); // => throws a ReferenceError 478 | } 479 | 480 | // 그 변수를 참조하는 코드 후에 그 변수를 선언 한 경우 481 | // 변수가 Hoist된 상태에서 작동합니다. 482 | // Note : `true`라는 값 자체는 Hoist되지 않습니다. 483 | function example() { 484 | console.log(declaredButNotAssigned); // => undefined 485 | var declaredButNotAssigned = true; 486 | } 487 | 488 | // 인터 프린터는 변수 선언을 스코프의 시작 부분에 Hoist합니다. 489 | // 위의 예는 다음과 같이 다시 작성할 수 있습니다. 490 | function example() { 491 | var declaredButNotAssigned; 492 | console.log(declaredButNotAssigned); // => undefined 493 | declaredButNotAssigned = true; 494 | } 495 | ``` 496 | 497 | - 익명 함수의 경우 함수가 할당되기 전에 변수가 Hoist될 수 있습니다. 498 | 499 | ```javascript 500 | function example() { 501 | console.log(anonymous); // => undefined 502 | 503 | anonymous(); // => TypeError anonymous is not a function 504 | 505 | var anonymous = function() { 506 | console.log('anonymous function expression'); 507 | }; 508 | } 509 | ``` 510 | 511 | - 명명 된 함수의 경우도 마찬가지로 변수가 Hoist될 수 있습니다. 함수 이름과 함수 본체는 Hoist되지 않습니다. 512 | 513 | ```javascript 514 | function example() { 515 | console.log(named); // => undefined 516 | 517 | named(); // => TypeError named is not a function 518 | 519 | superPower(); // => ReferenceError superPower is not defined 520 | 521 | var named = function superPower() { 522 | console.log('Flying'); 523 | }; 524 | } 525 | 526 | // 함수이름과 변수이름이 같은 경우에도 같은 일이 일어납니다. 527 | function example() { 528 | console.log(named); // => undefined 529 | 530 | named(); // => TypeError named is not a function 531 | 532 | var named = function named() { 533 | console.log('named'); 534 | } 535 | } 536 | ``` 537 | 538 | - 함수 선언은 함수이름과 함수본문이 Hoist됩니다. 539 | 540 | ```javascript 541 | function example() { 542 | superPower(); // => Flying 543 | 544 | function superPower() { 545 | console.log('Flying'); 546 | } 547 | } 548 | ``` 549 | 550 | - 더 자세한 정보는 [Ben Cherry](http://www.adequatelygood.com/)의 [JavaScript Scoping & Hoisting](http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting)를 참조하십시오. 551 | 552 | **[[↑]](#TOC)** 553 | 554 | 555 | 556 | ## Conditional Expressions & Equality(조건식과 등가식) [원문](https://github.com/airbnb/javascript#conditionals) 557 | 558 | - `==` 나 `!=` 보다는 `===` 와 `!==` 를 사용해 주십시오 559 | - 조건식은`ToBoolean` 메소드에 의해 엄밀하게 비교됩니다. 항상 이 간단한 규칙에 따라 주십시오. 560 | 561 | + **Objects** 는 **true** 로 평가됩니다. 562 | + **undefined** 는 **false** 로 평가됩니다. 563 | + **null** 는 **false** 로 평가됩니다. 564 | + **Booleans** 는 **boolean형의 값** 으로 평가됩니다. 565 | + **Numbers** 는 **true** 로 평가됩니다. 하지만 **+0, -0, or NaN** 의 경우는 **false** 입니다. 566 | + **Strings** 는 **true** 로 평가됩니다. 하지만 빈문자 `''` 의 경우는 **false** 입니다. 567 | 568 | ```javascript 569 | if ([0]) { 570 | // true 571 | // Array는 Object 이므로 true 로 평가됩니다. 572 | } 573 | ``` 574 | 575 | - 짧은형식을 사용하십시오. 576 | 577 | ```javascript 578 | // bad 579 | if (name !== '') { 580 | // ...stuff... 581 | } 582 | 583 | // good 584 | if (name) { 585 | // ...stuff... 586 | } 587 | 588 | // bad 589 | if (collection.length > 0) { 590 | // ...stuff... 591 | } 592 | 593 | // good 594 | if (collection.length) { 595 | // ...stuff... 596 | } 597 | ``` 598 | 599 | - 더 자세한 정보는 Angus Croll 의 [Truth Equality and JavaScript](http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108)를 참고해 주십시오. 600 | 601 | **[[↑]](#TOC)** 602 | 603 | 604 | ## Blocks [원문](https://github.com/airbnb/javascript#blocks) 605 | 606 | - 복수행 블록은 중괄호 ({})를 사용하십시오. 607 | 608 | ```javascript 609 | // bad 610 | if (test) 611 | return false; 612 | 613 | // good 614 | if (test) return false; 615 | 616 | // good 617 | if (test) { 618 | return false; 619 | } 620 | 621 | // bad 622 | function() { return false; } 623 | 624 | // good 625 | function() { 626 | return false; 627 | } 628 | ``` 629 | 630 | **[[↑]](#TOC)** 631 | 632 | 633 | ## Comments [원문](https://github.com/airbnb/javascript#comments) 634 | 635 | - 복수행의 코멘트는 `/** ... */` 를 사용해 주십시오. 그 안에는 설명과 모든 매개 변수와 반환 값에 대한 형식과 값을 설명합니다. 636 | 637 | ```javascript 638 | // bad 639 | // make() returns a new element 640 | // based on the passed in tag name 641 | // 642 | // @param tag 643 | // @return element 644 | function make(tag) { 645 | 646 | // ...stuff... 647 | 648 | return element; 649 | } 650 | 651 | // good 652 | /** 653 | * make() returns a new element 654 | * based on the passed in tag name 655 | * 656 | * @param tag 657 | * @return element 658 | */ 659 | function make(tag) { 660 | 661 | // ...stuff... 662 | 663 | return element; 664 | } 665 | ``` 666 | 667 | - 한 줄 주석에는`//`를 사용하십시오. 코멘트를 추가하고 싶은 코드의 상단에 작성하십시오. 또한 주석 앞에 빈 줄을 넣어주십시오. 668 | 669 | ```javascript 670 | // bad 671 | var active = true; // is current tab 672 | 673 | // good 674 | // is current tab 675 | var active = true; 676 | 677 | // bad 678 | function getType() { 679 | console.log('fetching type...'); 680 | // set the default type to 'no type' 681 | var type = this._type || 'no type'; 682 | 683 | return type; 684 | } 685 | 686 | // good 687 | function getType() { 688 | console.log('fetching type...'); 689 | 690 | // set the default type to 'no type' 691 | var type = this._type || 'no type'; 692 | 693 | return type; 694 | } 695 | ``` 696 | 697 | - 문제를 지적하고 재고를 촉구하거나 문제에 대한 해결책을 제시하는 등 의견의 앞에 `FIXME` 나 `TODO`를 붙이는 것으로 다른 개발자의 빠른 이해를 도울 수 있습니다. 이러한 어떤 액션을 동반한다는 의미에서 일반 코멘트와는 다릅니다. 액션은 `FIXME - 해결책이 필요` 또는 `TODO - 구현이 필요` 입니다. 698 | 699 | - 문제에 대한 코멘트로 `// FIXME :`를 사용하십시오. 700 | 701 | ```javascript 702 | function Calculator() { 703 | 704 | // FIXME: 전역 변수를 사용해서는 안됩니다. 705 | total = 0; 706 | 707 | return this; 708 | } 709 | ``` 710 | 711 | - 문제 해결책에 대한 코멘트로 `// TODO :`를 사용하십시오. 712 | 713 | ```javascript 714 | function Calculator() { 715 | 716 | // TODO: total은 옵션 매개 변수로 설정되어야 함. 717 | this.total = 0; 718 | return this; 719 | } 720 | ``` 721 | 722 | **[[↑]](#TOC)** 723 | 724 | 725 | ## Whitespace [원문](https://github.com/airbnb/javascript#whitespace) 726 | 727 | - 탭에는 공백 2개를 설정하십시오. 728 | 729 | ```javascript 730 | // bad 731 | function() { 732 | ∙∙∙∙var name; 733 | } 734 | 735 | // bad 736 | function() { 737 | ∙var name; 738 | } 739 | 740 | // good 741 | function() { 742 | ∙∙var name; 743 | } 744 | ``` 745 | - 중괄호({})의 앞에 공백을 하나 넣어주십시오. 746 | 747 | ```javascript 748 | // bad 749 | function test(){ 750 | console.log('test'); 751 | } 752 | 753 | // good 754 | function test() { 755 | console.log('test'); 756 | } 757 | 758 | // bad 759 | dog.set('attr',{ 760 | age: '1 year', 761 | breed: 'Bernese Mountain Dog' 762 | }); 763 | 764 | // good 765 | dog.set('attr', { 766 | age: '1 year', 767 | breed: 'Bernese Mountain Dog' 768 | }); 769 | ``` 770 | - 파일의 마지막에는 빈 줄을 하나 넣어주십시오. 771 | 772 | ```javascript 773 | // bad 774 | (function(global) { 775 | // ...stuff... 776 | })(this); 777 | ``` 778 | 779 | ```javascript 780 | // good 781 | (function(global) { 782 | // ...stuff... 783 | })(this); 784 | 785 | ``` 786 | 787 | - 메소드 체인이 길어지는 경우 적절히 들여쓰기(indentation) 하십시오. 788 | 789 | ```javascript 790 | // bad 791 | $('#items').find('.selected').highlight().end().find('.open').updateCount(); 792 | 793 | // good 794 | $('#items') 795 | .find('.selected') 796 | .highlight() 797 | .end() 798 | .find('.open') 799 | .updateCount(); 800 | 801 | // bad 802 | var leds = stage.selectAll('.led').data(data).enter().append('svg:svg').class('led', true) 803 | .attr('width', (radius + margin) * 2).append('svg:g') 804 | .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')') 805 | .call(tron.led); 806 | 807 | // good 808 | var leds = stage.selectAll('.led') 809 | .data(data) 810 | .enter().append('svg:svg') 811 | .class('led', true) 812 | .attr('width', (radius + margin) * 2) 813 | .append('svg:g') 814 | .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')') 815 | .call(tron.led); 816 | ``` 817 | 818 | **[[↑]](#TOC)** 819 | 820 | ## Commas [원문](https://github.com/airbnb/javascript#commas) 821 | 822 | - 선두의 comma는 **하지마십시오.** 823 | 824 | ```javascript 825 | // bad 826 | var once 827 | , upon 828 | , aTime; 829 | 830 | // good 831 | var once, 832 | upon, 833 | aTime; 834 | 835 | // bad 836 | var hero = { 837 | firstName: 'Bob' 838 | , lastName: 'Parr' 839 | , heroName: 'Mr. Incredible' 840 | , superPower: 'strength' 841 | }; 842 | 843 | // good 844 | var hero = { 845 | firstName: 'Bob', 846 | lastName: 'Parr', 847 | heroName: 'Mr. Incredible', 848 | superPower: 'strength' 849 | }; 850 | ``` 851 | 852 | - 말미의 불필요한 쉼표도 **하지 마십시오.** 이것은 IE6/7과 quirksmode의 IE9에서 문제를 일으킬 수 있습니다. 853 | 또한 ES3의 일부 구현에서 불필요한 쉼표가 있는 경우, 배열 길이를 추가합니다. 854 | 이것은 ES5에서 분명해졌습니다.([source](http://es5.github.io/#D)): 855 | 856 | > 제 5 판에서는 말미의 불필요한 쉼표가 있는 ArrayInitialiser (배열 초기화 연산자)라도 배열에 길이를 추가하지 않는다는 사실을 명확히하고 있습니다. 이것은 제 3 판에서 의미적인 변경은 아닙니다만, 일부의 구현은 이전부터 이것을 오해하고 있었을지도 모릅니다. 857 | 858 | ```javascript 859 | // bad 860 | var hero = { 861 | firstName: 'Kevin', 862 | lastName: 'Flynn', 863 | }; 864 | 865 | var heroes = [ 866 | 'Batman', 867 | 'Superman', 868 | ]; 869 | 870 | // good 871 | var hero = { 872 | firstName: 'Kevin', 873 | lastName: 'Flynn' 874 | }; 875 | 876 | var heroes = [ 877 | 'Batman', 878 | 'Superman' 879 | ]; 880 | ``` 881 | 882 | **[[↑]](#TOC)** 883 | 884 | 885 | ## Semicolons [원문](https://github.com/airbnb/javascript#semicolons) 886 | 887 | - **네!(Yup.)** 888 | 889 | ```javascript 890 | // bad 891 | (function() { 892 | var name = 'Skywalker' 893 | return name 894 | })() 895 | 896 | // good 897 | (function() { 898 | var name = 'Skywalker'; 899 | return name; 900 | })(); 901 | 902 | // good 903 | ;(function() { 904 | var name = 'Skywalker'; 905 | return name; 906 | })(); 907 | ``` 908 | 909 | **[[↑]](#TOC)** 910 | 911 | 912 | ## Type Casting & Coercion(강제) [원문](https://github.com/airbnb/javascript#type-coercion) 913 | 914 | - 문의 시작 부분에서 형을 강제합니다. 915 | - Strings: 916 | 917 | ```javascript 918 | // => this.reviewScore = 9; 919 | 920 | // bad 921 | var totalScore = this.reviewScore + ''; 922 | 923 | // good 924 | var totalScore = '' + this.reviewScore; 925 | 926 | // bad 927 | var totalScore = '' + this.reviewScore + ' total score'; 928 | 929 | // good 930 | var totalScore = this.reviewScore + ' total score'; 931 | ``` 932 | 933 | - 숫자는`parseInt`를 사용하십시오. 항상 형변환을 위한 기수(radix)를 인수로 전달하십시오. 934 | 935 | ```javascript 936 | var inputValue = '4'; 937 | 938 | // bad 939 | var val = new Number(inputValue); 940 | 941 | // bad 942 | var val = +inputValue; 943 | 944 | // bad 945 | var val = inputValue >> 0; 946 | 947 | // bad 948 | var val = parseInt(inputValue); 949 | 950 | // good 951 | var val = Number(inputValue); 952 | 953 | // good 954 | var val = parseInt(inputValue, 10); 955 | ``` 956 | 957 | - 어떤 이유에 의해 `parseInt` 가 병목이 되고, [성능적인 이유](http://jsperf.com/coercion-vs-casting/3)로 Bitshift를 사용할 필요가 있을 경우, 958 | 하려고 하는것에 대해, why(왜)와 what(무엇)의 설명을 코멘트로 남겨주십시오. 959 | 960 | ```javascript 961 | // good 962 | /** 963 | * parseInt가 병목을 일으키므로 964 | * Bitshift로 문자열을 수치로 강제적으로 변환하는 방법으로 965 | * 성능을 개선시킵니다. 966 | */ 967 | var val = inputValue >> 0; 968 | ``` 969 | 970 | - Booleans: 971 | 972 | ```javascript 973 | var age = 0; 974 | 975 | // bad 976 | var hasAge = new Boolean(age); 977 | 978 | // good 979 | var hasAge = Boolean(age); 980 | 981 | // good 982 | var hasAge = !!age; 983 | ``` 984 | 985 | **[[↑]](#TOC)** 986 | 987 | 988 | ## Naming Conventions [원문](https://github.com/airbnb/javascript#naming-conventions) 989 | 990 | - 한문자 이름은 피하십시오. 이름에서 의도를 읽을 수 있도록 하십시오. 991 | 992 | ```javascript 993 | // bad 994 | function q() { 995 | // ...stuff... 996 | } 997 | 998 | // good 999 | function query() { 1000 | // ..stuff.. 1001 | } 1002 | ``` 1003 | 1004 | - Object, 함수, 그리고 인스턴스로는 camelCase를 사용하십시오. 1005 | 1006 | ```javascript 1007 | // bad 1008 | var OBJEcttsssss = {}; 1009 | var this_is_my_object = {}; 1010 | var this-is-my-object = {}; 1011 | function c() {}; 1012 | var u = new user({ 1013 | name: 'Bob Parr' 1014 | }); 1015 | 1016 | // good 1017 | var thisIsMyObject = {}; 1018 | function thisIsMyFunction() {}; 1019 | var user = new User({ 1020 | name: 'Bob Parr' 1021 | }); 1022 | ``` 1023 | 1024 | - Class와 생성자에는 PascalCase를 사용하십시오. 1025 | 1026 | ```javascript 1027 | // bad 1028 | function user(options) { 1029 | this.name = options.name; 1030 | } 1031 | 1032 | var bad = new user({ 1033 | name: 'nope' 1034 | }); 1035 | 1036 | // good 1037 | function User(options) { 1038 | this.name = options.name; 1039 | } 1040 | 1041 | var good = new User({ 1042 | name: 'yup' 1043 | }); 1044 | ``` 1045 | 1046 | - private 속성 이름은 밑줄 `_` 을 사용하십시오. 1047 | 1048 | ```javascript 1049 | // bad 1050 | this.__firstName__ = 'Panda'; 1051 | this.firstName_ = 'Panda'; 1052 | 1053 | // good 1054 | this._firstName = 'Panda'; 1055 | ``` 1056 | 1057 | - `this`의 참조를 저장할 때 `_this` 를 사용하십시오. 1058 | 1059 | ```javascript 1060 | // bad 1061 | function() { 1062 | var self = this; 1063 | return function() { 1064 | console.log(self); 1065 | }; 1066 | } 1067 | 1068 | // bad 1069 | function() { 1070 | var that = this; 1071 | return function() { 1072 | console.log(that); 1073 | }; 1074 | } 1075 | 1076 | // good 1077 | function() { 1078 | var _this = this; 1079 | return function() { 1080 | console.log(_this); 1081 | }; 1082 | } 1083 | ``` 1084 | 1085 | - 함수에 이름을 붙여주십시오. 이것은 stack traces를 추적하기 쉽게하기 때문입니다. 1086 | 1087 | ```javascript 1088 | // bad 1089 | var log = function(msg) { 1090 | console.log(msg); 1091 | }; 1092 | 1093 | // good 1094 | var log = function log(msg) { 1095 | console.log(msg); 1096 | }; 1097 | ``` 1098 | 1099 | **[[↑]](#TOC)** 1100 | 1101 | 1102 | ## Accessors [원문](https://github.com/airbnb/javascript#accessors) 1103 | 1104 | - 속성을 위한 접근자(Accessor) 함수는 필요 없습니다. 1105 | - 접근자 함수가 필요한 경우 `getVal()` 이나 `setVal('hello')` 라고 사용합니다. 1106 | 1107 | ```javascript 1108 | // bad 1109 | dragon.age(); 1110 | 1111 | // good 1112 | dragon.getAge(); 1113 | 1114 | // bad 1115 | dragon.age(25); 1116 | 1117 | // good 1118 | dragon.setAge(25); 1119 | ``` 1120 | 1121 | - 속성이 boolean의 경우 `isVal()` 이나 `hasVal()` 라고 사용합니다. 1122 | ```javascript 1123 | // bad 1124 | if (!dragon.age()) { 1125 | return false; 1126 | } 1127 | 1128 | // good 1129 | if (!dragon.hasAge()) { 1130 | return false; 1131 | } 1132 | ``` 1133 | 1134 | - 일관된다면 `get()` 이나 `set()` 이라는 함수를 작성해도 좋습니다. 1135 | 1136 | ```javascript 1137 | function Jedi(options) { 1138 | options || (options = {}); 1139 | var lightsaber = options.lightsaber || 'blue'; 1140 | this.set('lightsaber', lightsaber); 1141 | } 1142 | 1143 | Jedi.prototype.set = function(key, val) { 1144 | this[key] = val; 1145 | }; 1146 | 1147 | Jedi.prototype.get = function(key) { 1148 | return this[key]; 1149 | }; 1150 | ``` 1151 | 1152 | **[[↑]](#TOC)** 1153 | 1154 | 1155 | ## Constructors [원문](https://github.com/airbnb/javascript#constructors) 1156 | 1157 | - 새 Object에서 프로토타입을 재정의하는 것이 아니라, 프로토타입 객체에 메서드를 추가해 주십시오. 프로토타입을 재정의하면 상속이 불가능합니다. 프로토타입을 리셋하는것으로 베이스 클래스를 재정의 할 수 있습니다. 1158 | 1159 | ```javascript 1160 | function Jedi() { 1161 | console.log('new jedi'); 1162 | } 1163 | 1164 | // bad 1165 | Jedi.prototype = { 1166 | fight: function fight() { 1167 | console.log('fighting'); 1168 | }, 1169 | 1170 | block: function block() { 1171 | console.log('blocking'); 1172 | } 1173 | }; 1174 | 1175 | // good 1176 | Jedi.prototype.fight = function fight() { 1177 | console.log('fighting'); 1178 | }; 1179 | 1180 | Jedi.prototype.block = function block() { 1181 | console.log('blocking'); 1182 | }; 1183 | ``` 1184 | 1185 | - 메소드의 반환 값으로 `this`를 반환함으로써 메소드 체인을 할 수 있습니다. 1186 | 1187 | ```javascript 1188 | // bad 1189 | Jedi.prototype.jump = function() { 1190 | this.jumping = true; 1191 | return true; 1192 | }; 1193 | 1194 | Jedi.prototype.setHeight = function(height) { 1195 | this.height = height; 1196 | }; 1197 | 1198 | var luke = new Jedi(); 1199 | luke.jump(); // => true 1200 | luke.setHeight(20) // => undefined 1201 | 1202 | // good 1203 | Jedi.prototype.jump = function() { 1204 | this.jumping = true; 1205 | return this; 1206 | }; 1207 | 1208 | Jedi.prototype.setHeight = function(height) { 1209 | this.height = height; 1210 | return this; 1211 | }; 1212 | 1213 | var luke = new Jedi(); 1214 | 1215 | luke.jump() 1216 | .setHeight(20); 1217 | ``` 1218 | 1219 | 1220 | - 독자적인 toString()을 만들 수도 있지만 올바르게 작동하는지, 부작용이 없는 것만은 확인해 주십시오. 1221 | 1222 | ```javascript 1223 | function Jedi(options) { 1224 | options || (options = {}); 1225 | this.name = options.name || 'no name'; 1226 | } 1227 | 1228 | Jedi.prototype.getName = function getName() { 1229 | return this.name; 1230 | }; 1231 | 1232 | Jedi.prototype.toString = function toString() { 1233 | return 'Jedi - ' + this.getName(); 1234 | }; 1235 | ``` 1236 | 1237 | **[[↑]](#TOC)** 1238 | 1239 | ## Events 1240 | 1241 | - (DOM 이벤트나 Backbone events와 같은 고유의) 이벤트 탑재체(payloads)의 값을 전달하는 경우 원시 값(raw value) 대신 해시 인수(hash)를 전달합니다. 1242 | 이렇게하는 것으로 나중에 개발자가 이벤트와 관련된 모든 핸들러를 찾아 업데이트 하지 않고 이벤트 탑재체(payloads)에 값을 추가 할 수 있습니다. 예를 들어, 이것 대신 : 1243 | 1244 | ```js 1245 | // bad 1246 | $(this).trigger('listingUpdated', listing.id); 1247 | 1248 | ... 1249 | 1250 | $(this).on('listingUpdated', function(e, listingId) { 1251 | // do something with listingId 1252 | }); 1253 | ``` 1254 | 1255 | 이쪽을 선호합니다.: 1256 | 1257 | ```js 1258 | // good 1259 | $(this).trigger('listingUpdated', { listingId : listing.id }); 1260 | 1261 | ... 1262 | 1263 | $(this).on('listingUpdated', function(e, data) { 1264 | // do something with data.listingId 1265 | }); 1266 | ``` 1267 | 1268 | **[[↑]](#TOC)** 1269 | 1270 | ## Modules [원문](https://github.com/airbnb/javascript#modules) 1271 | 1272 | - 모듈의 시작은 `!` 로 시작하십시오. 이것은 문말에 세미콜론을 넣는것을 잊은 모듈을 연결할때 런타임 오류가 발생하지 않기 때문입니다. 1273 | - 파일 이름은 camelCase를 사용하여 같은 이름의 폴더에 저장해주십시오. 또한 단독으로 공개할 경우 이름을 일치시켜주십시오. 1274 | - noConflict() 라는 명칭으로 (이름이 겹쳐 덮어 써지기 전의) 모듈을 반환하는 메서드를 추가해주십시오. 1275 | - 항상 모듈의 시작 부분에서` 'use strict';`를 선언해주십시오. 1276 | 1277 | ```javascript 1278 | // fancyInput/fancyInput.js 1279 | 1280 | !function(global) { 1281 | 'use strict'; 1282 | 1283 | var previousFancyInput = global.FancyInput; 1284 | 1285 | function FancyInput(options) { 1286 | this.options = options || {}; 1287 | } 1288 | 1289 | FancyInput.noConflict = function noConflict() { 1290 | global.FancyInput = previousFancyInput; 1291 | return FancyInput; 1292 | }; 1293 | 1294 | global.FancyInput = FancyInput; 1295 | }(this); 1296 | ``` 1297 | 1298 | **[[↑]](#TOC)** 1299 | 1300 | 1301 | ## jQuery [원문](https://github.com/airbnb/javascript#jquery) 1302 | 1303 | - jQuery Object의 변수 앞에는 `$`을 부여해 주십시오. 1304 | 1305 | ```javascript 1306 | // bad 1307 | var sidebar = $('.sidebar'); 1308 | 1309 | // good 1310 | var $sidebar = $('.sidebar'); 1311 | ``` 1312 | 1313 | - jQuery 쿼리결과를 캐시해주십시오. 1314 | 1315 | ```javascript 1316 | // bad 1317 | function setSidebar() { 1318 | $('.sidebar').hide(); 1319 | 1320 | // ...stuff... 1321 | 1322 | $('.sidebar').css({ 1323 | 'background-color': 'pink' 1324 | }); 1325 | } 1326 | 1327 | // good 1328 | function setSidebar() { 1329 | var $sidebar = $('.sidebar'); 1330 | $sidebar.hide(); 1331 | 1332 | // ...stuff... 1333 | 1334 | $sidebar.css({ 1335 | 'background-color': 'pink' 1336 | }); 1337 | } 1338 | ``` 1339 | 1340 | - DOM 검색은 Cascading `$('.sidebar ul')` 이나 parent > child `$('.sidebar > ul')` 를 사용해주십시오. [jsPerf](http://jsperf.com/jquery-find-vs-context-sel/16) 1341 | - jQuery Object 검색은 스코프가 붙은 `find`를 사용해주십시오. 1342 | 1343 | ```javascript 1344 | // bad 1345 | $('ul', '.sidebar').hide(); 1346 | 1347 | // bad 1348 | $('.sidebar').find('ul').hide(); 1349 | 1350 | // good 1351 | $('.sidebar ul').hide(); 1352 | 1353 | // good 1354 | $('.sidebar > ul').hide(); 1355 | 1356 | // good 1357 | $sidebar.find('ul'); 1358 | ``` 1359 | 1360 | **[[↑]](#TOC)** 1361 | 1362 | 1363 | ## ECMAScript 5 Compatibility [원문](https://github.com/airbnb/javascript#es5) 1364 | 1365 | - [Kangax](https://twitter.com/kangax/)의 ES5 [compatibility table](http://kangax.github.com/es5-compat-table/)를 참조해 주십시오. 1366 | 1367 | **[[↑]](#TOC)** 1368 | 1369 | 1370 | ## Testing [원문](https://github.com/airbnb/javascript#testing) 1371 | 1372 | - **네!(Yup.)** 1373 | 1374 | ```javascript 1375 | function() { 1376 | return true; 1377 | } 1378 | ``` 1379 | 1380 | **[[↑]](#TOC)** 1381 | 1382 | 1383 | ## Performance [원문](https://github.com/airbnb/javascript#performance) 1384 | 1385 | - [On Layout & Web Performance](http://kellegous.com/j/2013/01/26/layout-performance/) 1386 | - [String vs Array Concat](http://jsperf.com/string-vs-array-concat/2) 1387 | - [Try/Catch Cost In a Loop](http://jsperf.com/try-catch-in-loop-cost) 1388 | - [Bang Function](http://jsperf.com/bang-function) 1389 | - [jQuery Find vs Context, Selector](http://jsperf.com/jquery-find-vs-context-sel/13) 1390 | - [innerHTML vs textContent for script text](http://jsperf.com/innerhtml-vs-textcontent-for-script-text) 1391 | - [Long String Concatenation](http://jsperf.com/ya-string-concat) 1392 | - Loading... 1393 | 1394 | **[[↑]](#TOC)** 1395 | 1396 | 1397 | ## Resources [원문](https://github.com/airbnb/javascript#resources) 1398 | 1399 | 1400 | **Read This** 1401 | 1402 | - [Annotated ECMAScript 5.1](http://es5.github.com/) 1403 | 1404 | **Other Styleguides** 1405 | 1406 | - [Google JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml) 1407 | - [jQuery Core Style Guidelines](http://docs.jquery.com/JQuery_Core_Style_Guidelines) 1408 | - [Principles of Writing Consistent, Idiomatic JavaScript](https://github.com/rwldrn/idiomatic.js/) 1409 | 1410 | **Other Styles** 1411 | 1412 | - [Naming this in nested functions](https://gist.github.com/4135065) - Christian Johansen 1413 | - [Conditional Callbacks](https://github.com/airbnb/javascript/issues/52) 1414 | - [Popular JavaScript Coding Conventions on Github](http://sideeffect.kr/popularconvention/#javascript) 1415 | 1416 | **Further Reading** 1417 | 1418 | - [Understanding JavaScript Closures](http://javascriptweblog.wordpress.com/2010/10/25/understanding-javascript-closures/) - Angus Croll 1419 | - [Basic JavaScript for the impatient programmer](http://www.2ality.com/2013/06/basic-javascript.html) - Dr. Axel Rauschmayer 1420 | 1421 | **Books** 1422 | 1423 | - [JavaScript: The Good Parts](http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742) - Douglas Crockford 1424 | - [JavaScript Patterns](http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752) - Stoyan Stefanov 1425 | - [Pro JavaScript Design Patterns](http://www.amazon.com/JavaScript-Design-Patterns-Recipes-Problem-Solution/dp/159059908X) - Ross Harmes and Dustin Diaz 1426 | - [High Performance Web Sites: Essential Knowledge for Front-End Engineers](http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309) - Steve Souders 1427 | - [Maintainable JavaScript](http://www.amazon.com/Maintainable-JavaScript-Nicholas-C-Zakas/dp/1449327680) - Nicholas C. Zakas 1428 | - [JavaScript Web Applications](http://www.amazon.com/JavaScript-Web-Applications-Alex-MacCaw/dp/144930351X) - Alex MacCaw 1429 | - [Pro JavaScript Techniques](http://www.amazon.com/Pro-JavaScript-Techniques-John-Resig/dp/1590597273) - John Resig 1430 | - [Smashing Node.js: JavaScript Everywhere](http://www.amazon.com/Smashing-Node-js-JavaScript-Everywhere-Magazine/dp/1119962595) - Guillermo Rauch 1431 | - [Secrets of the JavaScript Ninja](http://www.amazon.com/Secrets-JavaScript-Ninja-John-Resig/dp/193398869X) - John Resig and Bear Bibeault 1432 | - [Human JavaScript](http://humanjavascript.com/) - Henrik Joreteg 1433 | - [Superhero.js](http://superherojs.com/) - Kim Joar Bekkelund, Mads Mobæk, & Olav Bjorkoy 1434 | - [JSBooks](http://jsbooks.revolunet.com/) 1435 | 1436 | **Blogs** 1437 | 1438 | - [DailyJS](http://dailyjs.com/) 1439 | - [JavaScript Weekly](http://javascriptweekly.com/) 1440 | - [JavaScript, JavaScript...](http://javascriptweblog.wordpress.com/) 1441 | - [Bocoup Weblog](http://weblog.bocoup.com/) 1442 | - [Adequately Good](http://www.adequatelygood.com/) 1443 | - [NCZOnline](http://www.nczonline.net/) 1444 | - [Perfection Kills](http://perfectionkills.com/) 1445 | - [Ben Alman](http://benalman.com/) 1446 | - [Dmitry Baranovskiy](http://dmitry.baranovskiy.com/) 1447 | - [Dustin Diaz](http://dustindiaz.com/) 1448 | - [nettuts](http://net.tutsplus.com/?s=javascript) 1449 | 1450 | **[[↑]](#TOC)** 1451 | 1452 | ## In the Wild 1453 | 1454 | This is a list of organizations that are using this style guide. Send us a pull request or open an issue and we'll add you to the list. 1455 | 1456 | - **Aan Zee**: [AanZee/javascript](https://github.com/AanZee/javascript) 1457 | - **Airbnb**: [airbnb/javascript](https://github.com/airbnb/javascript) 1458 | - **American Insitutes for Research**: [AIRAST/javascript](https://github.com/AIRAST/javascript) 1459 | - **Compass Learning**: [compasslearning/javascript-style-guide](https://github.com/compasslearning/javascript-style-guide) 1460 | - **ExactTarget**: [ExactTarget/javascript](https://github.com/ExactTarget/javascript) 1461 | - **GeneralElectric**: [GeneralElectric/javascript](https://github.com/GeneralElectric/javascript) 1462 | - **GoodData**: [gooddata/gdc-js-style](https://github.com/gooddata/gdc-js-style) 1463 | - **Grooveshark**: [grooveshark/javascript](https://github.com/grooveshark/javascript) 1464 | - **How About We**: [howaboutwe/javascript](https://github.com/howaboutwe/javascript) 1465 | - **Mighty Spring**: [mightyspring/javascript](https://github.com/mightyspring/javascript) 1466 | - **MinnPost**: [MinnPost/javascript](https://github.com/MinnPost/javascript) 1467 | - **ModCloth**: [modcloth/javascript](https://github.com/modcloth/javascript) 1468 | - **National Geographic**: [natgeo/javascript](https://github.com/natgeo/javascript) 1469 | - **National Park Service**: [nationalparkservice/javascript](https://github.com/nationalparkservice/javascript) 1470 | - **Razorfish**: [razorfish/javascript-style-guide](https://github.com/razorfish/javascript-style-guide) 1471 | - **Shutterfly**: [shutterfly/javascript](https://github.com/shutterfly/javascript) 1472 | - **Userify**: [userify/javascript](https://github.com/userify/javascript) 1473 | - **Zillow**: [zillow/javascript](https://github.com/zillow/javascript) 1474 | - **ZocDoc**: [ZocDoc/javascript](https://github.com/ZocDoc/javascript) 1475 | 1476 | ## Translation 1477 | 1478 | This style guide is also available in other languages: 1479 | 1480 | - :de: **German**: [timofurrer/javascript-style-guide](https://github.com/timofurrer/javascript-style-guide) 1481 | - :jp: **Japanese**: [mitsuruog/javacript-style-guide](https://github.com/mitsuruog/javacript-style-guide) 1482 | - :br: **Portuguese**: [armoucar/javascript-style-guide](https://github.com/armoucar/javascript-style-guide) 1483 | - :cn: **Chinese**: [adamlu/javascript-style-guide](https://github.com/adamlu/javascript-style-guide) 1484 | - :es: **Spanish**: [paolocarrasco/javascript-style-guide](https://github.com/paolocarrasco/javascript-style-guide) 1485 | - :kr: **Korean**: [tipjs/javascript-style-guide](https://github.com/tipjs/javascript-style-guide) 1486 | 1487 | ## The JavaScript Style Guide Guide 1488 | 1489 | - [Reference](https://github.com/airbnb/javascript/wiki/The-JavaScript-Style-Guide-Guide) 1490 | 1491 | ## Contributors 1492 | 1493 | - [View Contributors](https://github.com/airbnb/javascript/graphs/contributors) 1494 | 1495 | 1496 | ## License 1497 | 1498 | (The MIT License) 1499 | 1500 | Copyright (c) 2012 Airbnb 1501 | 1502 | Permission is hereby granted, free of charge, to any person obtaining 1503 | a copy of this software and associated documentation files (the 1504 | 'Software'), to deal in the Software without restriction, including 1505 | without limitation the rights to use, copy, modify, merge, publish, 1506 | distribute, sublicense, and/or sell copies of the Software, and to 1507 | permit persons to whom the Software is furnished to do so, subject to 1508 | the following conditions: 1509 | 1510 | The above copyright notice and this permission notice shall be 1511 | included in all copies or substantial portions of the Software. 1512 | 1513 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, 1514 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 1515 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 1516 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 1517 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 1518 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 1519 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 1520 | 1521 | **[[↑]](#TOC)** 1522 | 1523 | # }; 1524 | 1525 | --------------------------------------------------------------------------------