[읽기 좋은 자바스크립트 코딩 기법] 문장과 표현식(조건문과 반복문)

3 문장과 표현식

자바스크립트에서 if나 for같은 제어문을 사용하는 방법은 2가지가 있다.

 
//나쁜 예
if(condition)
	doSomething();

//나쁜 예
if(condition) doSomething();

//좋은 예
if(condition){
	doSomething();
}

//나쁜 예
if(condition){ doSomething(); }

처음 2개의 예제는 중괄호 없이 if 문을 사용하고 있다.

크락포드의 코드  컨벤션과 jQuery 코어 스타일가이드 등 여러 가이드에서 이러한 방식을 금지하고 있다.

한줄에 입력하는 방식은 오해의 소지가 크기 때문이다.

이를테면 아래와 같은 코드는 어떤의미인가?

if(condition)
	doSomething();
	doSomethingElse();

condition이 true일때 doSomething()을 실행하겠다는 것인가?

아니면 doSomethingElse()도 같이 실행되어야하지만 개발자가 실수를 한것인가?

여러 오해의 소재가 있으므로 명확하게 {} 를 하는것을 추천한다.

3.1 중괄호 넣기

 중괄호를 넣는 위치도 자바스크립트에서는 한가지 방식만을 사용하는 것이 좋다.

이를테면 function의 중괄호는 아래와 같이 2가지 방식으로 작성할 수 있다.

//좋은 예
if(condition){
	doSomething();
}else{
	doSomethingElse();
}

//나쁜 예
if(condition)
{
	doSomething();
}else
{
	doSomethingElse();
}

위와 같은 방식에서 1번째 방식을 사용해야 하는 이유는

자바스크립트는 세미콜론자동입력(ASI) 기능이 있어 2번째 나쁜 예의 경우

자바스크립트에서는 아래와 같이 해석해버린다.

//나쁜 예
if(condition);
{
	doSomething();
}else;
{
	doSomethingElse();
}

그러므로 1번째 방식을 사용하는 것이 좋다.

3.2 for 반복문 

for문을 사용하면서 사람들이 가장 많이 하는 오해는 for안의 변수는 for 블록 안에서만 작동한다고 생각한다는 점이다. 아래의 코드를 보자.

for(var i=0;i<items.length;i++){

getItem(i);

}

return i;

위와 같은 코드는 결국 자바스크립트 내에서는

  var i;

for(i=0;i<items.length;i++){

getItem(i);

}

return i;

와 같다. 

그러므로 오해의 소지를 방지하기 위해 2번째 코드로 작성하는 것을 추천한다.