typescript chapter4. 제어문

조건문

if

if문은 조건이 참인지 거짓인지를 판단하고 분기를 수행한다. 이때 if문에 지정하는 조건은 참과 거짓을 판단할 수 있는 boolean 타입이여야한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

let text: string = "";
let statusActive: number = 0;
let isEnabeld: boolean = true;

// 첫 번째 if문

if (statusActive || text) {
  console.log("1");
}

// 두 번째 if문

if (isEnabeld && 2 > 1) {
  console.log("2");
}

// 실행 결과 2

statusActive 변수는 숫자타입인데 숫자가 0이면 false 이고, 0이 아닌 나머지는 true이다.
text 변수는 문자열 타입인데, 빈 값일 때 false이고, 값이 있으면 true이다. 첫번째 if문은 둘다 false 이므로 if문이 실행되지 못한다.

switch

switch 문은 비교 대상이 많을 때 단순한 형태로 비교를 수행하기 위해 사용한다.
break 문을 통해 switch문을 벗어날 수 있어야 하고 , case 절에 부합하지 않는 예외조건을 처리 하기 위해 default 절을 추가할 수도 있다.
switch의 표현식에는 변수가 올 수 있고, 표현식의 값과 일치하는 case 절이 실행된다.

1
2
3
4
5
6
7
8
9
10
11

let command: number = 0;

switch (command) {
  case 0:
    console.log("0");
    break;
  case 1:
    console.log("1");
    break;
}
// 0

위 예제에서 switch문의 조건은 number 타입이므로 case 절의 값은 모두 number 타입이여야한다.
case 절의 값 타입이 정해져 있지 않은 경우에는 다음과 같다.

1
2
3
4
5
6
7
8
9
10
11
12

let command2: any = "hi";

switch (command2) {
  case "hi":
    console.log("hi");
    break;
  case 0:
    console.log(0);
    break;
}

// 'hi'

fall-through

switch에서 break문을 생략하면 다음 case 절이 실행되는 폴스루(fall-through)가 일어날수 있다.
case문 내의 break 문이 없어 case 문이 종료되지 않고 다음 case 문이 이어져 실행되는 현상을 말한다.

1
2
3
4
5
6
7
8
9
10
11

let input = 2;

switch (input % 2) {
  case 0:
    console.log("0");
  case 1:
    console.log("1");
    break;
}
// 0
// 1

case 0 절에 break문이 누락되어 폴스루가 발생해 case 1절이 자동으로 실행됨
타입스크립트의 폴스루 사용 여부를 설정하고 싶으면 tsc 컴파일러 옵션인 nofallthroughcasesinswitch를 수정하면 된다.

1
2
3
4
5
6
7
8
9
10

//
{
    "compilerOptions"  :{
        "nofallthroughcasesinswitch: true
    }
}

// 또는 cmd에서 컴파일 시 컴파일할 ts 파일에 --nofallthroughcasesinswitch를 붙이면 폴스루시 에러를 뱉어냄
tsc switch-fallthrough-case.ts --nofallthroughcasesinswitch
// switch-fallthrough-case.ts:4:3 - error TS7029: Fallthrough case in switch.

반복문

타입스크립트는 ECMA 자바스크립트를 따르므로 자바스크립트의 반복문을 지원한다.
ECMA 스크립트 표준이 발전하는 과정에 맞춰 새로운 for문이 타입스크립트에 추가되었다.

기본 for문

for문에서 사용할 변수에 let키워드와 타입을 지정할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// ES5
for (var i = 0; i < 2; i++) {
  console.log("i : " + i);
}

// 타입스크립트
for (let j: number = 0; j < 2; j++) {
  console.log("j : " + j);
}

/**
i : 0
i : 1
j : 0
j : 1
 */

ES5 : var선언자는 블록 레벨 스코프가 적용되지 않아 for문에서 초기화한 변수를 for밖에서도 사용 가능했다.
타입스크립트 : j변수에 number 타입을 지정해 타입 안전성을 강화했고, let선언자를 사용해 for문 내부에서만 사용되도록 블록 레벨 스코프가 적용되었다.

for in문 (ES5)

for…in문은 ES5의 자바스크립에서 배열이나 객체를 순회할 떄 사용한다.

1
2
3
4
5
6
7
8
9
10
11

let islands = ["a", "b", "c", "d"];
for (let index in islands) {
  console.log(index, islands[index]);
}

/**
0 a
1 b
2 c
3 d
 */

for…in문에 선언된 변수 index는 인덱스를 나타내며, 배열의 요소를 가져오려면 islands[index]와 같이 인덱스를 통해 값을 접근 할 수 있다.
만약, 인덱스가 숫자가 아닌 키라고 한다면 객체 리터럴을 이용하면 된다.

1
2
3
4
5
6
7
8
9
10

let fruits = { a: "apple", b: "banana", c: "cherry" };

for (let property in fruits) {
  console.log(property, fruits[property]);
}
/**
a apple
b banana
c cherry
 */

