Repository files navigation

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

대체로 합리적인 JavaScript 접근 방법

참고: 이 가이드는 사용자가Babel과babel-preset-airbnb 또는 이와 동등한 것을 사용한다고 가정합니다. 또한 사용자가 어플리케이션에airbnb-browser-shims와 함께 shims/polyfills 또는 이와 동등한 것을 설치했다고 가정합니다.

이 스타일 가이드는 다른 언어로도 제공됩니다.Translation을 보세요.

다른 스타일 가이드

• ES5 (구버전)
• React
• CSS-in-JavaScript
• CSS & Sass
• Ruby

1. 형 (Types)
2. 참조 (References)
3. 객체 (Objects)
4. 배열 (Arrays)
5. 비구조화 Destructuring
6. 문자열 (Strings)
7. 함수 (Functions)
8. 화살표 함수 (Arrow Functions)
9. 클래스 & 생성자 (Classes & Constructors)
10. 모듈 (Modules)
11. 이터레이터와 제너레이터 (Iterators and Generators)
12. 속성 (Properties)
13. 변수 (Variables)
14. 호이스팅 (Hoisting)
15. 비교 연산자 (Comparison Operators & Equality)
16. 블록 (Blocks)
17. 제어문 (Control Statements)
18. 주석 (Comments)
19. 공백 (Whitespace)
20. 쉼표 (Commas)
21. 세미콜론 (Semicolons)
22. 형변환과 강제 (Type Casting & Coercion)
23. 명명규칙 (Naming Conventions)
24. 접근자 (Accessors)
25. 이벤트 (Events)
26. 제이쿼리 (jQuery)
27. ES5 호환성 (ECMAScript 5 Compatibility)
28. ECMAScript 6+ (ES 2015+) 스타일
29. 표준 라이브러리 (Standard Library)
30. 테스트 (Testing)
31. 성능 (Performance)
32. 자료 (Resources)
33. In the Wild
34. Translation
35. The JavaScript Style Guide Guide
36. Chat With Us About JavaScript
37. Contributors
38. License
39. Amendments

• 1.1원시형: 원시형에 접근하면 값을 직접 조작하게 됩니다.

  • string
  • number
  • boolean
  • null
  • undefined
  • symbol
  • bigint

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

  • Symbol과 BigInt는 완전히 폴리필되지 않으므로, 이를 지원하지 않는 브라우저/환경을 대상으로 사용해서는 안 됩니다.

• 1.2참조형: 참조형에 접근하면 참조를 통해 값을 조작하게 됩니다.

  • object
  • array
  • function

  constfoo=[1,2];constbar=foo;bar[0]=9;console.log(foo[0],bar[0]);// => 9, 9

⬆ back to top

• 2.1 모든 참조에는var 대신const를 사용하세요. eslint:prefer-const,no-const-assign

  왜? 참조를 재할당 할 수 없게 함으로써, 이해하기 어려운 동시에 버그로 이어지는 코드를 방지합니다.

  // badvara=1;varb=2;// goodconsta=1;constb=2;

• 2.2 만약 참조를 재할당 해야 한다면var 대신let을 사용하세요. eslint:no-var

  왜?var처럼 함수스코프를 취하는 것 보다는 블록스코프를 취하는let이 더 낫습니다.

  // badvarcount=1;if(true){count+=1;}// good, use the let.letcount=1;if(true){count+=1;}

• 2.3let 과const 는 둘 다 블록스코프라는 것을 유의하세요.

  // const와 let은 선언된 블록 안에서만 존재합니다.{leta=1;constb=1;}console.log(a);// ReferenceErrorconsole.log(b);// ReferenceError

⬆ back to top

• 3.1 객체를 생성할 때는 리터럴 문법을 사용하세요. eslint:no-new-object

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

• 3.2 동적 속성을 갖는 객체를 생성할 때는 속성 계산명을 사용하세요.

  왜? 이렇게 하면 객체의 모든 속성을 한 곳에서 정의할 수 있습니다.

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

• 3.3 메소드의 단축구문을 사용하세요. eslint:object-shorthand

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

• 3.4 속성의 단축구문을 사용하세요. eslint:object-shorthand

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

  constlukeSkywalker='Luke Skywalker';// badconstobj={lukeSkywalker:lukeSkywalker,};// goodconstobj={  lukeSkywalker,};

• 3.5 속성의 단축구문은 객체 선언의 시작 부분에 모아주세요.

  왜? 어떤 속성이 단축구문을 사용하고 있는지 알기 쉽게 해줍니다.

  constanakinSkywalker='Anakin Skywalker';constlukeSkywalker='Luke Skywalker';// badconstobj={episodeOne:1,twoJediWalkIntoACantina:2,  lukeSkywalker,episodeThree:3,mayTheFourth:4,  anakinSkywalker,};// goodconstobj={  lukeSkywalker,  anakinSkywalker,episodeOne:1,twoJediWalkIntoACantina:2,episodeThree:3,mayTheFourth:4,};

• 3.6 유효하지 않은 식별자에만 따옴표 속성을 사용하세요. eslint:quote-props

  왜? 더 읽기 쉽습니다. 이렇게 하면 구문 하이라이팅이 잘 되고, 많은 자바스크립트 엔진이 더 쉽게 최적화 할 수 있습니다.

  // badconstbad={'foo':3,'bar':4,'data-blah':5,};// goodconstgood={foo:3,bar:4,'data-blah':5,};

• 3.7hasOwnProperty,propertyIsEnumerable,isPrototypeOf와 같은Object.prototype 메소드를 직접 호출하지 마세요. eslint:no-prototype-builtins

  왜? 이러한 메소드들은 객체의 속성에 의해 가려질 수 있습니다. -{ hasOwnProperty: false } - 또는, 객체가 null 객체(Object.create(null))일 수도 있습니다.

  // badconsole.log(object.hasOwnProperty(key));// goodconsole.log(Object.prototype.hasOwnProperty.call(object,key));// bestconsthas=Object.prototype.hasOwnProperty;// 모듈스코프에서 한 번 캐시하세요.console.log(has.call(object,key));/* or */importhasfrom'has';// https://www.npmjs.com/package/hasconsole.log(has(object,key));

