코딩컨벤션 - 자바스크립트 편 (Javascript Coding Convention)

코딩 컨벤션 은 가독성을 증진시키고 협업하는 과정에서 일관된 코드 스타일을 유지하는 데 있어서 중요한 역할을 한다.

자바스크립트에서의 몇 가지 코딩컨벤션(스타일 가이드)를 정리해보자

1. 파라미터의 기본값을 설정

2. 맨 위에서 변수를 선언하고 초기화

3. camelCase사용

4. ===, !=== 사용

5. 여는 괄호 다음과, 닫는 괄호 이전에 공백은 없음

6. = + - * / 연산자와 , 양옆에 스페이스 넣기

7. 주석사용 - 공백 추가, 열 맞추기,

// good
if (ture) {
    // 한줄 주석
    getUser();
}

if (age > 20) {

    /*
     * 여러줄 주석에는 한줄 주석을 사용하지 맙시다
     * 공백 추가, 열 맞추기 필수
     */
    getUser();
}

5. 할당 연산자 사용시 할당 값이 비교 연산식이면 괄호로 감싸기

let isBaby = (age < 10);

6. 코드블럭의 인덴테이션은 보통 한번의 탭(공백4개)로 설정

7. 한 줄에 80자 미만

8. 글로벌 변수 사용 지양

9. var말고 const/let 사용

10. 상수는 대문자를 사용하기, 여러단어면 _사용

11. class는 PascalCase로 작성

12. 읽기 쉽고 알기쉬운 변수명으로 만들기

• 복수화(pluralizing) 시켜 이름을 명확히 한다.

// great - "names" implies strings
const fruitNames = ['apple', 'banana', 'cucumber'];
const fruits = [{name: 'apple',genus: 'malus’}]

• boolean같은 경우 “is”, “has”, “can”과 같은 접두어와 같이 사용한다.

// good
const isOpen = true; const canWrite = true; const hasFruit = true;

• 숫자일 경우 maximum, minimum, total과같은 단어로 설명한다.

// good
let totalNum = 54;

• 함수일경우 동사와 명사를 사용하여  actionResource의 형식을 따르는 것이 좋다

// good
const getUser = (firstName, LastName) => firstName + LastName
/* 검증코드에는 vaildate 단어 사용 등... */

실제 프로젝트를 진행할 때 위 요소 중 몇 가지는 .prettierrc 파일로 개발시작전에 협의하고 자동 정렬되는 식으로 진행한다.

참고

https://www.robinwieruch.de/javascript-naming-conventions
https://velog.io/@cada/자바스크립트-코딩-및-네이밍-컨벤션-1편