자바스크립트에서 if나 for와 같이 "문장"을 사용하는 방법은 두가지
여러 줄을 중괄호로 감싸는 방법과 중괄호를 사용하지 않는 방법
// 나쁜 예. 문법 상 문제는 없지만 권장하지 않음. if (condition) doSomething(); // 나쁜 예, 문법 상 문제는 없지만 권장하지 않음. if (condition) doSomething(); // 좋은 예 if (condition) { doSomething(); } // 나쁜 예, 문법 상 문제는 없지만 권장하지 않음. if (condition) { doSomething(); } |
복합문은 반드시 중괄호를 사용.
한줄에 입력하지 말고 여러 중에 걸쳐 입력. 중괄호가 없으면 오해의 소지 발생.
if (condition) doSomething(); doSomethingElse(); 이 코드는 작성자의 의도를 알기 어렵다. 이렇게 작성할 일은 없겠지만, if문 안에 처리를 하려 하였으나 중괄호를 넣지 않은 것인지 doSomething()만 실행할 목적이였는지 분간하기 어렵다. |
다음 모든 복합문에서는 중괄호를 반드시 사용한다.
if for while do... while try... catch.... finally |
3.1 중괄호 넣기
- 중괄호 위치는 주로 두 가지 스타일로 많이 사용.
- 첫 번째 스타일은 자바에서 사용하는 스타일
- 자바 프로그래밍 언어 코드 컨벤션, 크락포드 코드 컨벤션, jQuery 코어 스타일 가이드, SproutCore 스타일 가이드, 구글 자바스크립트 스타일 가이드, Dojo 스타일 가이드에서도 해당 스타일 권장.
if (condition) { doSomethind(); } else { doSomethingElse(); } |
- 두 번째 스타일은 복합문이 시작하는 다음 줄에 중괄호를 입력하는 방식
- 해당 스타일은 비주얼 스튜디오에서 이 방식을 강제화하고 있어 C#에서 주로 사용.
- 자바스크립트에서는 권장하지 않으며, 구글 자바스크립트 스타일 가이드는 세미콜론 자동 입력(ASI) 에러가 발생할 수 있다는 이유로 사용을 금지하고 있음.
if (condition) { doSomethind(); } else { doSomethingElse(); } |
3.2. 복합문에서의 공백
- 복합문을 시작할 때 공백을 입력하는 방식은 선호에 따라 결정할 문제.
- 일반적으로 세 가지 스타일로 복합문에 공백을 입력.
- 문장 이름, 괄호, 중괄호 사이에 아무 공백 없음. - Dojo 스타일 가이드에서 해당 스타일 권장. if(condition){ doSomething(); } - 괄호를 열기 전과 닫은 후에 공백 하나씩 입력, - 크락포드 코드 컨벤션, 구글 자바스크립트 스타일 가이드에서 해당 스타일 권장 if (condition) { doSomething(); } - 시작하는 괄호와 닫는 괄호 앞 뒤에 공백 입력. - jQuery 코어 스타일 가이드에서 해당 스타일 권장. if ( condition ) { doSomething(); } |
3.3 switch 문
- 초기 switch문은 C에서 시작되어 자바에 영향을 미치고 자바스크립트에 적용되는 과정을 거쳐 포맷이 너무 다양하고 다루기 까다롭다.
- 문법은 비슷하지만, 자바스크립트의 switch문은 다른 언어와 동작이 다름.
- 자바스크립트의 switch문은 어떤 타입이든 사용가능, 어떠한 표현식도 case문제 들어갈 수 있음. (다른 언어에서는 기본 데이터 타입과 상수만 사용가능)
3.3.1 들여쓰기
- 아래와 같은 자바 스타일의 switch문을 대부분 사용.
switch (condition) { case "first": // code break; case "second": // code break; case "third": // code break; default: // code } |
해당 포맷의 특징은 다음과 같다.
- 각 case 문은 switch문을 기준으로 한 단계 들여쓰기. - 두 번째 case 문 부터 case 문 이전과 이후에 빈 줄을 삽입. |
대부분의 에디터가 이 포맷의 switch문을 자동완성으로 지원.
- 코딩 스타일에 대한 관점이 서로 다르므로 어떤 switch문을 사용하느냐는 모두 선호에 따라 결정할 문제.
3.3.2 다음 case 문까지 실행하는 switch문
- 또 다른 논쟁거리는 "다음 case문 까지 실행하는 switch문(fall-through)를 허용할 것인가".
- case 문에서 실수로 break문을 빠뜨려 버그가 발생하는 일은 흔히 발생.
- 더글라스 크락포드는 이런 실수를 방지하고자 모든 case 문제 예외 없이 break, return, throw문으로 마쳐야한다고 주장.
- 다음 case 문까지 실행하는 swith문도 다음 예제 처럼 명확하게 사용한다면 좋은 방법.
| switch (condition) { // 어떤 로직도 수행하지 않고 다음 case 문으로 넘어간다. case "first": case "second": // code break; case "third": // code
/*falls through*/ default: // code } |
- 작성자가 주석을 통해 의도적으로 사용했음을 명확하게 한다면 허용해도 된다고 판단.
3.3.3 default 절
- 논쟁이 될만한 또 다른 요소는 "switch문제 default 절을 꼭 넣어야 하는가?"
- default 절에 딱히 수행해야 할 로직이 없을 경우 // no default 주석을 통해 작성자의 의도를 명확하게 표현하면 문제 없다고 판단.
- 추가로 필요없는 문법을 사용하지 않아 용량 절약.
3.4 with문
- with문은 실행할 로직의 문맥을 변경
- with문은 객체 식별자를 명시하지 않아도 특정 객체의 프로퍼티와 메서드를 마치 변수인 것처럼 사용하게 해줌.
- with문의 목적은 객체 내 프로퍼티나 메서드에 접근 할 때, 개발자가 입력해야할 문자를 줄이는데 있다.
var book = { title: "Maintainable JavaScript", author: "Nicholas C. Zakas" }; var message = "The book is "; with(book) { message += title; message += " by " + author; } |
- 위 코드에서 with문은 중괄호 안에서 book 변수의 프로퍼티를 마치 변수인 것처럼 사용.
- 이때 title과 author의 주인이 어떤 객체인지 알기 어렵다는 문제.
- 또 어떤 변수가 book의 프로퍼티인지, message는 지역 변수인지도 불명확.
- 다른 개발자가 이해하기 어려울 수도 있다.
- with문은 문법 에러가 발생할 확률이 높다 strict 모드에서는 사용할 수 없는데 이는 ECMAScript 위원회도 with문을 더는 사용하지 말아야 하는 구문이라 생각한다는 걸 의미.
- 크락포드 코드 컨벤션, 구글 자바스크립트 스타일 가이드는 with문 사용을 금지.
3.5 for 반복문
- for 반목문에는 2가지 타입 존재.
- 전통적인 for 반복문과 객체의 프로퍼티를 순환하는 for...in 반복문이 존재.
- 전통적인 반복문 제어하는 데는 return이나 throw문을 사용을 제외한 2가지 방법 존재.
- 첫 번째는 break문 사용. break문을 사용하면 배열 끝에 도달하기 전에 반복문 종료
- 두 번째는 continue 문 사용. continue는 반복문 내 로직 수행을 즉시 종료하지만, 다음 요소로 넘어가 순환을 계속 진행.
- 크락포드의 코드 컨벤션에서는 continue 사용을 금지하고 있음.
- 크락포드는 continue 보다 조건문을 사용하는 편이 낫다고 말한다.
- 이유는 더 이해하기 쉽고 실수를 줄일 수 있기 떄문.
3.6 for...in 반복문
- 객체의 프로퍼티를 순환할 떄 사용.
- 조건문을 따로 정의하지 않고 프로퍼티를 순환하며 프로퍼티명을 반환.
var prop; for (prop in object) { console.log("Property name is " + prop); console.log("Property value is " + object[prop]); } |
- for...in 반복문의 문제점은 객체가 소유한 인스턴스의 프로퍼티만 반환하는 것이 아니고 상속 받은 프로토타입의 프로퍼티도 반환한다는 점.
- 이러한 이유로 for...in 반복문 사용시 hasOwnProperty() 메서드를 사용해 현재 인스턴스의 프로퍼티만 걸러서 사용하는 방법이 좋다.
var prop; for (prop in object) { if (object.hasOwnProperty(prop)) { console.log("Property name is " + prop); console.log("Property value is " + object[prop]); } } |
- 크락포드 코드 컨벤셔에서는 for...in반복문에는 hasOwnProperty() 메서드를 반드시 사용하도록 명시.
'JavaScript > Maintainable JavaScript' 카테고리의 다른 글
| Chapter4. 변수, 함수, 연산자 (0) | 2016.09.23 |
|---|---|
| Chapter2. Javascript 주석 (0) | 2016.09.06 |
| Chapter1. JavaScript 기본 포맷 (0) | 2016.09.03 |
| Part1. 스타일 가이드 라인 (0) | 2016.09.03 |
| Maintainable JavaScript 시작. (0) | 2016.09.03 |