• 3.8 객체에 대해 얕은 복사를 할 때는Object.assign대신 객체 전개 구문을 사용하세요. 특정 속성이 생략된 새로운 개체를 가져올 때는 객체 나머지 연산자(object rest operator)를 사용하세요. eslint:prefer-object-spread

  // very badconstoriginal={a:1,b:2};constcopy=Object.assign(original,{c:3});// `original`을 변조합니다 ಠ_ಠdeletecopy.a;// 그래서 이렇게 합니다// badconstoriginal={a:1,b:2};constcopy=Object.assign({},original,{c:3});// copy => { a: 1, b: 2, c: 3 }// goodconstoriginal={a:1,b:2};constcopy={ ...original,c:3};// copy => { a: 1, b: 2, c: 3 }const{ a, ...noA}=copy;// noA => { b: 2, c: 3 }

⬆ back to top

• 4.1 배열을 생성할 때 리터럴 구문을 사용하세요. eslint:no-array-constructor

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

• 4.2 배열에 직접 값을 할당하지 말고Array#push를 사용하세요.

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

• 4.3 배열을 복사할 때는 배열 전개 구문... 을 사용하세요.

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

• 4.4 순회 가능한 객체(iterable object)를 배열로 변환할 때는Array.from 대신 전개 구문...을 사용하세요.

  constfoo=document.querySelectorAll('.foo');// goodconstnodes=Array.from(foo);// bestconstnodes=[...foo];

• 4.5 array-like 객체를 배열로 변환할 때는Array.from을 사용하세요.

  constarrLike={0:'foo',1:'bar',2:'baz',length:3};// badconstarr=Array.prototype.slice.call(arrLike);// goodconstarr=Array.from(arrLike);

• 4.6 매핑할 때는 전개 구문... 대신Array.from을 사용하세요. 중간 배열 생성을 방지하기 때문입니다.

  // badconstbaz=[...foo].map(bar);// goodconstbaz=Array.from(foo,bar);

• 4.7 배열 메소드 콜백에는 리턴 구문을 사용하세요. 만약 함수가8.2와 같이 사이드 이펙트가 없는 단일 표현식을 반환하는 구문으로 구성되어 있다면 리턴 구문을 생략해도 됩니다. eslint:array-callback-return

  // good[1,2,3].map((x)=>{consty=x+1;returnx*y;});// good[1,2,3].map(x=>x+1);// bad - no returned value means `acc` becomes undefined after the first iteration[[0,1],[2,3],[4,5]].reduce((acc,item,index)=>{constflatten=acc.concat(item);acc[index]=flatten;});// good[[0,1],[2,3],[4,5]].reduce((acc,item,index)=>{constflatten=acc.concat(item);acc[index]=flatten;returnflatten;});// badinbox.filter((msg)=>{const{ subject, author}=msg;if(subject==='Mockingbird'){returnauthor==='Harper Lee';}else{returnfalse;}});// goodinbox.filter((msg)=>{const{ subject, author}=msg;if(subject==='Mockingbird'){returnauthor==='Harper Lee';}returnfalse;});

• 4.8 배열이 여러 줄에 걸쳐 있다면 배열을 연 이후와 닫기 이전에 줄바꿈을 해주세요.

  // badconstarr=[[0,1],[2,3],[4,5],];constobjectInArray=[{id:1,},{id:2,}];constnumberInArray=[1,2,];// goodconstarr=[[0,1],[2,3],[4,5]];constobjectInArray=[{id:1,},{id:2,},];constnumberInArray=[1,2,];

⬆ back to top

• 5.1 하나의 객체에서 여러 속성에 접근할 때는 객체 비구조화를 사용하세요. eslint:prefer-destructuring

  왜? 비구조화는 속성들을 위한 임시 참조를 만들지 않도록 해주고, 객체의 반복적인 접근을 방지합니다. 반복적인 객체 접근은 중복 코드와 실수를 만들어내고, 더 많은 코드를 읽게 합니다. 또한 객체 비구조화는 블록에서 사용되는 객체의 구조를 정의하는 단일한 위치를 제공함으로써 어떤 것이 사용되는지 알아내기 위해 모든 블록을 읽지 않아도 되도록 해줍니다.

  // badfunctiongetFullName(user){constfirstName=user.firstName;constlastName=user.lastName;return`${firstName}${lastName}`;}// goodfunctiongetFullName(user){const{ firstName, lastName}=user;return`${firstName}${lastName}`;}// bestfunctiongetFullName({ firstName, lastName}){return`${firstName}${lastName}`;}

• 5.2 배열 비구조화를 사용하세요. eslint:prefer-destructuring

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

• 5.3 여러 값을 반환하는 경우 배열 비구조화가 아닌 객체 비구조화를 사용하세요.

  왜? 이렇게 하면 이후 호출처에 영향을 주지 않고 새로운 속성을 추가하거나 순서를 변경할 수 있습니다.

  // badfunctionprocessInput(input){// 기적이 일어납니다return[left,right,top,bottom];}// 반환되는 데이터의 순서를 생각해야합니다const[left,__,top]=processInput(input);// goodfunctionprocessInput(input){// 기적이 일어납니다return{ left, right, top, bottom};}// 필요한 데이터만 선택하면 됩니다const{ left, top}=processInput(input);

⬆ back to top

• 6.1 문자열에는 작은 따옴표''를 사용하세요. eslint:quotes

  // badconstname="Capt. Janeway";// bad - template literals should contain interpolation or newlinesconstname=`Capt. Janeway`;// goodconstname='Capt. Janeway';

• 6.2 100자가 넘는 문자열을 문자열 연결을 이용해 여러 줄에 걸쳐 쓰지 마세요.

  왜? 문자열이 끊어지면 작업하기 어렵고, 코드를 찾기 어렵게 됩니다.

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

• 6.3 문자열을 생성하는 경우, 문자열 연결 대신 템플릿 문자열을 사용하세요. eslint:prefer-templatetemplate-curly-spacing

  왜? 템플릿 문자열은 덧붙이기와 줄바꿈을 제공하는 간결한 문법으로, 가독성을 높여줍니다.

  // badfunctionsayHi(name){return'How are you, '+name+'?';}// badfunctionsayHi(name){return['How are you, ',name,'?'].join();}// badfunctionsayHi(name){return`How are you,${name}?`;}// goodfunctionsayHi(name){return`How are you,${name}?`;}

