가독성이 좋은 자바스크립트[javascript] 코딩 - 스타일 가이드라인2

공백을 이용한 들여쓰기에 이어 가독성에 도움이 되는 스타일가이드라인을 이어서 작성합니다.

1. 문장 종료

C++이나 자바처럼 C와 비슷한 언어는 보통 세미콜론으로 문장을 끝냅니다.

흥미롭게도 가장 혼란스러운 것이 바로 자바스크립트 문장이 세미콜론이나 줄 바꿈으로 끝난다는 점입니다.

 

다음 두 예제 모두 자바스크립트에서 유효한 문장입니다.

 

// 세미콜론으로 문장을 끝냄 : 유효함

var name = "홍길동";

function SayName() {

    alert(name);

}

 

// 줄 바꿈으로 문장을 끝냄 : 유효하지만 권장하지 않음

var name = "홍길동";

function SayName()

    alert(name)

 

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

 

예제)

 

이 예제에서 우리가 보기에 getData()는 데이터가 포함된 객체를 반환하는 함수입니다. 하지만 ASI는 return문 이후에 새로운 줄이 있으니 당연히 세미콜론을 삽입합니다. 따라서 getData 함수는 undefined를 반환합니다. 이 문장을 다음 예제처럼 return 문과 같은 줄에 중괄호를 표기하면 정상 값을 반환합니다.

 

2. 줄 길이

줄 길이는 들여쓰기와 깊은 관계가 있습니다. 코드가 가로 스크롤이 생길만큼 길면 읽기 꽤 불편합니다. 요즘은 큰 모니터를 많이 쓰는데, 넓은 화면에서도 줄 길이를 적당히 유지하는 편이 생산성 면에서는 더 좋습니다. 줄 길이 최대 80자는 다른 언어에서도 많이 사용하는 코딩 규칙입니다. 과거에는 텍스트 에디터에서 한 줄에 최대 80자밖에 보이지 않아서 80자 제한을 둬야 했습니다. 80자가 넘으면 예상치 못하게 겹쳐지거나 사라져버렸기 때문입니다. 물론 최신 텍스트 에디터는 예전보다 훨씬 성능이 좋아졌지만, 여전히 최대 80자 제한을 많이 씁니다. 다음은 일반적으로 추천하는 줄 길이입니다.

 

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

 

3. 줄 바꿈

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

공백 4개로 들여쓴 예제를 살펴봅니다.

 

이 예제에서 콤마는 연산자이므로 이전 줄에 있어야 합니다.

연산자 위치는 ASI 메커니즘과 연관이 있는데 연산자가 다음 줄로 넘어가면 ASI가 자동으로 세미콜론을 삽입할 수도 있어 굉장히 중요합니다. 따라서 줄을 바꿀 때 연산자를 마지막에 찍는 습관을 들이면 ASI 에러를 방지할 수 있습니다.

 

다음 문장에도 줄 바꾸기 패턴을 적용할 수 있습니다.

if(aa && bb && day == 29 && birthday &&

   noPlans) {

    waitAnotherFourYears();

}

 

예제와 같이 if 조건문은 && 연산자 이후에 줄을 바꿔 두 줄로 나눕니다. 이 때, if문 안의 문장은 줄 바꿈과 무관하게 한 단계 들여쓰기를 하는 편이 가독성이 더 높습니다.

 

줄을 바꿀 때는 한 가지 예외 사항이 있습니다. 변수를 다른 변수에 대입할 때 두번째 줄의 들여쓰기는 첫 번째 줄의 수의 변수와 열을 맞춥니다.

 

이 코드와 같이 변수는 첫번째 줄의 변수와 열을 맞춰 들여 쓰면 첫 번째 줄과 관련 있다는 것을 쉽게 알 수 있어 가독성이 더 높아집니다.

 

그럼 이만.

끝.