타입스크립트 - 제어문 과 연산자

조건문

타입스크립트는 자바스크립트에서 사용했던 조건문을 사용할 수 있습니다. 대표적으로 if 문과 switch 문이 있습니다.
if 문은 조건의 참과 거짓에 따라 분기를 수행하는 조건문, switch 문은 입력값에 따라 분기를 결정하는 조건문입니다.

if 문

if 문은 조건이 참인지 거짓인지 판단하고 분기를 수행합니다.

if 문 형식
1
2
3
if (조건) {
명령문;
}

이때 if 문에 지정하는 조건은 참과 거짓을 판단할 수 있는 불리언(boolean) 타입이어야 합니다. 이때 if 문에 사용할 변수도 다음과 같이 명시적으로 불리언 타입으로 선언해야 합니다.

1
var idEnable: boolean = true;

if 문의 조건이 만족하면 if 블록을 실행합니다. if문 뒤에 바로 if 문이 오는 경우 중첩이 가능하고 괄호를 생략할 수 있습니다.

1
2
3
if (10>1)
if (0<1) {
}

이어서 if 문의 조건이 false 일때 예외 사항을 처리하기 위해 else 문을 추가할 수 있습니다.

숫자열 타입에서 숫자가 0이면 false 이고, 0 이 아닌 나머지 값은 true 입니다.
문자열 타입은 빈 값일 때는 false 이고, 값이 있을 때는 true 입니다.

switch 문

switch 문은 비교할 대상이 많을 때 단순한 형태로 비교를 수행하기 위해 사용합니다. 타입스크립트의 switch 문은 자바스크립트의 switch 문과 형식이 같습니다.

switch 문 형식
1
2
3
4
5
6
7
8
9
10
11
switch (표현식) {
case1:
명령문;
break;
case2:
명령문;
break;
default:
명령문;
break;
}

switch/case 절에서는 break 문을 통해 switch 문을 벗어날 수 있어야 하고, case 절에 부합하지 않는 예외 조건을 처리하기 위해 때로는 default 절을
추가할 필요가 있습니다. switch 문의 표현식에는 변수가 올 수 있고 표현식의 값과 일치하는 case 절이 실행됩니다. 이때 case 절에 선언한 값에 표현식 값
과 다른 타입이 오는 것을 방지하기 위해 표현식에 사용할 변수에 타입을 지정할 수 있습니다. 이렇게 하면 switch 문에 있는 표현식 값과 case 절에 오는 값의 타입이 일치하게 됩니다.

1
2
3
4
5
6
7
8
9
10
let command: number = 0;

switch (command) {
case 0:
// 명령문
break;
case 1:
// 명령문
break;
}

switch 문의 조건은 number 타입이므로 case 절의 값은 모두 number 타입이어야 합니다.
switch 문을 사용할 때 case 절에 사용할 타입이 고정적이라면 반드시 입력 변수에 타입을 선언해야 하고, 그렇지 않다면 any 타입을 지정해야 합니다.

폴스루

case 절에서는 break 문을 사용해 switch 문을 벗어납니다. 그런데 때에 따라 break 문을 생략할 수 있습니다. 만약 break 문을 생략하면 다음 case 절이
실행됩니다. 이러한 상태를 폴스루(fall-through)라고 합니다.
noFallthroughCaseInSwitch 옵션의 기본값은 false 이므로 폴스루를 허용할 것 이라면 false 로 지정하거나 위 옵션을 추가하지 않고 생략하면 됩니다.

tsconfig.json
1
2
3
4
5
{
"compilerOptions": {
"noFallthroughCaseInSwitch": true
}
}

파일 단위로 컴파일할 때 폴스루를 방지하려면 tsc 명령어 뒤에 –noFallthroughCaseInSwitch 옵션을 추가합니다.

예외적으로 noFallthroughCaseInSwitch 옵션을 true 로 설정하더라고 폴스루를 허용하는 방법은 case 절에 아무런 명령문도 넣지 않는 것입니다.

반복문

타입스크립트는 ECMA 스크립트를 따르므로 자바스크립트의 반복문을 지원합니다.

for 문

for 문 형식
1
2
3
for (변수 초기화; 조건식; 증감식) {
명령문;
}

for 문에서 사용할 변수에 ES6에서 지원되는 let 키워드와 타입을 지정할 수 있습니다.

for in 문

for in 문은 ES5의 자바스크립트에서 배열이나 객체를 순화할 때 사용, for in 문에 선언된 index 변수는 인덱스를 나타냅니다. 이때 배열의 요소를 가져오려면 인덱스를 통해 값에 접근 할 수 있습니다.
만약 인덱스가 숫자가 아닌 키라고 한다면 객체 리터럴을 이용하면 됩니다.

1
2
3
4
5
6
7
8
9
let island = ["jejudo", "Jindo", "Geojedo"];
for(let index in island) {
console.log(index, island[index]);
}
// for in 문을 이용해 객체 리터럴을 순회
let fruits = { "a" : "apple", "b": "banana" };
for (let property in fruits) {
console.log(property, fruits[property]);
}