• 6.4 절대로 문자열에eval()을 사용하지 마세요. 너무나 많은 취약점을 만듭니다. eslint:no-eval

• 6.5 문자열에 불필요한 이스케이프 문자를 사용하지 마세요. eslint:no-useless-escape

  왜? 백슬래시는 가독성을 해치기 때문에 필요할 때만 사용해야 합니다.

  // badconstfoo='\'this\' \i\s \"quoted\"';// goodconstfoo='\'this\' is "quoted"';constfoo=`my name is '${name}'`;

⬆ back to top

• 7.1 함수선언식 대신 기명 함수표현식을 사용하세요. eslint:func-style

  왜? 함수선언은 호이스트됩니다. 즉, 파일에서 함수를 정의하기 전에 함수를 참조하는 것이 쉽다는 것 - 너무 쉽다는 것 - 을 의미합니다. 이것은 가독성과 유지관리성를 해칩니다. 만약 함수의 정의가 나머지 파일을 이해하는데 방해가 될 정도로 크거나 복잡하다면, 이제 함수를 모듈 밖으로 추출해내야 할 때입니다! 포함된 변수로부터 추론된 이름인지와 관계 없이(현대 브라우저 또는 Babel과 같은 컴파일러를 쓸 때 흔히 볼 수 있듯이) 표현의 이름을 명시적으로 짓는 것을 잊지 마세요. 이를 통해 Error 콜 스택에 대한 모든 추정을 제거할 수 있습니다. (토론)

  // badfunctionfoo(){// ...}// badconstfoo=function(){// ...};// good// 변수 참조 호출과 구분되는 이름constshort=functionlongUniqueMoreDescriptiveLexicalFoo(){// ...};

• 7.2 즉시 호출 함수 표현식을 괄호로 감싸세요. eslint:wrap-iife

  왜? 즉시 호출 함수 표현식은 하나의 단위이며, 괄호로 이것을 감싸면 괄호 안의 표현을 명확하게 해주기 때문입니다. 모듈을 어디에서나 사용한다면 즉시 호출 표현식은 전혀 필요하지 않다는 점을 주의하세요.

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

• 7.3 함수 이외의 블록(if,while, 등)에서 함수를 선언하지 마세요. 브라우저는 이를 허용하겠지만, 모두 다르게 해석합니다. eslint:no-loop-func

• 7.4참고: ECMA-262 명세는블록을 구문의 일종으로 정의하고 있지만 함수선언은 구문이 아닙니다.

  // badif(currentUser){functiontest(){console.log('Nope.');}}// goodlettest;if(currentUser){test=()=>{console.log('Yup.');};}

• 7.5 절대 매개변수 이름을arguments라고 짓지 마세요. 이것은 함수 스코프에 전해지는arguments 객체의 참조를 덮어써 버립니다.

  // badfunctionfoo(name,options,arguments){// ...}// goodfunctionfoo(name,options,args){// ...}

• 7.6 절대arguments를 사용하지마세요. 대신 나머지 문법(rest syntax)...를 사용하세요. eslint:prefer-rest-params

  왜?...을 사용하면 몇 개의 매개변수를 이용하고 싶은지 확실히 할 수 있습니다. 더 나아가, 나머지 인자(rest arguments)는arguments 와 같은 Array-like 객체가 아닌 진짜 Array입니다.

  // badfunctionconcatenateAll(){constargs=Array.prototype.slice.call(arguments);returnargs.join('');}// goodfunctionconcatenateAll(...args){returnargs.join('');}

• 7.7 함수의 인자를 변조하기 보다는 기본 매개변수 문법을 사용하세요.

  // really badfunctionhandleThings(opts){// 안돼요! 우리는 함수 인자를 변경하면 안됩니다.// 더 안 좋은 경우: 만약 opts가 falsy한 값일 경우 당신이 원하는 객체로// 설정되겠지만, 이는 미묘한 버그를 일으킬 수 있습니다.opts=opts||{};// ...}// still badfunctionhandleThings(opts){if(opts===void0){opts={};}// ...}// goodfunctionhandleThings(opts={}){// ...}

• 7.8 사이드 이펙트가 있을만한 기본 매개변수는 사용하지 마세요.

  왜? 혼란을 야기하기 때문입니다.

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

• 7.9 기본 매개변수는 항상 뒤쪽에 두세요. eslint:default-param-last

  // badfunctionhandleThings(opts={},name){// ...}// goodfunctionhandleThings(name,opts={}){// ...}

• 7.10 절대로 새로운 함수를 만들기 위해 함수 생성자를 사용하지 마세요. eslint:no-new-func

  왜? 이러한 방법으로 문자열을 평가해 함수를 만드는 것은eval()과 같은 수준의 취약점을 만듭니다.

  // badvaradd=newFunction('a','b','return a + b');// still badvarsubtract=Function('a','b','return a - b');

• 7.11 함수 시그니처에 공백을 넣으세요. eslint:space-before-function-parenspace-before-blocks

  왜? 일관성을 갖는 것은 좋으니까요. 그리고 이렇게 하면 이름을 추가하거나 지울 때 공백을 건드릴 필요가 없게 됩니다.

  // badconstf=function(){};constg=function(){};consth=function(){};// goodconstx=function(){};consty=functiona(){};

• 7.12 절대로 매개변수를 바꾸지 마세요. eslint:no-param-reassign

  왜? 매개변수로 전달된 객체를 조작하면 원래 호출처에서 원치 않는 사이드 이펙트를 일으킬 수 있습니다.

  // badfunctionf1(obj){obj.key=1;}// goodfunctionf2(obj){constkey=Object.prototype.hasOwnProperty.call(obj,'key') ?obj.key :1;}

• 7.13 절대로 매개변수를 재할당하지 마세요. eslint:no-param-reassign

  왜? 매개변수를 재할당하는 것은 예측할 수 없는 결과를 불러 일으킵니다. 특히arguments 객체에 접근할 때 말이죠. 또한 V8에서 최적화 문제를 일으킬 수도 있습니다.

  // badfunctionf1(a){a=1;// ...}functionf2(a){if(!a){a=1;}// ...}// goodfunctionf3(a){constb=a||1;// ...}functionf4(a=1){// ...}

