JS 코드 스타일 가이드

一。기본 포맷

들여쓰기

각 레벨 4 개의 공백을 권장. 에디터에 tab = 4 공백을 설정하여 자동 변환

세미콜론

세미콜론을 생략하지 마십시오. ASI(자동 세미콜론 삽입) 오류 방지

행폭

1 행 코드는 80 자를 초과하지 않음. 너무 길면 연산자로 수동 줄바꿈

줄바꿈

연산자는 이전 행 끝에. 다음 행은 2 레벨 들여쓰기. 대입문은 등호 뒷부분과 맞춤

빈 행

함수 선언과 함수 선언, 변수 선언과 함수 선언, 함수 내부 로직 블록 사이는 빈 행으로 구분

저자 니콜라스는 흐름 제어 블록 상단에도 빈 행을 둘 것을 권장하지만, 예시는 명확하지 않음

명명
- 변수명/함수명: Camel(카멜) 규칙. 첫 단어 첫 글자 소문자, 이후 단어 첫 글자 대문자, 나머지 소문자
- 상수명: C 언어식. 모두 대문자, 언더스코어로 단어 구분
- 생성자: Pascal 규칙. 모든 단어 첫 글자 대문자, 나머지 소문자
리터럴
- 문자열: 큰따옴표로 감쌈. 줄바꿈은 [+] 연산자 사용.\이스케이프 문자는사용하지 않음
- 수치: 소수점 전후를생략하지 않음. 8 진수 형식은사용하지 않음
- Null: null 을 Object 의 플레이스홀더로만 사용. 인자 검출에는사용하지 않음. 초기화되지 않은 변수 검출에도사용하지 않음
- Undefined: 모든 객체를 null 로 초기화하여 미정의와 미초기화 구분
- 객체 리터럴/배열 리터럴: 생성자 방식으로 객체와 배열 선언하지 않음

二。주석

P.S. 책에 매우 고전적인 설명이 있습니다:

Appropriately written comments help tell the story of code, allowing other developers to drop into a part of the story without needing to hear the beginning.

단일 행 주석
- 행말: 1 레벨 들여쓰기로 코드 구분, // 뒤에 공백 1 개
- 독립 행: 아래를 주석. 주석 대상 코드와 같은 들여쓰기
- 행두: 여러 행 코드 주석
여러 행 주석

대규모 주석을 감쌈. Eclipse 스타일 권장. 예:

    code
    
    /* 
     * comment line1
     * comment line2
     */

주의:

-  여러 행 주석 위에 빈 행 1 개

-  \*별표 뒤에 공백 1 개

-  여러 행 주석은 최소 3 행 (1 행目과 마지막 행 뒤에는 주석 추가 안 함)

3. 어디에 주석을 추가하는가

-  자기 설명できない 코드

-  의도적이지만 오류처럼 보이는 곳

-  브라우저용 hack

4. 문서 주석

각 함수에 주석 추가. 기능 설명, 파라미터, 반환값, 스로우되는 오류 등. 권장 Eclipse 스타일:

    /**
     * 지정 요소를 기본 배열에 추가
     * 
     * @method add
     * @param {Number} 추가할 요소
     * @return {Boolean} 추가 성공/실패
     * @throw {TypeError} 파라미터 타입이 일치하지 않음
     */
    function add(item){
        if(typeof item === "number"){
            arr.push(item)
        }
        else{
            throw new TypeError();
        }
    }

三。문과 식

중괄호 정렬 방식

행말 스타일 권장. 다음 행 스타일 비권장

블록 문 공백

if 뒤 괄호 부분 전후에 각각 공백 1 개. 예:

    if (expr) {
        code
    }

3. switch 문

-  들여쓰기: case 는 switch 와 맞춤, break 는 1 레벨 들여쓰기

-  case 관통: 빈 행 또는 주석//falls through 로 case 관통이 의도적임을 표시

-  default: default 를 유지, 또는 주석//no default 로 default 없음 표시

P.S.『JavaScript 언어 정수』의 저자 더글라스는 case 관통을 사용하지 말아야 함 (계륵이라 칭함). 버그를 일으키기 쉬움. 니콜라스는 빈 행 또는 주석으로 설명하면 된다고 생각

with 문

사용하지 않음

for 루프

모든 변수는 함수체 상단에서 선언. for 루프 초기화 부분에 사용되는 변수 포함. hosting(호이스팅) 으로 인한 버그 회피 (전역 변수를 차폐할 가능성)

for-in 루프