for of 문

for of 문은 ES6 표준에 추가된 특징으로 타입스크립트 1.5부터 지원, for in 문과 달리 for of 문은 곧바로 값을 가져올 수 있습니다.

for of 문 형식
1
2
3
for (변수 if 이터러블) {
명령문;
}

이터러블(iterable)은 반복 가능한 객체인 배열, 문자열, DOM 콜렉션, 맵과 셋 등을 말합니다.

일반 for 문에서는 let 선언자가 아닌 const 를 사용할 수 없습니다. 만약 일반 for문에서 let 대신 const 응 사용하면 상수가 되어 증가 값이 바꾸지 않기 때문에 무한 루프가 됩니다.
그런데 for of 문은 Symbol.iterator 의 구현을 통해 각 이터레이션 값의 요소를 가져오기 때문에 const를 사용할 수 있습니다.

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

맵과 셋

ES6에 추가된 이터러블 객체로 맵과 셋이 있습니다. 맵과 셋은 tsconfig.json 파일의 target 속성이 ES5이면 컴파일되지 않습니다.
이는 ES5에 맵과 셋에 대응할 만한 문법이 존재하지 않기 때문입니다. 맵과 셋을 이용하는 for of 문을 정상적으로 실행하려면 tsconfig.json 파일의 target을 es2015 로 수정해야 합니다.

셋 객체는 어떤 타입의 값이든 유일한 값을 저장할 수 있습니다. 셋 객체는 맵처럼 타입스크립트 컴파일러 target 속성값이 es2015일 때 컴파일됩니다.

Set 객체가 제공하는 메서드는 값을 추가하거나(add), 값을 비우거나(clear), 값을 삭제하는 것(delete)과 같이 키가 아닌 값을 메서드를 제공합니다.
Set 객체는 ES5에 존재하지 않으므로 ES5로 컴파일하면 for 문으로 변환됩니다.

[Symbol.iterator]() 메서드

[Symbol.iterator]() 메서드는 ES6에 추가된 특징으로 배열, 맵, 셋 과 같은 이터러블 객체를 순회하는데 사용합니다.
사용자가 새로운 이터러블 객체를 만들어 for of, for in 문에 적용하려면 [Symbol.iterator]() 메서드를 이용해 이터러블 객체로 구현해야 합니다.

while 문

타입스크립트의 while 문은 자바스크립트 ES5와 동일한 문법을 사용합니다. while 문은 조건이 참이면 명령문을 실행하며 조건이 거짓이면 명령문의 실행을 끝내는 반복문입니다.

while 문 형식
1
2
3
while (참/거짓을 판별할 수 있는 조건문) {
명령문
}

while 문은 for 문과 달리 while 문에서 변수를 초기화할 수 없지만, 루프를 반복할지 여부를 루프 내부에서 결정할 수 있다는 장점이 있습니다.

do-while 문

타입스크립트의 do-while 문은 자바스크립트 ES5와 동일합니다. do-while 문은 명령문을 실행하고 나서 조건이 참이면 명령문을 실행하고 거짓이면 명령문을 실행을 끝내는 반복문입니다.

do-while 문 형식
1
2
3
4
5
6
7
let cnt: number = 0;

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

연산자

산술연산자

타입스크립트는 자바스크립트와 동일한 산술연산자를 지원합니다. 산술연산자로는 더하기, 빼기, 곱하기, 나누기 같은 사칙연산과 나머지 연산을 수행할 수 있는 % 연산자가 있습니다.
추가로 ES7의 지수 연산자인 **를 지원하므로 Math.pow 를 대체해 사용할 수 있습니다.

1
2
3
4
5
console.log(10 + 2, 10 - 2, 10 / 2, 10 % 2);
console.log(10 ** 3);

console.log(1+ "happy");
console.log(false + "happy" );

산술연산자가 포함된 코드를 컴파일하면 산술 연산자가 포함된 식은 변하지 않습니다. 다만 지수 연산자가 포함된 10 ** 3 은 ES5나 ES6로 컴파일 하면
Math.pow(10,3)로 변환돼 컴파일 됩니다. 문자열간의 더하기 연산은 자바스크립트처럼 문자열 결합으로 인식합니다.

타입스크립트에서는 숫자 값과 불리언 값은 연산할 수 없으며, 자바스크립트처럼 false 값을 0으로 인식하지 않습니다. 따라서 숫자값과 불리언 값의 덧셈은 연산할 수 없으며 불리언 값끼리의 연산식도 타입오류가 발생합니다. 타입스크립트에서는 문자열 타입의 숫자를 연산식에 사용할 수 없습니다.

비교, 논리, 조건 연산자

타입스크립트에서 조건문에 사용할 수 있는 연산는 크게 세가지로 나눌수 있습니다.

  • 비교 연산자
  • 논리 연산자
  • 조건 연산자