• 7.14 가변 인자 함수를 호출할 때는 전개 구문...을 사용하세요. eslint:prefer-spread

  왜? 이게 더 깔끔합니다. 컨텍스트를 제공할 필요도 없고,apply로new를 쉽게 구성할 수도 없습니다.

  // badconstx=[1,2,3,4,5];console.log.apply(console,x);// goodconstx=[1,2,3,4,5];console.log(...x);// badnew(Function.prototype.bind.apply(Date,[null,2016,8,5]));// goodnewDate(...[2016,8,5]);

• 7.15여러 줄의 시그니처 또는 호출을 취하는 함수는 이 가이드에 있는 다른 것들처럼 들여쓰기가 되어야 합니다. 한줄에 각 항목을 하나씩 두고, 마지막 항목에 쉼표를 넣습니다. eslint:function-paren-newline

  // badfunctionfoo(bar,baz,quux){// ...}// goodfunctionfoo(bar,baz,quux,){// ...}// badconsole.log(foo,bar,baz);// goodconsole.log(foo,bar,baz,);

⬆ back to top

• 8.1 (인라인 콜백을 전달할 때 같이) 익명함수를 사용할 때는 화살표 함수 표현을 사용하세요. eslint:prefer-arrow-callback,arrow-spacing

  왜? 화살표 함수는 그 컨텍스트의this에서 실행하는 버전의 함수를 만들기 때문입니다. 이것은 보통 원하는대로 작동하고, 보다 간결합니다.

  이렇게 하는 건 어때요? 만약 당신이 상당히 복잡한 함수를 가지고 있다면, 당신은 그 로직을 명명된 함수 표현식으로 옮길 수 있습니다.

  // bad[1,2,3].map(function(x){consty=x+1;returnx*y;});// good[1,2,3].map((x)=>{consty=x+1;returnx*y;});

• 8.2 하나의 식으로 구성된 함수가 사이드 이펙트 없는표현식을 반환하는 경우, 중괄호를 생략하고 암시적 반환을 사용할 수 있습니다. 그 외에는 중괄호를 그대로 두고,return문도 사용하세요. eslint:arrow-parens,arrow-body-style

  왜? Syntactic sugar(이해하기 쉽게 디자인된 프로그래밍 언어 내의 문법)니까요. 여러 함수가 연결된 경우 읽기 쉬워집니다.

  // bad[1,2,3].map(number=>{constnextNumber=number+1;`A string containing the${nextNumber}.`;});// good[1,2,3].map(number=>`A string containing the${number}.`);// good[1,2,3].map((number)=>{constnextNumber=number+1;return`A string containing the${nextNumber}.`;});// good[1,2,3].map((number,index)=>({[index]:number,}));// 암시적 반환없이 사이드 이펙트를 수반합니다functionfoo(callback){constval=callback();if(val===true){// callback이 참을 반환하면 뭔가를 수행합니다}}letbool=false;// badfoo(()=>bool=true);// goodfoo(()=>{bool=true;});

• 8.3 표현식이 여러 줄에 걸쳐 있을 때는 가독성을 높이기 위해 소괄호로 감싸주세요.

  왜? 함수의 시작과 끝 부분을 알기 쉽게 해주기 때문입니다.

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

• 8.4 명확성과 일관성을 위해 항상 인자를 괄호로 감싸세요. eslint:arrow-parens

  왜? 인자를 추가하거나 제거할 때 변경 사항을 최소화할 수 있습니다.

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

• 8.5 화살표 함수 구문(=>)과 비교 연산자(<=,>=)를 헷갈리게 하지 마세요. eslint:no-confusing-arrow

  // badconstitemHeight=item=>item.height>256 ?item.largeSize :item.smallSize;// badconstitemHeight=(item)=>item.height>256 ?item.largeSize :item.smallSize;// goodconstitemHeight=item=>(item.height>256 ?item.largeSize :item.smallSize);// goodconstitemHeight=(item)=>{const{ height, largeSize, smallSize}=item;returnheight>256 ?largeSize :smallSize;};

• 8.6 암시적 반환을 하는 화살표 함수 몸체의 위치를 적절히 설정하세요. eslint:implicit-arrow-linebreak

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

⬆ back to top

• 9.1prototype 을 직접 조작하는것을 피하고 항상class 를 사용하세요.

  왜?class 구문은 간결하고 의미를 알기 쉽기 때문입니다.

  // badfunctionQueue(contents=[]){this.queue=[...contents];}Queue.prototype.pop=function(){constvalue=this.queue[0];this.queue.splice(0,1);returnvalue;};// goodclassQueue{constructor(contents=[]){this.queue=[...contents];}pop(){constvalue=this.queue[0];this.queue.splice(0,1);returnvalue;}}

• 9.2 상속에는extends를 사용하세요.

  왜?instanceof를 파괴하지 않고 프로토타입 상속을 하기 위해 내장된 방법이기 때문입니다.

  // badconstinherits=require('inherits');functionPeekableQueue(contents){Queue.apply(this,contents);}inherits(PeekableQueue,Queue);PeekableQueue.prototype.peek=function(){returnthis.queue[0];};// goodclassPeekableQueueextendsQueue{peek(){returnthis.queue[0];}}

• 9.3 메소드가this를 반환하게 함으로써 메소드 체이닝을 할 수 있습니다.

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

• 9.4toString()을 사용해도 되지만, 올바르게 동작하는지와 사이드 이펙트가 없는지 확인해 주세요.

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

• 9.5 클래스는 생성자가 명시되지 않은 경우 기본 생성자를 갖습니다. 빈 생성자 함수나 부모 클래스로 위임하는 함수는 불필요합니다. eslint:no-useless-constructor

  // badclassJedi{constructor(){}getName(){returnthis.name;}}// badclassReyextendsJedi{constructor(...args){super(...args);}}// goodclassReyextendsJedi{constructor(...args){super(...args);this.name='Rey';}}

• 9.6 중복되는 클래스 멤버를 만들지 마세요. eslint:no-dupe-class-members

  왜? 중복된 클래스 멤버를 선언하면 암묵적으로 마지막 멤버가 적용됩니다. 중복은 확실히 버그입니다.

  // badclassFoo{bar(){return1;}bar(){return2;}}// goodclassFoo{bar(){return1;}}// goodclassFoo{bar(){return2;}}

