타입스크립트 - 04 제어문

4.1 조건문의 타입 제약과 폴스루

타입스크립트에서는 기본적으로 자바스크립트에서 사용했던 조건문을 사용 가능.

if 문 - 조건의 참, 거짓에 따라 분기를 수행 

switch 문 - 입력값에 따라 분기를 수행

 

  4.1.1. if문 사용 시 타입 제약

  조건이 참인지 거짓인지 판단 후 분기 수행

// if문 형식
if (조건) {
  // 조건이 참(true)일때 실행
} else {
  // 조건이 거짓(false)일때 실행
};

  조건은 참, 거짓을 판단 할 수 있는 불리언(Boolean) 타입이어야 함.

  if 문뒤에 바로 if 문이 오는경우 중첩이 가능하고 괄호를 생략 할 수 있음.

if ( 7 > 2) 
  if ( 1 < 2 ) {
    명령문
  }

  조건부분에서 boolean타입이 아닐때 판다하는 기준

   - number 타입은 0이면 false, 0이외의 모든 수는 true

   - String 타입은 빈값('')이면 false, 아니면 true

 

  4,1,2, switch 문과 폴스루

  switch 문은 비교대상(case)이 많을때 단순한 형태로 비교를 수행하기 위해 사용

  입력 값에따라 분기 수행

// switch 문 형식
switch (표현식) {
  case 값a : 
    // 표현식의 값이 a 일때 실행
    break;
  case 값b : 
    // 표현식의 값이 b 일때 실행
    break;
  default : 
    // 표현식의 값이 일치하는것이 없을때 기본 실행
    break;
}

  표현식의 값과 일치하는 case 가 실행

  각각의 case 부분은 break로 구분

  표현식이 모든 case 와 일치하지 않을때 default 부분 실행(예외처리용)

  타입스크립트 에서는 표현식에 들어갈 변수의 타입을 지정 하여 case 에 들어갈 값의 타입을 제한 할 수 있음

  폴스루(fall-throughs) - switch의 case 절에서 break 문을 생략하여

                                      break 문을 만날때까지, 여러개의 case 절이 연속으로 실행되는 현상

  타입스크립트 에서는 noFallthroughCasesInSwitch 설정값을 통하여 폴스루의 허용여부를 선택 할 수 있음

  기본값은 false이므로 폴스루 사용시 수정 해야 함

  case 문에 아무런 내용도 없으면 폴스루 허용여부와 상관없이 폴스루가 발생함

 

4.2 반복문의 다양한 사용법

  4.2.1. for 문과 이터러블 객체

  기본적인 for문 - 자바스크립트의 for 문과 동일

// for 문의 형식
for (변수 초기화: 조건식: 증감식) {
  명령문
};

                           변수 초기화시 es5 는 var 사용, es6 는 let 사용

                           var 사용시 블록레벨 스코프가 적용되지 않아 for문 밖에서도 사용가능

                           let 을 사용하여 블록레벨 스코프 적용, for문 내에서만 사용되어서 더 안전함

  ES5의 for in문 - 배열이나 객체를 순회할때 사용

// for in 문 예제
let fruit = ['사과', '배', '바나나'];

for (let idx in fruit) {
  console.log(fruit[idx]);
}

// '사과'
// '배'
// '바나나'

                            index나 key를 통해서 요소를 가져옴

  ES6의 for of문 - es6 에서 추가. for in 과 다르게  index나 key를 통하지 않고 바로 값을 가져 올 수 있음

// for of 문 형식
for (변수 of 이터러블) {
  명령문;
]

                            이터러블(iterable)은 반복 가능한 객체인 배열, 문자열, DOM 칼렉션 등을 말함.

                            일반 for 문과는 달리 변수의 선언자를 const로 사용 가능

                            일반 for 문에서 const 사용시 변수값이 변하지 않아 무한루프 발생

                            for of 문은 Symbol.iterator의 구현을 통해서  요소를 가져오기 떄문에 const를 사용해도 문제가 없음

                            맵(Map)과 셋(Set)의 경우는 es5 로 변환이 안됨

  맵(Map)과 셋(Set)을 for of 문에 적용 - 맵과 셋은 es5 에선 대응할 문법이 존재하지 않기 때문에 es 5에선 사용 할 수 없음

    맵(Map) - 키(Key) - 값(Value) 기반으로 구성, 키의 중복을 허용하지 않음

                     es5 에서는 맵 객체가 지원하는 메서드(clear, delete 등)는 사용 할 수 없지만,

                    키의 중복을 허용하지 않는 특성은 객체 리터럴을 통해 구현 가능 

// 키의 중복을 허용하지 않는 객체 리터럴 예제
let exMap: { [key: string]: number; } = {};
exMap['십'] = 10;
exMap['십'] = 20;
exMap['십'] = 30;

for (let entry in exMap) {
  console.log(entry);
}
// 십

consol.log(exMap['십']);
// 30

    셋(Set) - 어떤 타입의 값이든 유일한 값을 저장 할 수 있음

                  셋은 키를 이용하여 값을 가져오지 않기때문에 get 메서드는 존재하지 않음

                  es5 로 컴파일시 for 문으로 변환됨

    [Symbol.iterator]() 메서드를 이용한 이터러블 객체 사용

         es6 에 추가. 배열, 맵, 셋과 같은 이터러블 객체(iterator object)를 순회하는 데 사용

         실전에서 사용할 일은 많지 않음

         사용자가 새로운 객체를 만들어서 for in, for of 문에 적용힐때 해당 메서드를 이용하여 이터러블 객체를 구현

         반복문을 순회할 때마다 next() 메서드를 통해서 순회중인 객체를 반환

let arr = [1, 2];
let irObj = arr[Symbol.iterator]();

console.log("1: ", typeof itObj);
console.log("2: ", itObj.next());
console.log("3: ", itObj.next());
console.log("4: ", itObj.next());

// 1: object
// 2: { value: 1, done: false }
// 3: { value: 2, done: false }
// 4: { value: undefind, done: true }

 

  4.2.2. while 문과 do-while 문

    while문 - 조건이 참이면 명령문을 실행, 조건이 거짓이면 명령문의 실행을 종료

// while 문 형식
while (조건) {
  명령문;
}

                   for 문 과는 달리 변수를 초기화 할 수는 없지만, 루프의 반복 여부를 루브 내부에서 결정 할 수 있음

    do-while 문 - 명령문을 실행 후 조건이 참이면 계속실행, 거짓이면 종료

// do-while 문 형식
do {
  명령문;
}
while (조건); 

                          기본적으론 while 문과 동일, 다른점은 명령을 먼저 실행 후 조건을 검사하기 때문에

                          명령부분이 무조건 한번은 실행됨