Chapter3. JavaScript 문장과 표현식

자바스크립트에서 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() 메서드를 반드시 사용하도록 명시.