• 9.7 클래스 메소드는 외부 라이브러리나 프레임워크가 구체적으로 비정적 메소드를 요구하지 않는 이상this를 사용하거나 해당 메소드를 정적 메소드로 만들어야 합니다. 인스턴스 메서드는 수신자의 속성에 따라 다르게 동작함을 나타내야 합니다. eslint:class-methods-use-this

  // badclassFoo{bar(){console.log('bar');}}// good - this를 사용했습니다classFoo{bar(){console.log(this.bar);}}// good - constructor가 면제됩니다classFoo{constructor(){// ...}}// good - 정적 메소드는 this를 사용하지 않는다고 예상할 수 있습니다classFoo{staticbar(){console.log('bar');}}

⬆ back to top

• 10.1 항상 모듈(import/export)을 비표준 모듈 체계 대신 사용하세요. 언제든 선호하는 모듈 시스템으로 트랜스파일할 수 있습니다.

  왜? 모듈은 미래입니다. 지금 이 미래를 사용해 봅시다.

  // badconstAirbnbStyleGuide=require('./AirbnbStyleGuide');module.exports=AirbnbStyleGuide.es6;// okimportAirbnbStyleGuidefrom'./AirbnbStyleGuide';exportdefaultAirbnbStyleGuide.es6;// bestimport{es6}from'./AirbnbStyleGuide';exportdefaultes6;

• 10.2 와일드카드 import는 사용하지 마세요.

  왜? single default export임을 확실히 할 수 있습니다.

  // badimport*asAirbnbStyleGuidefrom'./AirbnbStyleGuide';// goodimportAirbnbStyleGuidefrom'./AirbnbStyleGuide';

• 10.3 import문으로부터 직접 export하지 마세요.

  왜? 한줄이 간결하기는 하지만, 명확한 import와 명확한 export를 통해 일관성을 가질 수 있기 때문입니다.

  // bad// filename es6.jsexport{es6asdefault}from'./AirbnbStyleGuide';// good// filename es6.jsimport{es6}from'./AirbnbStyleGuide';exportdefaultes6;

• 10.4 같은 경로는 한 곳에서 import하세요.eslint:no-duplicate-imports

  왜? 같은 경로에서 import하는 여러 줄의 코드는 유지보수를 어렵게 만듭니다.

  // badimportfoofrom'foo';// … 또 다른 imports … //import{named1,named2}from'foo';// goodimportfoo,{named1,named2}from'foo';// goodimportfoo,{named1,named2,}from'foo';

• 10.5 가변 바인딩을 export하지 마세요.eslint:import/no-mutable-exports

  왜? 변조는 일반적으로 피해야 하지만, 가변 바인딩을 export할 때는 특히 그렇습니다. 이 기술이 어떤 특별한 상황에 필요할 수도 있지만, 일반적으로는 상수 참조만 export되어야 합니다.

  // badletfoo=3;export{foo};// goodconstfoo=3;export{foo};

• 10.6 한가지만 export하는 모듈에서는 이름 붙여진 export보다는 default export를 사용하세요.eslint:import/prefer-default-export

  왜? 하나만 export하는 파일의 가독성과 유지보수성이 더 좋기 때문입니다.

  // badexportfunctionfoo(){}// goodexportdefaultfunctionfoo(){}

• 10.7 모든import구문을 다른 구문들 위에 두세요.eslint:import/first

  왜?import구문은 호이스트되기 때문에 이것을 가장 위에 두면 예상치 못한 결과를 막을 수 있습니다.

  // badimportfoofrom'foo';foo.init();importbarfrom'bar';// goodimportfoofrom'foo';importbarfrom'bar';foo.init();

• 10.8 여러 줄에 걸친 import는 여러 줄의 배열이나 객체 리터럴처럼 들여쓰기하세요. eslint:object-curly-newline

  왜? 스타일 가이드에 있는 다른 모든 중괄호 블록들 처럼 중괄호는 같은 들여쓰기 규칙을 따릅니다. 콤마가 그렇듯이 말이죠.

  // badimport{longNameA,longNameB,longNameC,longNameD,longNameE}from'path';// goodimport{longNameA,longNameB,longNameC,longNameD,longNameE,}from'path';

• 10.9 모듈 import 구문에서 Webpack loader 구문을 사용하지 마세요.eslint:import/no-webpack-loader-syntax

  왜? import에서 Webpack 구문을 사용하면 이 코드가 모듈 번들러에 연결되기 때문입니다. loader 구문은webpack.config.js에서 사용하세요.

  // badimportfooSassfrom'css!sass!foo.scss';importbarCssfrom'style!css!bar.css';// goodimportfooSassfrom'foo.scss';importbarCssfrom'bar.css';

• 10.10 자바스크립트 파일 확장자를 명시하지 마세요.eslint:import/extensions

  왜? 확장자를 명시하면 모든 소비자에서 import하는 모듈의 세부적 구현을 부적절하게 하드코딩하고, 리팩토링을 막게 됩니다.

  // badimportfoofrom'./foo.js';importbarfrom'./bar.jsx';importbazfrom'./baz/index.jsx';// goodimportfoofrom'./foo';importbarfrom'./bar';importbazfrom'./baz';

⬆ back to top

• 11.1 이터레이터를 사용하지 마세요.for-in이나for-of같은 루프 대신 자바스크립트의 고급함수를 사용하세요. eslint:no-iteratorno-restricted-syntax

  왜? 고급함수는 불변 규칙을 적용합니다. 사이드 이펙트에 대해 추측하는 것보다 값을 반환하는 순수 함수를 다루는 것이 더 간단합니다.

  배열을 이터레이트할 때map() /every() /filter() /find() /findIndex() /reduce() /some() / ... 를 사용하세요. 배열을 생성할 때는Object.keys() /Object.values() /Object.entries()를 사용해서 모든 객체를 이터레이트 할 수 있습니다.

  constnumbers=[1,2,3,4,5];// badletsum=0;for(letnumofnumbers){sum+=num;}sum===15;// goodletsum=0;numbers.forEach((num)=>{sum+=num;});sum===15;// best (use the functional force)constsum=numbers.reduce((total,num)=>total+num,0);sum===15;// badconstincreasedByOne=[];for(leti=0;i<numbers.length;i++){increasedByOne.push(numbers[i]+1);}// goodconstincreasedByOne=[];numbers.forEach((num)=>{increasedByOne.push(num+1);});// best (keeping it functional)constincreasedByOne=numbers.map(num=>num+1);

