[JavaScript] 읽기 쉽고, 유지보수하기 쉬운 코드 작성하기 - 코딩규약

■ 깔끔한 코드, 작성하고 있는가?

 AJAX가 보금되에 따라 JavaScript에서도 비교적 대규모의 코드를 작성할 기회가 많아졌다. 그에 따라서 프로그램을 단 한번만 작성해서 「자, 이걸로 마지막!」 이라고 하는 일은 점차 없어지게 되었다. 애플리케이션을 운용해 나가는 상황에서 버그가 발견되면 수정하거나 나중에 발생한 요구 안건에 따라 코드를 추가 / 갱신하는 등 프로그램은 항상 변경될 가능성에 노출되어 있다.

 그리고 프로그램을 변경하는 경우에 우선적으로 필요로 하는 것은 「코드를 읽어 이해하는」 분석 작업이다. 이 「읽고 이해하는」이라고 하는 작업은 때로는 「작성하기」보다 큰 이인경우도 있다. 자신이 작성한 코드라 해도 시간이 지난 후에 읽어보게 되면 의외로 뭐가 뭔지 알지 못하는 경우가 많은데, 그것이 타인의 코드라면 더 말할 것도 없다. 그러므로 일상적으로 발생할 수 있는 변경을 생각하면 깔끔한(=읽기 쉬운) 코드를 기술하는것이 중요하다.

 깔끔한 코드라는 것이 어떤 건지 이미지가 좀처럼 떠오르지 않을 수도 있다. 그런 사람은 코딩 규약이라는 것을 추천한다. 코딩 규약이란, 이른바 변수의 명명규칙에서부터 스페이스나 인덴트 넣는 방법, 코멘트 쓰는 법 등 통일성을 취한 코드를 기술하는 데 필요한 룰을 정하는 것이다. 규약에 따라 코드를 기술함으로써 최소한 「더럽지 않은」 코드를 기술할 수 있게 된다.

JavaScript에서도 이러한 코딩 규약이 Mozilla Developer Center 에서 JavaScript Style Guide 로 공개되어 있다.

여기에 정해져 있는 규약이 전부는 아니지만, 한번 훑어보면 좋은 공부가 될 것이다.

다음은 JavaScript Style Guide 에서 제시하고 있는 주요 포인트들이다(어디까지나 규약이며, 구문 규칙이 아닌 점에 주의하길 바란다).


#01. 기본

 -. 1행당 자릿수는 80문자 이하로 할것
 -. 파일의 말미는 개행할 것
 -. 함수나 객체 등의 정의 블록의 전후는 공백 행으로 단락지을것
 -. 문자 코드 세트는 UTF-8

#02. 공백

 -. 인스턴트는 스페이스 2개로 표현할 것(탭은 사용하지 않는다.)
 -. 2항 연산자는 공백으로 단락지을것
 -. 콤마 / 세미콜론, 키워드의 후방에는 공백을 포함할것(다만, 줄 끝의 공백은 불필요)

#03. 명명규칙

 -. 변수, 함수명은 선두 소문자의 camelCase 형식
 -. 정수명은 모두 대문자의 언더스코어 형식
 -. 생성자(객체)명은 선두 대문자의 CamelCase 형식
 -. 프라이비트 멤버는 「 _ 」로 시작할것
 -. 이벤트 핸들러 함수는 [on]으로 시작할것

#04. 그 외

 -. 모든 변수는 선언, 초기화할 것
 -. 변수의 선언이 중복되지 않을 것
 -. 배열, 객체의 생성에는 […], {…} 등의 리터럴 구문을 이용할것
 -. 논리값 true / false와 비교하지 않을것



■ Google 표준의 코딩 스타일

또한 Google이 제공하고 있는 Google JavaScript Style Guide 도 있다. 앞의 것과 중복하지 않는 범위에서 중요한 것을 정리해 두었다.

 · .js 파일의 이름은 소문자로 통일
 · 세미콜론은 생략하지 않는다.
 · 문자열의 괄호에는 「"」쌍 따옴표 보다 「'」홑 따옴표를 우선해 이용한다.
 · 기본 데이터형(String)이나 number, boolean등)이 랩퍼 객체는 사용하지 않는다.
 · 네임스페이스를 이용하고, 글로벌 레벨의 이름은 최소한으로 억제한다.
 · 블록을 나타내는 {...}의 전에 개행은 너지 않는다.
 · eval 함수는 deserialize에서만 이용한다.
 · 빌트인 객체의 프로토타입은 고쳐 써선 안 된다.
 · with 명령은 이용하지 않는다.
 · for...in 명령은 연관배열 / 해시에서만 이용한다.

여기서 나타나고 있는 가이드 라인은 코드를 일기 쉽게 하기만 할 뿐만 아니라 안전한 코드를 기술한다는 의미에서도 중요하다.