비교연산자로는 ==, ===, !=, !==, >, <,>=, <= 1="=" 가 있습니다. 자바스크립트와 다른점은 true, “1” 과 같이 피연산자간에 타입이 다르면 연산을 허용하지 않습니다.
이는 피연산자 간의 비교연산을 할 때 타입 안전성을 고려하기 때문입니다.

논리 연산자로는 &&, ||, ! 가 있습니다. 비교 연산자와 달리 논리 연산자는 피연산자끼리 타입이 일치하지 않아도 됩니다.
&& 은 피연산자가 모두 참일 때 참, ||은 피연산자 가운데 하나 이상이 참일 때 참을 의미합니다.
!은 부정 연산자 !true 와 같이 true 를 부정하면 false 이고 !false 와 같이 false 를 부정하면 true 입니다.

조건 연산자는 피연산자 3개를 사용하는 삼항 연산자 입니다.
형식은 판별조건? 표현식1 : 표현식2 이고 판별 조건에 따라 표현식1과 표현식2 가운데 하나를 반환합니다. 이때 판별 조건의 결과는 true/false 여야
하며, true 일 때는 표현식1이 실행되고 false 일때는 표현식2가 실행됩니다.

Boolean 메서드를 이용하면 입력값을 고려해 불리언 타입으로 변환할 수 있습니다.

디스트럭처링

타입스크립트는 ES6의 디스트럭처링(destructuring)을 지원합니다. 디스트럭쳐링이라는 말의 뜻은 객체의 구조를 제거한다는 의미가 있습니다.

  • 객체 디스트럭처링
  • 배열 디스트럭처링

객체 디스트럭처링

객체 디스트럭처링은 객체 리터럴에서 변수명에 대응하는 속성값을 추출해 변수로 할당하는데 유용합니다.
이렇게 객체의 속성값을 변수에 할당하는 것을 디스트럭처링 할당 이라고 합니다.

1
let { id, country } = { id: "happy", country: 88 };

디스트럭처링 할당 표현식은 { id, country } 와 같습니다. 디스트럭처링 할당 시 표현식 내부의 id와 country 변수는 객체의 속성값과 대응합니다. 따라서 id에는 happy 가 country 에는 88 이 할당됩니다.
디스트럭처링 할당 시 할당할 객체의 속성에 새로운 이름을 부여해 할당하려면 속성 재명명을 이용할 수 있습니다.

type 키워드를 이용해 매개변수의 타입을 선언함으로써 객체 디스트럭처링을 수행할 수 있습니다.

배열 디스트럭처링

배열 디스트럭처링은 배열 요소를 간결한 방법으로 변수에 할당하는 방법을 제공합니다.

1
2
let numbers = [ "one", "two", "three", "four", "five" ];
let [num1, num2] = numbers;

만약 numbers 배열의 세 번째, 네 번째 요소를 변수에 할당하려면 앞의 요소는 쉼표로 건너뛰고 원하는 위치에 있는 요소만 변수로 지정합니다.

배열 디스트럭처링을 이용하면 함수에 배열을 전달할 때 배열 요소를 디스트럭처링 매개변수로 전달할 수 있다는 장점이 있습니다.

1
2
3
function f ([first, second]: [number, string]) { ... }

function f ([100, "hello"]);

전개 연산자

타입스크립트는 ES6의 전개 연산자를 지원합니다. 전개 연산자는 ‘…’ 로 나타내는데 다음 세가지 경우에 사용됩니다.

  • 나머지 매개변수를 선언할 때
  • 배열 요소를 확장할 때
  • 객체 요소를 확장할 때

나머지 매개변수

나머지 매개변수는 여러 인수를 배열로 받는데 “…매개변수” 와 같은 형태로 선언해 받습니다.

배열 요소 확장

전개 속성에 전개 연산자를 사용해 배열을 합칠 수 있습니다.

1
2
3
4
5
let arr = [3, 4, 5];
let arr2 = [1,2, ...arr];

console.log(arr2);
// 출력 [1,2,3,4,5]

이때 전개 속성은 위치를 조정할 수 있습니다. ([…arr, 1, 2])

배열 디스트럭처링이 수행되면 배열은 해체해 여러 변수에 할당하는데, 할당받는 변수에 전개 연산자인 “…”을 사용하면 배열의 나머지 요소를 배열로 받을 수 있습니다.

1
let [firstItem, ...rest]: [number, number, number] = [10, 20, 30];

객체 요소 확장

객체 합치기를 수행할 때는 전개 속성에 전개 연산자인 “…”를 사용해 합칠 수 있습니다.

1
2
3
4
5
let obj = { c:3, d:4, e:5 };
let obj2 = { a:1, b:2, ...obj };

console.log(obj2);
// 출력 { a:1, b:2, c:3, d:4, e:5 }

전개 연산자는 얕은 복사(shallow copy)방식으로 obj2 객체로 복사합니다.

객체 디스트럭처링은 객체를 해체해 속성값을 변수에 할당할 수 있습니다.

1
let {n1, ...rest} = { n1:1, n2:2, n3:3 };

댓글

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×