• 11.2 지금은 제너레이터를 사용하지 마세요.

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

• 11.3 만약 반드시 제너레이터를 사용해야 하거나우리의 조언을 무시하는 경우, 함수 시그니처의 공백이 적절한지 확인하세요. eslint:generator-star-spacing

  왜?function과*는 같은 개념의 키워드입니다. -*은function,function*의 제어자가 아니며, 이들은function과 다른 고유한 구조입니다.

  // badfunction*foo(){// ...}// badconstbar=function*(){// ...};// badconstbaz=function*(){// ...};// badconstquux=function*(){// ...};// badfunction*foo(){// ...}// badfunction*foo(){// ...}// very badfunction*foo(){// ...}// very badconstwat=function*(){// ...};// goodfunction*foo(){// ...}// goodconstfoo=function*(){// ...};

⬆ back to top

• 12.1 속성에 접근할 때는 마침표를 사용하세요. eslint:dot-notation

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

• 12.2 변수를 사용해 속성에 접근할 때는 대괄호[]를 사용하세요.

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

• 12.3 제곱 계산을 할 때는 제곱 연산자**을 사용하세요. eslint:no-restricted-properties.

  // badconstbinary=Math.pow(2,10);// goodconstbinary=2**10;

⬆ back to top

• 13.1 변수를 선언할 때는 항상const나let을 사용하세요. 이렇게 하지 않으면 전역 변수로 선언됩니다. 우리는 전역 네임스페이스를 오염시키지 않기를 바랍니다. Captain Planet이 우리에게 경고했어요. eslint:no-undefprefer-const

  // badsuperPower=newSuperPower();// goodconstsuperPower=newSuperPower();

• 13.2 하나의 변수 선언/할당에는 하나의const 또는let을 사용하세요. eslint:one-var

  왜? 이렇게 하면 쉽게 새로운 변수를 추가할 수 있고,,를;로 바꿔버리는 것에 대해 걱정할 필요가 없습니다. 또한 한번에 모든 선언을 건너뛰는 대신 디버거를 사용해 각 선언을 단계별로 살펴볼 수 있습니다.

  // badconstitems=getItems(),goSportsTeam=true,dragonball='z';// bad// (위 코드와 비교해 실수를 짚어보세요)constitems=getItems(),goSportsTeam=true;dragonball='z';// goodconstitems=getItems();constgoSportsTeam=true;constdragonball='z';

• 13.3const를 그룹화한 다음에let을 그룹화 하세요.

  왜? 이전에 할당한 변수에 대해 새 변수를 추가하는 경우 유용하기 때문입니다.

  // badleti,len,dragonball,items=getItems(),goSportsTeam=true;// badleti;constitems=getItems();letdragonball;constgoSportsTeam=true;letlen;// goodconstgoSportsTeam=true;constitems=getItems();letdragonball;leti;letlength;

• 13.4 필요한 곳에서 변수를 할당하되, 합당한 곳에 두세요.

  왜?let과const는 블록스코프이기 때문입니다. 함수스코프가 아닙니다.

  // bad - unnecessary function callfunctioncheckName(hasName){constname=getName();if(hasName==='test'){returnfalse;}if(name==='test'){this.setName('');returnfalse;}returnname;}// goodfunctioncheckName(hasName){if(hasName==='test'){returnfalse;}constname=getName();if(name==='test'){this.setName('');returnfalse;}returnname;}

• 13.5 변수 할당 체이닝을 하지 마세요. eslint:no-multi-assign

  왜? 변수 할당 체이닝은 암시적인 전역 변수를 만들기 때문입니다.

  // bad(functionexample(){// 자바스크립트는 이것을// let a = ( b = ( c = 1 ) );// 로 해석합니다.// let 키워드는 변수 a에만 적용됩니다.// 변수 b와 c는 전역 변수가 됩니다.leta=b=c=1;}());console.log(a);// throws ReferenceErrorconsole.log(b);// 1console.log(c);// 1// good(functionexample(){leta=1;letb=a;letc=a;}());console.log(a);// throws ReferenceErrorconsole.log(b);// throws ReferenceErrorconsole.log(c);// throws ReferenceError// `const`에도 동일하게 적용됩니다

• 13.6 단항 증감 연산자(++,--)를 사용하지 마세요. eslintno-plusplus

  왜? eslint 문서에 따르면, 단항 증감 구문은 자동으로 세미콜론을 삽입하며, 어플리케이션에서 값을 증감할 때 오류를 일으킬 수 있습니다. 또한num += 1과 같은 구문을 통해 값을 변경하는 것이num++이나num ++와 같은 구문을 사용하는 것보다 더 의미있는 일이라고 생각합니다. 단항 증감 구문을 사용하지 않으면 프로그램에서 예기치 않은 동작을 일으키는 전위 증감 연산을 막을 수 있습니다.

  // badconstarray=[1,2,3];letnum=1;num++;--num;letsum=0;lettruthyCount=0;for(leti=0;i<array.length;i++){letvalue=array[i];sum+=value;if(value){truthyCount++;}}// goodconstarray=[1,2,3];letnum=1;num+=1;num-=1;constsum=array.reduce((a,b)=>a+b,0);consttruthyCount=array.filter(Boolean).length;

• 13.7 값을 할당할 때=의 앞 또는 뒤에서 줄바꿈을 하지 마세요. 만약 할당이max-len을 넘기는 경우, 값을 괄호로 둘러싸세요. eslintoperator-linebreak.

  왜?= 주위에서 줄바꿈을 하는 것은 할당 값을 모호하게 합니다.

  // badconstfoo=superLongLongLongLongLongLongLongLongFunctionName();// badconstfoo='superLongLongLongLongLongLongLongLongString';// goodconstfoo=(superLongLongLongLongLongLongLongLongFunctionName());// goodconstfoo='superLongLongLongLongLongLongLongLongString';

