[ maintainable javascript ]

(http://book.naver.com/bookdb/book_detail.nhn?bid=7112528)

1. 기본 포멧

1.1 들여쓰기

탭을 이용한 들여쓰기

장점

탭과 들여쓰기 단계가 일대일로 대응되어 논리적
각 텍스트 에디터에서 탭 크기를 원하는 대로 설정할 수 있어 개발자의 취향에 맞게 원하는 대로 볼 수 있음

단점

시스템마다 탭 크기가 다르게 표현되기 때문에 시스템에서 열었던 파일을 다른 데서 열었을 때 자신이 보던 방식과 달라 난감할 수 있음

공백을 이용한 들여쓰기

공백으로 들여쓰기를 처리하는 방법은 2/3/8개의 공백 중 한가지 방식을 이용하는 것이 일반 적이며 이 방법은 JS뿐 아니라 다른 프로그래밍 언어에서도 전반적으로 사용되는 스타일 가이드라인

장점

어떤 에디터나 시스템에서도 똑같이 보이므로 모든 개발자가 소스코드를 동일하게 볼 수 있음
에디터에서 탭 키를 누르면 여러 개의 공백이 입력되도록 설정할 수도 있어 사용의 불편은 없음

단점

개발자 중 한명이라고 에디터 설정을 잘못하면 서식에 문제가 생길 수 있음

참고할만한 다른 스타일 가이드의 들여쓰기 방법

jQuery 코어 스타일 가이드에서는 탭으로 들여쓰기한다.
더글라스 클락포드의 자바스크립트 코드 컨벤션에서는 공백 4개로 들여쓰기한다.
sproutCore(js프레임워크의 한 종류) 스타일 가이드에서는 공백 2개로 들여쓰기한다.
dojo 스타일 가이드에서는 탭으로 들여쓰기한다.

들여쓰기 단계마다 공백 4개를 사용하길 추천합니다. 공백 2개로 들여쓰면 들여쓰기를 했는지 구분하기 어려울 수 있습니다.

1.2 문장 종료

c++이나 자바처럼 c와 비슷한 언어는 보통 세미콜론으로 문장을 끝냅니다. 흥미롭게도 가장 혼란스러운 것이 바로 자바스크립트 문장이 세미콜론(;)이나 줄 바꿈으로 끝난다는 것 입니다.

자브스크립트에서는 ASI(Automatic Semicolon Insertion) 매커니즘 덕분에 세미콜론을 하지 않아도 정상적으로 동작함 ASI는 코드에서 세미콜론이 필요한 자리를 찾고 없으면 세미콜론을 넣어주는 데 대부분 정확하게 찾아 문제가 없습니다. 그러나 ASI가 세미콜론을 찾는 규칙은 기억하지 어려울 정도로 복잡하므로 명시적으로 세미콜론을 넣기를 권장 합니다.

1.3 줄 길이

줄 길이는 들여쓰기와 깊은 관계가 있습니다. 코드가 가로 스크롤이 생길 만큼 길면 읽기 꽤 불편합니다. 요즘은 큰 모니터를 많이 쓰는 데 넓은 화면에서도 줄 길이를 적당히 유지하는 편이 생산성 면에서 더 좋습니다.
줄 길이 80자는 다른 언어에서도 많이 사용하는 코딩 규칙으로 아래는 일반적으로 추천하는 줄 길이 입니다.

자바 코딩 규칙에서는 소스 코드의 최대 줄 길이는 80자 문서화 주석의 경우 70자로 명시
안드로이드 코드 스타일 가이드 배포본에는 최대 100자로 명시
루비 사용법 가이드(비공식)에서는 최대 80자로 명시
파이썬 스타일 가이드라인에서는 라인당 79자로 명시

대부분의 자바스크립트 스타일 가이드라인에서는 줄 길이를 정의하지 않지만 크락포드의 코드 컨벤션에서는 최대 80자로 정의하고 있으며 개인적(이 책의 저자)으로도 80자 제한을 선호합니다.

1.4 줄 바꿈

줄이 최대 글자 수에 도달하면 두 줄로 나눠야하는 데 보통은 연산자 다음에 줄을 바꾸고 두 단계 들여쓰기를 합니다.


// 좋은 예
callFunction(document, element, window, 'some string value', true,  123, 
    navigator
);

if (idLeapYear && isFebruary && day == 29 && itsYourBithDay &&
    noPlans) {
  waitAnotherFourYears();
}

// 변수의 경우 두 버내 줄의 들여쓰기는 첫 번재 줄의 변수와 열을 맞춥니다.
var result = createSomething + anotherThing + yetAnotherThing + someThingElse +
             anotherSomethingElse;

1.5 빈 줄 넣기

빈 줄은 코드 스타일에서 자주 간과하는 부분으로 코드는 하나의 커다란 덩어리보다는 여러 개의 문단으로 구성되어야 합니다.


// 가독성을 높이기 위해 빈줄을 추가
if (wl && wl.length) {
  
  for (i = 0, l = wl.length; i < l; i++) {
    p = wl[i];
    type = Y.Lang.type(r[p]);
    
    if (s.hasOwnProperty(p)) {
      
      if (merge && typeof == 'object') {
        Y.mix(r[p], s[p]);
      }else if (ov || !(p in r)) {
        r[p] = s[p];
      }
    }
  }
}

아래와 같은 경우 빈 줄을 추가하는 것이 좋습니다.

메서드 사이
메서드 내 지역 변수와 첫 번째 문장 사이
한 줄 또는 여러 줄 주석 전
가독성을 높이기 위해 메서드 내에서 논리적으로 구분 되는 곳

1.6 이름 규칙

자바스크립트의 기반이 되는 ECMA Script에서는 낙타 표기법(camel case)로 작성되어 있으며 낙타 표기법은 소문자로 시작하고 새로운 단어를 사용할 때마다 첫 문자는 재문자로 입력하는 방식으로 아래와 같이 사용 합니다

var thisIsMyName;
var anotherVariable;
var aVeryLongVariable;

일반적으로는 자신이 사용하는 언어의 표준 라이브러리에서 따르는 이름 규칙을 사용해야 합니다.
대부분의 자바스크립트 개발자들은 변수명과 함수명을 지을 때 낙타 표기법을 사용하지만 보통 스타일 가이드에는 이에 덧붙여 더 상세한 스타일까지 명시합니다.

1.6.1 변수와 함수

변수명은 낙타 표기법을 사용하고 명사로 시작해야 합니다. 변수명은 명사로, 함수명은 동사로 시작하면 서로 구분하기 쉬워집니다.

var count = 10;
var myName = 'Nicholas';
var found = true;

function getName() {
  return myName;
}

변수명을 새로 짓는다는 것은 과학보다는 예술에 가깝지만 의미를 빠르고 정확하게 전달하기 위해 가능한 짧게 정해야 합니다.

변수명은 변수 이름만으로 데이터 타입을 알 수 있도록 만듭니다

숫자의 경우 count, length, size
문자열의 경우 name, title, message
반복문에 사용되는 변수의 경우 i, j, k

foo, bar, temp와 같이 의미 없는 변수명을 정하면 다른 사람이 전체 코드를 보지 않으면 변수가 어떻게 사용되는지 알 수 없으므로 주의해야 합니다.

함수와 메서드명은 첫 번째 단어는 동사로 시작해야 합니다. 보통 많이 사용하는 동사는 아래와 같습니다.

can - boolean을 반환하는 함수
has - boolean을 반환하는 함수
is - boolean을 반환하는 함수
get - boolean 이 외의 값을 반환하는 함수
set - 값을 저장하기 위해 사용하는 함수

1.6.2 상수

ES6이전까지는 자바스크립트에 상수 개념이 없었습니다. 있다 해도 개발자들이 변수를 선언해 상수처럼 사용하였습니다. 구분을 위해 변수와 이름 규칙을 다르게하며 C에서 사용하는 규칙을 가져와서 상수는 모든 문자를 대문자로 쓰고 단어가 바뀔 때는 밑줄(underscore)를 사용합니다.

1 2	var MAX_COUNT = 10; const URL = 'http://www.nczonline.net/';

1.6.3 생성자

자바스크립트에서 생성자는 new 연산자로 새로운 객체를 생성하는 데 사용됩니다. 자바스크립트에는 Object, RegExp등 내장된 생성자가 많이 있습니다. 표준 라이브러리의 규칙을 따라 자바스크립트에서 생성자는 파스칼 표기법(pascal case)을 사용합니다.

파스칼 표기법은 낙타 표기법과 유사하지만 첫 글자는 대문자로 시작합니다 예를 들면 anotherName가 아닌 AnotherName로 표기하게되며 이렇게 표기하면 생성자, 변수, 함수를 쉽게 구분할 수 있습니다. 생성자는 타입으 ㅣ인스턴스를 만드는 데 사용되므로 이름은 명사로 짓습니다.

function Person(name) {
  this.name = name;
}

Person.prototype.sayName = function() {
  alert(this.name);
};

var me = new Person('Nicholas');

클락포드의 코드컨벤션, 구글 자바스크립트 스타일가이드, dojo스타일 가이드 모두 파스칼표기법을 추천하며 JSLint는 생성자가 대문자로 시작하지 않거나 생성자 함수가 new연산자로 시작하지 않으면 경고 메시지를 출력 합니다.

maintainable javascript - 1. 스타일 가이드라인