[TOC]
if 문은 조건이 참인지 거짓인지 판단하고 분기를 수행한다. if 문은 기본적으로 아래와 같다.
if (조건) {
명령문;
}이때 if 문에 지정하는 조건은 불리언 타입이어야한다.
if 문의 조건이 false일 때 예외 사항을 처리하기 위해 else 문을 추가할 수 있다.
if (조건) {
명령문;
}
else {
명령문;
}switch 문은 비교할 대상이 많을 때 단순한 형태로 비교를 수행하기 위해 사용한다. 타입스크립트의 switch 문은 자바스크립트의 switch 문과 형식이 같다.
switch (표현식) {
case 값1:
명령문;
break;
case 값2:
명령문;
break;
default:
명령문;
break;
}swtich/case 절에서는 break 문을 통해 switch 문을 벗어날 수 있어야 하고, case 절에 부합하지 않는 예외 조건을 처리하기 위해 때로는 default 절을 추가할 필요가 있다.
switch 문의 표현식에는 변수가 올 수 있고 표현식의 값과 일치하는 case 절이 실행된다. 이때 case 절에 선언한 값에 표현식 값과 다른 타입이 오는 것을 방지하기 위해 표현식에 사용할 변수에 타입을 지정할 수 있다.
let command2: any = "hi";
switch (command2) {
case "hi":
console.log("hi");
break;
case 0:
console.log(0);
break;
}위 예제에서 switch 문의 표현식에 사용한 조건이 any 타입이므로 case 절의 값은 "hi", 0과 같이 여러 타입을 허용한다. 따라서 switch 문을 사용할 때 case 절에 사용할 타입이 고정적이라면 반드시 입력 변수에 타입을 선언해야 하고, 그렇지 않다면 any 타입을 지정해야한다.
case 절에서는 break 문을 사용해 switch 문을 벗어난다. 그런데 때에 따라 break 문을 생략할 수 있다. 만약 break 문을 생략하면 다음 case 절이 실행된다. 이러한 상태를 폴스루라고 한다. 폴스루는 떨어져서(fall) 통과했다(through)는 의미로 case 문 내에 break 문이 선언되지 않아 case 문을 종료되지 않고 다음 case 문이 이어서 실행되는 현상이다.
타입스크립트에서 폴스루의 사용 여부를 설정하고 싶다면 tsc 컴파일러 옵션인 "noFallthroughCasesInSwitch"를 수정하면 된다.
noFallthroughCasesInSwitch옵션을 true로 한 이후 case문에서 폴스루가 발생할 경우 "Fallthrough case in switch." 같은 오류 메시지가 나타난다.
타입스크립트는 ECMA스크립트를 따르므로 자바스크립트의 반복문을 지원한다. ECMA스크립트 표준이 발전하는 과정에 맞춰 새로운 for 문이 타입스크립트에 추가됐다.
타입스크립트의 for 문은 자바스크립트에서 사용했던 for 문과 형식이 같다. for문의 형식은 아래와 같다.
for (변수 초기화; 조건식; 증감식) {
명령문;
}for 문에서 사용할 변수에 ES6에서 지원되는 let 키워드와 타입을 지정할 수 있다.
ES5 for 문에서는 카운터 i 변수가 var 선언자로 선언돼 있다. 따라서 for 문에 블록 레벨 스코프가 적용되지 않아 for 문에서 초기화한 변수를 for 문 밖에서도 사용할 수 있다. 반면 타입스크립트 for문은 변수에 number ㅌ입을 지정해 타입 안정성을 강화하고, 동시에 ES6의 let 선언자로 선언해 for 문 내부에서만 사용되도록 블록 레벨 스코프가 적용된다.
결론적으로 let 선언자로 블록 레벨 스코프를 적용할 수 있고, number 타입을 추가해 타입 안정성을 확보할 수 있는 타입스크립트 for 문을 사용할 필요가 있다.
for in 문은 ES5의 자바스크립트에서 배열이나 객체를 순회할 때 사용했다. 예를 들어, 배열을 순회할 때 for in 문을 사용해 보겠다.
let islands = ["Jejudo", "Geojedo", "Jindo", "Ganghwado", "Namhaedo"];
for (let index in islands) {
console.log(index, islands[index]);
}위에서는 islands 배열을 for in 문을 이용해 순회한다.
for in 문에 선언된 index 변수는 인덱스를 나타낸다. 이때 배열의 요소를 가져오려면 islands[index]와 같이 인덱스를 통해 값에 접근할 수 있다. 만약 인덱스가 숫자가 아닌 키라고 한다면 객체 리터럴을 이용하면 된다. 아래는 객체 리터럴을 이용하여 문자열을 키로 사용해 값을 가져온 것이다.
let fruits = { "a": "apple", "b": "banana", "c": "cherry" };
for (let property in fruits) {
console.log(property, fruits[property]);
}for in 문에 선언된 property 변수를 통해 숫자 인덱스가 아닌 키값으로 접근했으며, fruits[property] 같은 방식으로 분자열 키를 이용해 키에 대응하는 값을 가져왔다.
for of 문은 ES6 표준에 추가된 특징으로 타입스크립트 1.5부터 지원된다. 인덱스를 이요해 값을 가져올 수 있는 for in 문과 달리 for of 문은 곧바로 값을 가져올 수 있다. for of문은 아래와 같은 형태로 선언한다.
for (변수 of 이터러블) {
명령문;
}이터러블(iterable)은 반복 가능한 객체인 배열, 문자열, DOM 컬렉션, 맵(Map)과 셋(Set) 등을 말한다. 예를 들어, 문자열을 for of 문을 이용해 출력하면 아래와 같이 할 수 있다.
for (let value of "hi) {
console.log(value);
}let 선언자를 이요해 문자열로부터 value를 받아 출력한다. 이터러블 객체가 배열인 경우 아래와 같이 각 원소를 출력할 수 있다.
for (const value of [1, 2, 3]) {
console.log(value);
}여기서 눈여겨볼 것은 let 선언자가 아닌 const를 사용한 점이다. 일반 for 문에서는 let 선언자가 아닌 const를 사용할 수 없다. 만약 일반 for 문에서 let 대신 const를 사용하면 상수가 되어 증가 값이 바뀌지 않기 때문에 무한 루프가 된다. 그런데 for of 문은 Symbol.iterator의 구현을 통해 각 이터레이션 값의 요소를 가져오기 때문에 const를 사용할 수 있다. 변수를 선언할 때 const로 지정하면 let 선언자와 같이 변수에 블록 스코프가 적용되어 호이스팅 문제가 발생하지 않는다.
ES6에 추가된 이터러블 객체로 맵(Map)과 셋(Set)이 있다. tsconfig.json 파일의 target을 es2015로 수정해야함.
let itMap = new Map([["one", 1], ["one", 2]]);
itMap.set("one", 3);
for (let entry of itMap) {
console.log(entry);
}
console.log(itMap.get("one"));이터러블 객체인 맴 객체를 선언했다. 맵에 추가한 요소는 배열 요소이고 ["one", 1] 요소는 일부러 중복으로 선언했다. 맵 객체는 키 중복을 허용하지 않으므로 for of 문을 이용해 출력해 보면 중복을 제하고 출력되는 것을 확인할 수 있다. 참고로 맵 객체는 키-값 기반이기 때문에 키를 이요해 값을 가져올 수 있다.
셋 객체(set object)는 어떤 타입의 값이든 유일한 값을 저장할 수 있다. 셋 객체는 맵처럼 타입스크립트 컴파일러 target 속성값이 es2015일 때 컴파일된다.
Set 객체가 제공하는 메서드는 값을 추가하거나(add), 값을 비우거나(clear), 값을 삭제하는 것(delete)과 같이 키가 아닌 값을 다루는 메서드를 제공한다.
Symbol.iterator 메서드를 이용한 이터러블 객체 사용
Symbol.iterator 메서드는 ES6에 추가된 특징으로 배열, 맵, 셋과 같은 이터러블 객체(iterable object)를 순회하는 데 사용한다. 내부적으로 사용하는 특징이므로 실제로 실전에서 사용할 일은 많지 않지만, 사용자가 새로운 이터러블 객체를 만들어 for of, for in 문에 적용하려면 Symbol.iterator 메서드를 이용해 이터러블 객체로 구현해야 한다.
타입스크립트의 while 문은 자바스크립트 ES5와 동일한 문법을 사용한다. while 문은 조건이 참이면 명령문을 실행하며 조건이 거짓이면 명령문의 실행을 끝내는 반복문이다. while 문은 아래와 같은 형식으로 선언한다.
while (참/거짓을 판별할 수 있는 조건문) {
명령문;
}while 문은 for 문과 달리 while 문에서 변수를 초기화 할 수 없지만, 루프를 반복할지 여부를 루프 내부에서 결정할 수 있다는 장점이 있다.
타입스크립트의 do-while 문은 자바스크립트 ES5와 동일하다. do-while 문은 명령문을 실행하고 나서 조건이 참이면 명령문을 실행하고 거짓이면 명령문 실행을 끝내는 반복문이다. do-while 문은 다음과 같은 형태로 선언한다.
do{
명령문;
}while(반복 조건);do-while 문도 문법이 while 문과 크게 다르지 않다. 단지 while 문과 달리 명령문을 먼저 실행하고 조건을 검사하기 때문에 최소한 한 번 이상은 명령문의 실행이 보장된다는 특징이 있다.