• 13.8 사용하지 않는 변수를 남겨두지 마세요. eslint:no-unused-vars

  왜? 선언되었지만 사용되지 않는 변수는 완벽하지 않은 리팩토링으로 인한 에러일 수 있습니다. 그런 변수는 코드의 자리를 차지하며, 읽는 사람이 혼란에 빠지도록 만듭니다.

  // badvarsome_unused_var=42;// 쓰기 전용 변수는 사용한 것으로 간주되지 않습니다.vary=10;y=5;// 자신의 변경을 읽는 것은 사용한 것으로 간주되지 않습니다.varz=0;z=z+1;// 사용되지 않은 함수 인자.functiongetX(x,y){returnx;}// goodfunctiongetXPlusY(x,y){returnx+y;}varx=1;vary=a+2;alert(getXPlusY(x,y));// 'type'은 사용되지 않을 경우 무시됩니다. 나머지 속성의 형제이기 때문입니다.// 이것은 특정 키를 생략하는 객체를 추출하는 형식입니다.var{ type, ...coords}=data;// 'coords'는 이제 'data' 객체에서 'type' 속성이 빠진 'data' 객체입니다.

⬆ back to top

• 14.1var 선언은 할당없이 가장 가까운 함수 스코프의 꼭대기에 호이스트됩니다.const와let 선언은Temporal Dead Zones (TDZ)라고 불리는 새로운 개념의 혜택을 받습니다.왜 typeof는 더 이상 안전하지 않은가에 대해서 알고있는 것이 중요합니다.

  // (전역 변수 notDefined가 존재하지 않는다고 판정한 경우)// 동작하지 않습니다functionexample(){console.log(notDefined);// => throws a ReferenceError}// 그 변수를 참조하는 코드의 뒤에서 그 변수를 선언한 경우// 변수가 호이스트된 상태에서 동작합니다.// 주의：`true` 라는 값 자체는 호이스트되지 않습니다.functionexample(){console.log(declaredButNotAssigned);// => undefinedvardeclaredButNotAssigned=true;}// 인터프리터는 변수선언을 스코프의 선두에 호이스트합니다// 위의 예는 다음과 같이 다시 쓸수 있습니다:functionexample(){letdeclaredButNotAssigned;console.log(declaredButNotAssigned);// => undefineddeclaredButNotAssigned=true;}// const와 let을 이용한 경우functionexample(){console.log(declaredButNotAssigned);// => throws a ReferenceErrorconsole.log(typeofdeclaredButNotAssigned);// => throws a ReferenceErrorconstdeclaredButNotAssigned=true;}

• 14.2 익명함수의 경우 함수가 할당되기 전의 변수가 호이스트됩니다.

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

