Kovico lab

14. Block (JS style guide)

여러줄의 블록 : {} 사용 eslint: nonblock-statement-body-position Use braces with all multi-line blocks. 복수행의 블록에는 중괄호 ({}) 를 사용해 준다. // bad if (test) return false; // good if (test) return false; // good if (test) { return false; } // bad function foo() { return false; } // good function bar() { return false; } if/else 여러줄 블록 : if 의 닫기 } 와 같은 줄에 else 두기 If you're using multi-line blocks with if and else..

14. Comparison Operators & Equality (JS style guide)

==와 != 대신 ===와 !==를 사용한다. eslint: eqeqeq(===) (!==) > (==) Conditional statements if 와 같은 조건문 : ToBoolean 의 추상 메서드로 강제변환을 사용하여 식을 평가한다. 식을 평가하는 규칙은 다음과 같다. if ([0] && []) { // true // 배열은 객체이다. 빈객체도 객체임 // 객체는 항상 true } Objects -> true Undefined -> false Null -> false Booleans -> true / false Numbers false : +0, -0, NaN otherwise true Strings false : empty string '' otherwise true reference: boo..

13. Hoisting (JS style guide)

var, const/let 선언의 호이스팅: var declarations get hoisted to the top of their scope, their assignment does not. const and let declarations are blessed with a new concept called Temporal Dead Zones (TDZ). It's important to know why typeof is no longer safe. var 선언문은 가장 가까운 함수 스코프의 최상단으로 호이스팅 된다. 할당문은 호이스팅 되지 않는다. const/let 선언에는 Temporal Dead Zones (TDZ) 가 존재한다. typeof 는 안전하지 않다. (예시 참고) // 아래 함수는 참조 ..

12. Variables (JS style guide)

변수 선언 은 항상 const let eslint: no-undef prefer-const Always use const to declare variables. Not doing so will result in global variables. We want to avoid polluting the global namespace. Captain Planet warned us of that. 전역 변수가 생성되지 않는다. 전역 변수 공간을 어지럽히지 않는다. // bad superPower = new SuperPower(); // good const superPower = new SuperPower();하나의 변수 선언/할당 : 하나의 const let eslint: one-var Use one const ..

11. Properties (JS style guide)

프로퍼티 접근: dot 표기법 사용 Use dot notation when accessing properties. 속성에 접근할 때는 마침표를 사용한다. eslint: dot-notation const luke = { jedi: true, age: 28, }; // bad const isJedi = luke['jedi']; // good const isJedi = luke.jedi; 변수로 프로퍼티 접근 : [] 사용 Use subscript notation [ ] when accessing properties with a variable. 변수를 사용해 프로퍼티에 억세스하는 경우는 대괄호 [ ] 를 사용한다. const luke = { jedi: true, age: 28, }; function getP..

10. terators and Generators (JS style guide)

이터레이터 사용: 고차 함수 > 루프 for-in / for-of Don't use iterators. Prefer JavaScript's higher-order functions like map() and reduce() instead of loops like 이터레이터를 사용하지 마세요. for-in이나 for-of 같은 루프 대신 자바스크립트의 고급함수를 사용한다. 고차 함수 불변 규칙을 강제하기 위함이다. 값을 리턴하는 순수 함수를 다루는 것이 더 쉽기 때문에 사이드 이펙트도 작을 수 있음. 배열 순회 map() every() filter() find() findIndex() reduce() some() / ... 객체 -> 배열 Object.keys() Object.values() Object...

9. Modules(JS style guide)

import/export > non-standard 모듈 시스템 Always use modules (import/export) over a non-standard module system. You can always transpile to your preferred module system. `import` `export` 를 쓰면 원하는 모듈시스템에 언제라도 옮겨서 트랜디한 스타일링을 할 수 있다. // bad const AirbnbStyleGuide = require('./AirbnbStyleGuide'); module.exports = AirbnbStyleGuide.es6; // ok import AirbnbStyleGuide from './AirbnbStyleGuide'; export defaul..

8. Classes & Constructors(JS style guide)

Classes & Constructors 클래스 사용 > 프로토타입 직접조작 Always use class. Avoid manipulating prototype directly. prototype을 직접 조작하는 것보다 class를 활용한다. class 문법은 prototype의 조작보다 더 간결하며, 의미를 알기 쉽기 때문이다. // bad function Queue(contents = []) { this._queue = [...contents]; } Queue.prototype.pop = function() { const value = this._queue[0]; this._queue.splice(0, 1); return value; } // good class Queue { constructor(c..

7. Arrow Functions (JS style guide)

prefer-arrow-callback, arrow-spacing : 익명 함수, 화살표함수 사용 When you must use function expressions (as when passing an anonymous function), use arrow function notation. (인라인 콜백을 전달할 때 같이) 익명함수를 사용할 때는 화살표 함수 표현을 사용한다. eslint: prefer-arrow-callback, arrow-spacing. 화살표 함수의 함수의 실행 문맥(this)은 함수를 호출한 곳의 컨텍스트(this) 를 이어받을 수 있다. 만약 function 키워드를 사용한 익명함수를 인라인 콜백에서 썼을 경우의 this 는 실행컨텍스트를 예측하기가 어렵다. 화살표 함수는 간결..

6. Functions (JS style guide)

함수 표현식보다는 함수 선언식을 활용한다. eslint : func-style Use function declarations instead of function expressions 함수 표현식(=함수식)보다는 함수 선언문을 활용한다. 함수 선언문은 파일에서 함수가 정의되기 전에 함수를 참조할 수 있다. 함수 선언문은 함수 본체까지 호이스팅 되지만, 함수 표현식은 참조(함수 이름)만이 호이스팅 된다. 이 룰에 의해 함수식의 부분을 항상 Arrow함수에서 이용하는것이 가능하다. 함수 선언문은 함수의 정의가 파일의 나머지 부분을 이해하기 어려울 만큼 복잡하다면 모듈로 추출할 수 있다. // bad function foo() { // ... } // bad const foo = function () { // ..

5. Strings (JS style guide)

quotes : 문자열 single quotes '' 일관된 방식으로 정의되는 문자열 사용 // bad const name = "Capt. Janeway"; // bad - template literals: 줄바꿈, interpolation 일때 사용 const name = `Capt. Janeway`; // good const name = 'Capt. Janeway'; 100 자가 넘는 문자열: \,+ 으로 끊지 말것. 끊어진 문자열 : 작업하기가 힘들고 코드를 검색하기 어렵게 만든다. // bad const errorMessage = 'This is a super long error that was thrown because \ of Batman. When you stop to think about ..

4. Destructuring (JS style guide)

[JS] 구조 분해 할당 (destructing assignment) 구조 분해 할당은 객체나 배열을 변수로 분해할 수 있게 해주는 문법이다. 함수에 객체 또는 배열의 일부만 전달하고자 하는 경우에 사용할 수 있다. 1. 배열 분해 배열을 분해하고 변수에 초기 ingnoh.tistory.com Use object destructuring when accessing and using multiple properties of an object. 단일 오브젝트의 여러 프로퍼티에 접근하는 경우 Destructing을 사용합니다. 이를 통해 프로퍼티를 위한 임시적인 참조를 줄일 수 있습니다. prefer-destructuring 임시 references 생성을 줄여 줍니다. // bad function getFu..