JavaScript 스타일 가이드

GitLab 프론트엔드 개발에서 사용하는 JavaScript 코딩 스타일 규칙과 모범 사례를 설명합니다.

대부분의 JavaScript 스타일 지침은 Airbnb JavaScript 스타일 가이드 와 함께 제공되는 린터를 사용하여 관리합니다. Airbnb에서 정한 스타일 지침 외에도, 아래에 몇 가지 특정 규칙이 추가로 나열되어 있습니다. yarn run lint:eslint:all 또는 yarn run lint:eslint $PATH_TO_FILE 을 실행하여 로컬에서 ESLint를 실행할 수 있습니다. forEach 사용 지양 # 데이터를 변경(mutate)할 때는 forEach 사용을 피하세요. 데이터를 변경할 때는 forEach 대신 map , reduce , filter 를 사용하세요. 이렇게 하면 함수 내에서의 변경을 최소화하여 Airbnb 스타일 가이드 와 일치합니다. // bad users.forEach((user, index) => { user.id = index; }); // good const usersWithId = users.map((user, index) => { return Object.assign({}, user, { id: index }); }); 매개변수 수 제한 # 함수나 메서드의 매개변수가 3개를 초과하는 경우, 매개변수 대신 객체를 사용하세요. // bad function a(p1, p2, p3, p4) { // ... }; // good function a({ p1, p2, p3, p4 }) { // ... }; DOM 이벤트 처리 시 클래스 사용 지양 # 클래스의 유일한 목적이 DOM 이벤트를 바인딩하고 콜백을 처리하는 것이라면, 함수를 사용하는 것을 권장합니다. // bad class myClass { constructor(config) { this.config = config; } init() { document.addEventListener('click', () => {}); } } // good const myFunction = () => { document.addEventListener('click', () => { // handle callback here }); } 생성자에 엘리먼트 컨테이너 전달 # 클래스가 DOM을 조작하는 경우, 엘리먼트 컨테이너를 매개변수로 받으세요. 이렇게 하면 유지 관리성과 성능이 향상됩니다. // bad class a { constructor() { document.querySelector('.b'); } } // good class a { constructor(options) { options.container.querySelector('.b'); } } 문자열을 정수로 변환 # 문자열을 정수로 변환할 때, Number 는 의미적으로 더 읽기 쉽습니다. 둘 다 허용되지만 Number 는 유지 관리성 면에서 약간의 이점이 있습니다. parseInt 는 반드시 기수(radix) 인수 를 포함해야 합니다. // bad (missing radix argument) parseInt('10'); // good parseInt("106", 10); // good Numbe