• 14.3 명명함수의 경우에도 똑같이 변수가 호이스트됩니다. 함수의 이름이나 본체는 호이스트되지 않습니다.

  functionexample(){console.log(named);// => undefinednamed();// => TypeError named is not a functionsuperPower();// => ReferenceError superPower is not definedvarnamed=functionsuperPower(){console.log('Flying');};}// 함수 이름이 변수 이름과 동일할 때도 마찬가지다.functionexample(){console.log(named);// => undefinednamed();// => TypeError named is not a functionvarnamed=functionnamed(){console.log('named');};}

• 14.4 함수선언은 함수명과 함수본체가 호이스트됩니다.

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

• 더 자세한 정보는 이곳을 참고해주세요JavaScript Scoping & Hoisting byBen Cherry.

⬆ back to top

• 15.1==와!= 대신===와!==를 사용하세요. eslint:eqeqeq

• 15.2if문과 같은 조건식은ToBoolean 메소드에 의한 강제형변환으로 평가되어 항상 다음과 같은 간단한 규칙을 따릅니다:

  • Objects는true로 평가됩니다.
  • Undefined는false로 평가됩니다.
  • Null는false로 평가됩니다.
  • Booleans는boolean형의 값으로 평가됩니다.
  • Numbers는true로 평가됩니다. 하지만+0, -0, NaN의 경우false로 평가됩니다.
  • Strings는true로 평가됩니다. 하지만 빈 문자열''은,false로 평가됩니다.

  if([0]&&[]){// true// 배열(빈 배열 포함)은 객체이며, 객체는 참으로 평가됩니다.}

• 15.3 불리언 비교에는 단축형을 사용하세요. 단, 숫자나 문자열은 명시적으로 비교하세요.

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

• 15.4 더 자세한 정보는 이곳을 참고해주세요.Truth Equality and JavaScript by Angus Croll.

• 15.5 렉시컬 선언 (e.g.let,const,function, andclass)을 포함하는case와default 구문 안에 블록을 만들 때는 괄호를 사용하세요. eslint:no-case-declarations

  왜? 렉시컬 선언은switch 블록 전체에서 접근할 수 있지만, 할당된 경우에만 초기화됩니다.case에 다다랐을 때 말이죠. 이것은 여러case 구문이 같은 것을 정의하려 할 때 문제를 일으킵니다.

  // badswitch(foo){case1:letx=1;break;case2:consty=2;break;case3:functionf(){// ...}break;default:classC{}}// goodswitch(foo){case1:{letx=1;break;}case2:{consty=2;break;}case3:{functionf(){// ...}break;}case4:bar();break;default:{classC{}}}

• 15.6 삼항 연산자를 중첩해서는 안되며, 일반적으로 한줄에 표현해야 합니다. eslint:no-nested-ternary

  // badconstfoo=maybe1>maybe2  ?"bar"  :value1>value2 ?"baz" :null;// split into 2 separated ternary expressionsconstmaybeNull=value1>value2 ?'baz' :null;// betterconstfoo=maybe1>maybe2  ?'bar'  :maybeNull;// bestconstfoo=maybe1>maybe2 ?'bar' :maybeNull;

• 15.7 불필요한 삼항 연산자를 사용하지 마세요. eslint:no-unneeded-ternary

  // badconstfoo=a ?a :b;constbar=c ?true :false;constbaz=c ?false :true;// goodconstfoo=a||b;constbar=!!c;constbaz=!c;

• 15.8 연산자를 섞어 사용할 때 해당 연산자들을 괄호로 둘러싸세요. 유일한 예외는 산술 연산자 (+,-,**)입니다. 이들의 우선순위는 상식적으로 이해할 수 있습니다./와*은 섞일 경우 순서가 모호할 수 있으므로 괄호로 감싸는 것을 추천합니다. eslint:no-mixed-operators

  왜? 이렇게 하면 코드가 더 읽기 쉬워지며, 개발자의 의도가 명확해집니다.

  // badconstfoo=a&&b<0||c>0||d+1===0;// badconstbar=a**b-5%d;// bad// (a || b) && c 으로 혼동할 수 있습니다.if(a||b&&c){returnd;}// goodconstfoo=(a&&b<0)||c>0||(d+1===0);// goodconstbar=(a**b)-(5%d);// goodif(a||(b&&c)){returnd;}// goodconstbar=a+b/c*d;

⬆ back to top

• 16.1 여러 줄의 블록에는 중괄호를 사용하세요. eslint:nonblock-statement-body-position

  // badif(test)returnfalse;// goodif(test)returnfalse;// goodif(test){returnfalse;}// badfunctionfoo(){returnfalse;}// goodfunctionbar(){returnfalse;}

• 16.2 여러 줄의if와else문을 사용할 때는else를if 블록의 닫는 중괄호와 같은 줄에 두세요. eslint:brace-style

  // badif(test){thing1();thing2();}else{thing3();}// goodif(test){thing1();thing2();}else{thing3();}

• 16.3 만약if 블록이 항상return 구문을 실행시킨다면,else 블록은 불필요합니다.return을 포함한if블록을 잇는else if 블록 안에return 구문이 있으면 여러if 블록으로 나눠질 수 있습니다. eslint:no-else-return

  // badfunctionfoo(){if(x){returnx;}else{returny;}}// badfunctioncats(){if(x){returnx;}elseif(y){returny;}}// badfunctiondogs(){if(x){returnx;}else{if(y){returny;}}}// goodfunctionfoo(){if(x){returnx;}returny;}// goodfunctioncats(){if(x){returnx;}if(y){returny;}}// goodfunctiondogs(x){if(x){if(z){returny;}}else{returnz;}}

⬆ back to top

• 17.1 제어문 (if,while 등)이 너무 길거나 최대 길이를 넘긴 경우, 각 조건을 새로운 줄에 두세요. 논리 연산자는 줄의 시작부분에 있어야 합니다.

  왜? 줄의 맨 처음에 연산자를 두면 연산자의 정렬을 유지하고, 메소드 체이닝과 비슷한 패턴을 따를 수 있습니다. 또, 이렇게 하면 복잡한 로직을 쉽게 볼 수 있도록 만들어 가독성을 높입니다.

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

• 17.2. 선택 연산자를 제어 구문 대신 쓰지 마세요.

  // bad!isRunning&&startRunning();// goodif(!isRunning){startRunning();}

⬆ back to top

• 18.1 여러 줄에 걸친 주석을 쓸 때는/** ... */을 사용하세요.

  // bad// make()는 전달된 태그명을 기반으로// 새로운 요소를 반환한다.////@param {String} tag//@return {Element} elementfunctionmake(tag){// ...returnelement;}// good/** * make()는 전달된 태그명을 기반으로 * 새로운 요소를 반환한다. */functionmake(tag){// ...returnelement;}

• 18.2 한줄 주석을 쓸 때는//을 사용하세요. 주석 전에는 빈 행을 넣어주세요.

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

• 18.3 모든 주석은 공백으로 시작해야 합니다. eslint:spaced-comment

  // bad//is current tabconstactive=true;// good// is current tabconstactive=true;// bad/** *make()는 전달된 태그명을 기반으로 *새로운 요소를 반환한다. */functionmake(tag){// ...returnelement;}// good/** * make()는 전달된 태그명을 기반으로 * 새로운 요소를 반환한다. */functionmake(tag){// ...returnelement;}

• 18.4 문제를 지적하고 재고를 촉구하는 경우나 문제의 해결책을 제안하는 경우 등에는 주석 앞에FIXME 나TODO 를 붙임으로써 다른 개발자의 빠른 이해를 도울수 있습니다. 이런 것들은 어떤 행동을 따른다는 의미로 통상의 주석와는 다릅니다. 행동이라는 것은FIXME -- 해결이 필요 또는TODO -- 구현이 필요 를 뜻합니다.

• 18.5 문제에 대한 주석으로// FIXME:를 사용하세요.

  classCalculatorextendsAbacus{constructor(){super();// FIXME: 전역 변수를 사용해서는 안 됨total=0;}}

• 18.6 문제의 해결책에 대한 주석으로// TODO:를 사용하세요.

  classCalculatorextendsAbacus{constructor(){super();// TODO: total은 옵션 파라메터로 설정해야함this.total=0;}}

⬆ back to top

• 19.1 탭은 공백문자 2개로 설정하세요. eslint:indent

  // badfunctionfoo(){∙∙∙∙letname;}// badfunctionbar(){∙letname;}// goodfunctionbaz(){∙∙letname;}

• 19.2 주요 중괄호 앞에는 공백을 1개 넣으세요. eslint:space-before-blocks

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

• 19.3 제어문 (if,while 등)의 소괄호 앞에는 공백을 1개 넣으세요. 함수선언이나 함수호출시 인자 리스트 앞에는 공백을 넣지 마세요. eslint:keyword-spacing

  // badif(isJedi){fight();}// goodif(isJedi){fight();}// badfunctionfight(){console.log('Swooosh!');}// goodfunctionfight(){console.log('Swooosh!');}

• 19.4 연산자 사이에 공백을 넣으세요. eslint:space-infix-ops

  // badconstx=y+5;// goodconstx=y+5;

• 19.5 파일 끝에는 개행문자를 1개 넣으세요. eslint:eol-last

  // badimport{es6}from'./AirbnbStyleGuide';// ...exportdefaultes6;

  // badimport{es6}from'./AirbnbStyleGuide';// ...exportdefaultes6;↵↵

  // goodimport{es6}from'./AirbnbStyleGuide';// ...exportdefaultes6;↵

• 19.6 길게 메소드를 체이닝하는 경우 (2개 메소드 이상) 들여쓰기를 하세요. 또한 해당 줄이 새로운 구문이 아니라 메소드 호출임을 강조하는 마침표를 맨 앞에 두세요. eslint:newline-per-chained-callno-whitespace-before-property

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

• 19.7 구문의 앞과 블록의 뒤에는 빈 행을 두세요.

  // badif(foo){returnbar;}returnbaz;// goodif(foo){returnbar;}returnbaz;// badconstobj={foo(){},bar(){},};returnobj;// goodconstobj={foo(){},bar(){},};returnobj;// badconstarr=[functionfoo(){},functionbar(){},];returnarr;// goodconstarr=[functionfoo(){},functionbar(){},];returnarr;