타입스크립트 - 05 연산자

5.1 기본연산자

  5.1.1. 산술 연산자

  타입스크립트의 산술 연산자 - 사칙연산자(+, -, *, /) + 나머지 연산자(%) + 지수연산자(**) 를 지원

  지수연산자는 es5 로 컴파일시 Math.pow() 로 변환

  문자열간의 더하기 연산은 자바스크립트와 동일한 문자열 결합으로 인식

  타입스크립트에서 더하기 연산자를 허용하지 않는 상황 - 숫자 + 불리언, 불리언 + 불리언

console.log(1 + false)

// 자바스크립트는 false를 0으로 인식하여 1, 타입스크립트는 타입오류 발생

  타입스크립트에서 산술 연산자 사용시 타입에 보다 엄격함. 

  자바스크립트보다 연산의 안정성이 높음

 

  5.1.2. 비교, 논리, 조건 연산자

  조건문에 사용 가능

  비교연산자(==, ===, !=, !==, >, <, <=, >=)

    - 자바스크립트는 타입이 다른 피연산자 끼리고 비교연산 가능

      타입스크립트는 타입이 같아야지만 비교가능

      자바스크립트로 컴파일 후에도 타입 안정성을 보장하기 위해 ==보다 ===으로 사용권장

  논리연산자(&&, ||, !) - 피연산자끼리 타입이 달라도 됨

  조건 연산자(?:, 삼항연산자)  

// 삼항연산자 형식
조건 ? 조건이 참일때 값 : 조건이 거짓일때 값;

  불리언타입과 부정 연산자 - 조건에 문자나 숫자가 들어가면 값에따라 참, 거짓이 다름

                                            숫자 : 0 - 거짓, 0 이외의 수 - 참

                                            문자 : 빈 문자열 - 거짓, 나머지 - 참

                                                 부정연산자(!) - true/false 를 반대로 바꿈

5.2 디스트럭처링(destructuring)

객체의 구조를 제거, 객체의 구조를 분해 후 할당이나 확장과 같은 연산을 수행

 

  5.2.1. 객체 디스트럭처링

  객체 리터럴에서 변수명에 대응하는 속성값을 추출해 변수로 할당하는데 유용

// 객체 디스트럭처링 예제
let { a, b } = { a: 1, b: 2 };

console.log(a);
console.log(b);

// 1
// 2

  디스트럭처링 할당 시 할당받을 속성이 없다면 표현식에서 초기값 정의 가능

// 객체 디스트럭처링 초기값 설정 예제
let { a, b = 10 } = { a: 1 };

console.log(a);
console.log(b);

// 1
// 10

  할당할 객체속성에 새로운 이름을 부여해 할당 가능

// 객체 디스트럭처링 속성 재명명 예제
let { a: newA, b: newB } = { a: 1, b: 2 };

console.log(newA);
console.log(newB);

// 1
// 2

  디스트럭처링 매개변수 선언

    - 기존 자바스크립트에서 객체 리터럴을 매개변수로 받는 함수 사용시 함수 내부에서 전달받는 객체 리터럴의 속성을 검사

      하고 사용할 변수에 할당하는 작업 필요

      객체 디스트럭처링을 사용하면 객체의 속성검사 및 기본값 할당 작업을 간소화 할 수 있음

// 디스트럭처링을 사용하여 매개변수 처리 예제
function test ({ a, b = 100 }) {
  console.log(a);
  console.log(b);
}

test({ a: 1 });

// 1
// 100

  객체 디스트럭처링 시 type  키워드 활용

    - type키워드를 사용해 매개변수의 타입을 선언함으로써 객체 디스트럭처링시에 타입을 제한 할 수 있음

// 객체 디스트럭처링을 사용하여 매개변수 처리 type사용 예제
type c = { a: string, b?: boolean };

function test ({ a, b }: c): void {
  console.log(a, b);
}

test({ a: 'hi', b: true });
test({ a: 'hi' });

// hi true
// hi undefind

  5.2.2. 배열 디스트럭처링

  배열 요소를 간결하게 변수에 할당하는 방법

  배열의 인덱스로 값을 찾아서 할당할 필요가 없음 

// 배열 디스크럭처링 예제
let count = [1, 2, 3];

let [cnt1, cnt2] = count;

console.log(cnt1);
console.log(cnt2);

// 1
// 2

// 쉼표를 이용하여 원하는 부분의 값만 가져올 수 있음
let [, , cnt3] = count;

console.log(cnt3);

// 3

 

  배열 요소를 함수의 디스트럭처링 매개변수로 전달

    - 함수의 매개변수로 배열을 받을때 배열 디스트럭처링을 통해 전달받은 배열을 바로 변수에 담을 수 있음

// 배열을 매개변수로 받는 함수에 배열 디스트럭처링 사용 예제
function test([one, two]: [string, number]) {
  conosle.log(one, two);
}

test(['일', 2]);

// 일 2

 

5.3. 전개 연산자(spread operator)

나머지 매개변수를 선언할 때 - 여러 인수를 배열로 받을때(...params), 함수에서 자세히 다룸

배열 요소를 확장할 떄 - 배열 합치기와 배열 디스트럭처링에 사용

객체 요소를 확장할 때 - 객체 합치기와 객체 디스트럭처링에 사용

 

  5.3.1. 전개 연산자를 이용한 배열 요소 확장

// 전개 연산자를 이용한 배열 합치기 예제
let arr1 = ['c', 'd', 'e'];

let arr2 = ['a','b', ...arr1];

console.log(arr2);

// ['a', 'b', 'c', 'd', 'e']

  전개 속성은 위치를 조정 할 수 있음

// 배열 디스트럭처링에 전개 연산자를 사용한 예제
let [one, ...two] = ['a', 'b', 'c'];

console.log(one);
console.log(two);

// a
// ['b', 'c']

  5.3.2. 전개 연산자를 이용한 객체 요소 확장

// 전개 연산자를 이용한 객체 합치기 예제
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}

  전개 연산자는 얕은복사 방식으로 값을 obj2 객체로 복사

// 객체 디스트럭처에 전개 연산자를 사용한 예제
let numGroup = { n1: 1, n2: 2, n3: 3 };

let { n2, ...n13 } = numGroup;

console.log(n2, n13);

// 2 { n1: 1, n3: 3 }