Google Javascript Style Guide

발생일: 2011.12.17

문제:
Google Closure Compiler를 살펴보다가
구글의 꼼꼼한 자바스크립트 스타일 가이드를 보고 마음에(?) 드는 부분이 있어 메모해둔다.


해결책:
먼저, Google Closure Complier는 간단하게는 자바스크립트 압축 도구라 할 수 있고,
나아가서는 자바스크립트를 미리 컴파일 해볼 수 있는 도구이다.

재미있는 건, 컴파일 시점에 주석으로 달아놓은 어노테이션을 분석해서,
코드 내에서 의도하지 않은 방향으로 쓰인 경우를 찾아 경고해준다는 거다.

컴파일러와 어노테이션이 밀접하게 관련이 있어서이겠지?
구글의 자바스크립트 스타일 가이드의 Type Expression 부분이 유난히 꼼꼼하게 설계되어 있다.
(JSDoc과는 비교가 안될 정도로 꼼꼼하다)


변수의 타입을 설정하거나 파라미터의 타입을 설정할 때,
optional 한 것을 구분하는 것은 물론, null 여부도 구분할 수 있다.

  {Object} : (필수) Object
  {Object=} : (옵션) Object 이지만 undefined도 가능하다.
  {!Object} : (필수) Object이며, null 이어서는 안된다.
  {?Object} : (필수) Object 또는 null 이어야 한다.  
 

Arry나 Object 내의 타입을 설정하는 부분도 꼼꼼하게 정의할 수 있다.

  {Array.<number>} : number로 이루어진 배열. e.g. [1, 2, 3]
  {Object.<string, Object>} : key가 string, value가 Object인 레코드 타입.


function의 경우, 파라미터와 리턴 타입은 물론 context까지 정의할 수 있다.

  {function(number): string} : number를 파라미터로 받고, string을 리턴하는 함수.
  {function(this:ui.Menu, number)} : number를 파라미터로 받고, ui.Menu를 컨텍스트로 갖는 함수.
  {function(...number)} : 다수의 number를 파라미터로 받는 함수.


익숙해지면, 가독성도 좋을 것 같고, 무엇보다 미리 컴파일해볼 수 있다는 데에 메리트가 있다.

스타일 가이드에 대한 자세한 내용은 아래 링크를 참고하자.
http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml#JavaScript_Types
http://code.google.com/intl/ko-KR/closure/compiler/docs/js-for-compiler.html#types