배열 순회에는사용하지 않음. 사용할 때는 hasOwnProperty 로 필터. 의도적으로 프로토타입 속성을 순회하는 경우 주석으로 설명

四。변수, 함수, 연산자

변수 선언

함수체 = 변수 선언 + 함수 선언 + 로직문. 각 부분을 빈 행으로 구분

함수 선언

선언 후 사용. 함수 선언을 if 브랜치에 배치하지 않음. 브라우저 이해가 다르고, ES 에 표준 없음

함수 호출

괄호 전후는공백 추가하지 않음. 블록 문과 혼동 회피

익명 함수 즉시 실행

즉시 실행하는 익명 함수를 괄호로 감쌈. 익명 함수 선언과 혼동 회피

엄격 모드

전역 작용역에서 엄격 모드를 활성화하지 않음. 함수 내부에서만 활성화. 여러 ��수에는 익명 함수 즉시 실행으로 엄격 모드의 작용역 한정

등가 판단

=== 와!== 만 사용

eval

eval() 과 new Function() 은사용하지 않음. 익명 함수로 setTimeout() 과 setInterval() 최적화

기본 포장 타입

new Boolean(), new String(), new Number() 는사용하지 않음

五。스타일이 좋은 모범 코드

var obj = { // 객체 리터럴의 들여쓰기 정렬에 주의
    
    attr1: 1,  // 콜론 전후 공백과 본 행 전 빈 행에 주의
    attr2: (function() {
    
        // IIFE 특별한 괄호 위치에 주의. (function(){})() 아님
    }()),
    _privateAttr: 2,   // 프라이빗 속성명은 언더스코어로 시작
    
    doSomething: function(arg) {   // 메서드명은 동사로 시작, 언더스코어 사용 안 함
        
        // if-else if-else 공백 사용과 줄바꿈 방식에 주의
        if (arg === 1) {
        
        } else if (arg === 2) {
        
        } else {
        
        }
    }
}

function Fun() {    // 생성자명은 비동사로 시작, Pascal 규칙 (본 행 2 공백에 주의)

    // 여러 변수는 함께 선언, 등호 맞춤에 주의 (주석 앞에 빈 행)
    var count   = 10,       // 변수명은 명사로 시작, fun 과 혼동 회피, 언더스코어 사용 안 함
        isTrue  = (2 > 1),  // 오른쪽에 비교 연산이 있으면 오른쪽 전체에 괄호
        color   = 0xcccccc; // 10 진수와 16 진수 사용 가능, 8 진수는 사용 안 함 (예: 011)
        
    /**
     * 메서드 주석은 이 문서 주석 형식 사용, @param 등
     * 여러 행 주석은 각 행 앞에* 보장, 정렬에 주의
     * 모든 주석 (행말 단일 행 주석 제외) 앞에 빈 행
     */
    function fun(arg1, arg2) {  // 본 행 3 공백에 주의 (함수 선언과 변수 선언은 빈 행으로 구분)
        
        var arr = [1, 2, 3],    // 기본값 있는 속성 먼저 선언
            i,                  // 루프 (for-in 포함) 초기화 부분에 사용되는 변수도 사전 선언
            len;                // 기본값 없는 속성 나중에 선언
            
        for (i = 0, len = arr.length; i < len; i++) {
            
            // for 구조 내 공백 사용에 주의
        }
        
        for (i in arr) {
            
            // TODO: 주석, 미완료 작업 표시
            // HACK: 주석, 특정 브라우저용 hack 표시
            // XXX: 주석, 매우 중요한 오류 표시
            // FIXME: 주석, 덜 중요한 오류 표시
            // REVIEW: 주석, 더 나은 구현 방법이 있을 가능성 표시
        }
        
        while (i < len) {
            
            switch (i) {
            
                case 1:
                    /* falls through */
                    
                case 2:
                    break;
                    
                default:
                    break;
                    
                // 또는
                // no default
            
            }
        }
        
        do {
            
            // 모든 문 블록 앞에 빈 행, 코드 블록 주석에는//사용, /**/는 주석 블록용
//            try {
//                //
//            } catch (err) {
//                //
//            } finally {
//               //
//            }
        } while (i < len);  // while 전후 공백에 주의
        
        return (len > 1 ? true : false);    // 반환값이 복잡한 식이면 전체에 괄호
    }
}

###참고 자료

『Maintainable JavaScript』
『JavaScript 언어 정수』

一。기본 포맷

二。주석

三。문과 식

四。변수, 함수, 연산자

五。스타일이 좋은 모범 코드

댓글

댓글 작성