fruits 변수를 객체 리터럴로 초기화했고, for…in문을 이용해 객체 리터럴을 순화했다. 이때 property변수를 통해 키 값으로 접근 했으며, fruits[property]로 문자열 키를 이용해 대응되는 객체의 값을 가져왔다.

for of문 (ES6)

for…of문은 ES6 표준에 추가된 특징이며 인덱스를 이용해 값을 가져오는 for…in과 달리 for…of문은 바로 값을 가져올 수 있다.

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

이터러블(iterable)객체는 반복 가능한 객체인 배열, 문자, 숫자, DOM 컬렉션, 맵(Map), 셋(Set) 등을 말한다.

• 이터러블 객체가 문자열인 경우

1
2
3
4
5

for (let value of "hi") {
  console.log(value);
}
// "h"
// "i"

• 이터러블 객체가 배열인 경우

1
2
3
4
5
6
7
8
9

for (const value of [1, 2, 3]) {
  console.log(value);
}

/**
1
2
3
 */

일반 for문에서 let 선언자가 아닌 const를 사용하면 상수가 되어 증가 값이 바뀌지 않아 무한 루프가 되지만,
for of는 Symbol.iterator 의 구현을 통해 각 이터레이션 값의 요소를 가져오기 때문에 const를 사용할 수 있다.

Map 과 Set

ES6에 추가된 이터러블 객체로 맵(Map)과 셋(Set)이 있다. 맵과 셋은 tsconfig.json 의 target 속성이 es5이면 컴파일 되지 않는다.
es5에 맵과 셋을 대응할 만한 문법이 존재하지 않기 때문이다.
따라서, 맵과 셋을 이용하는for of 문을 실행하려면 tsconfig의 target 을 ES2015로 수정해아한다.

1
2
3
4
5
6
7
8

{
    "compilerOptions"  :{
            "target" : 'ES2015'
    }
}

// 또는 cmd에서 컴파일시
tsc example.component.ts --target es6

• Map

1
2
3
4
5
6
7
8
9
10
11
12
13

let itMap = new Map([
  ["one", 1],
  ["one", 2]
]);

itMap.set("one", 3);

for (let value of itMap) {
  console.log(value);
}
console.log(itMap.get("one"));

// 3

1. 맵 객체는 키 중복을 허용하지 않으므로 for…of문을 이용해 출력해보면 중복을 제하고 출력된다.
2. 맵 객체는 키-값 기반이므로 키를 이용해 값을 가져올 수 있다.

맵 겍체를 이용하지 않고 객체 리터럴을 이용해 맵의 특징인 중복 제거와 키를 통한 값 접근을 구현 할 수도 있다.

1
2
3
4
5
6
7
8
9
10

let map: { [key: string]: number } = {};
map["one"] = 1;
map["one"] = 2;
map["one"] = 3;

for (let value in map) {
  console.log(map); // {one : 3}
}

console.log(map["one"]); // 3

• Set
  셋 객체(Set Object)는 어떤 타입의 값이든 유일한 값을 저장 할 수 있다. 셋 역시 맵처럼 컴파일러 target 속성이 ES2015일때 허용된다.

1
2
3
4
5
6
7
8
9
10
11
12

let itSet = new Set(["a", "b", "c", "a"]);

for (let value of itSet) {
  console.log(value);
}

itSet.add("f");
/**
a
b
c
 */

Set 객체는 값을 추가하거나(add), 비우거나(cleear), 삭제하는것(delete)과 같이 키가 아닌 값을 다루는 메서드를 제공한다.

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

[Symbol.iterator()]은 ES6에 추가된 특징으로 배열, 맵, 셋과 같은 이터러블 객체를 순회하는데 사용한다.
이 메서드는 반복문을 순회할 때 마다 next() 메서드를 통해 순회 중인 객체를 반환하는 특성이 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

console.log(typeof itObj);
console.log(itObj.next());
console.log(itObj.next());
console.log(itObj.next());

/**
 * object
{ value: 1, done: false }
{ value: 2, done: false }
{ value: undefined, done: true } // 더 이상 반환되는 객체가 없으므로 value가 undefined가 되며 모든 객체를 순회했으므로 done 이 true가 된다.

 */

while과 do-while

• while

  while문의 조건이 참이면 명령문을 실행하며 조건이 거짓이면 명령문의 실행을 끝내는 반복문이다.

• do while문

  do-while문은 명령문을 실행하고 나서 조건이 참이면 명령문을 실행하고 거짓이면 명령문 실행을 끝내는 반복문이다.
  while과 달리 명령문을 먼저 실행하고 조건을 검사하기 때문에 최소 한 번 이상 명령문 실행이 보장된다.

1
2
3
4
5
6
7
8
9
10
11
12
13

let cnt: number = 0;

do {
  console.log(cnt);
  cnt++;
} while (cnt !== 4);

/**
0
1
2
3
 */