[typescript] 6. 연산자 와 디스트럭쳐링(destructuring)

[typescript] 6. 연산자

1. 기본 연산자 

  1) 산술 연산자

산술 연산자	의미
+	덧셈
-	뺄샘
*	곱셈
/	나눗셈
%	나머지

  2) 비교 연산자

비교 연산자	예	의미
==	a == b	a 와 b의 값이 같은지 비교
===	a === b	a 와 b의 값과 타입이 같은지 비교
!=	a != b	a 와 b의 값이 다른지 비교
!==	a !== b	a 와 b의 값과 타입이 다른지 비교
>	a > b	a 가 b 보다 큰지 비교
<	a < b	a 가 b 보다 작은지 비교
>=	a >= b	a 가 b 보다 크거나 같은지 비교
<=	a <=	a 가 b 보다 작거나 같은지 비교

  3) 논리 연산자

논리 연산자	예	의미
&&	a && b	a 와 b 가 true 일때 만  true
||	a || b	a 또는 b 가 true 일때 만  true
!	!true	true가 아니다.

  4) 조건 연산자

    - 3항 연산자

      판별 조건 ? 표현식 1 : 표현 식 2

      => 판변 조건이 true 이면 표현식 1이 반환

1 < 2 ? console.log("aa") : console.log("bb")

// 출력 결과 aa

      => 판변 조건이 false 이면 표현식 2이 반환

1 > 2 ? console.log("aa") : console.log("bb")

// 출력 결과 bb

2. 디스트럭처링(destructuring)

  - typescript는 ES6의 디스트럭쳐링(destructuring)을 지원합니다.

  - 객체 또는 배열의 구조를 분해 후 할당 이나 확장과 같은 연산을 수행 합니다.

  - destory + structure = destructuring

  1) 객체 디스트럭처링

    (1) 기본 형식

      - 객체 property 에 맞추어서 객체 디스트력쳐링이 이루어집니다.

    (2) 디스트럭쳐링 초기화

      - 디스트럭쳐링 할당시 할당 받을 속성이 없면 새롭게 변수를 정의해서 초기화 해둡니다. 

let { id , pwd = "hahaha" } = { id : "doitnow-man" };

console.log(id)

console.log(pwd)

    (3) 디스트럭쳐링시 새로운 변수 명 지정 

      - { 변수명 : 새로운 변수명 } = { 변수명 }

let { id : cool_guy , pwd = "hahaha" } = { id : "doitnow-man" };

console.log(cool_guy)

console.log(pwd)

    (4) 험수에 디스트럭쳐링 매개 변수 전달 방법

      - 디스트럭쳐링 매개 변수에 모두 기본 값을 할당

        > name은 호출시 값으로 세팅되며, contury는 ?로 세팅된다.

function printPerson({ name = "", contury = "?" }) {

console.log(name);

console.log(contury)

}

printPerson({name: "doitnow-man"})

      - 디스트럭쳐링 매개 변수에 기본 객체를 할당

        > name은 호출시 값으로 세팅되며, contury는 korea로 세팅된다.

function printPerson({ name , contury = "?" } = { name : "anonymous"}) {

console.log(name);

console.log(contury)

}

printPerson({name: "doitnow-man", contury: "korea"})

      - type 키워드를 이용한 매개 변수 전달

        > a, b, 타입을 미치 정의한 C type을 지정 

          a 타입은 string 타입으로 생략 불가능

          b 타입은 선택 연산자인 ? 를 사용 했기 때문에 새략이 가능

type C = { a: string, b?:number}

function fruit({a, b}: C):void {

console.log(a, b)

}

fruit({a: "apple", b: 10}) // 결과 apple 10

fruit({a: "apple"}) // 결과 apple undefined

  2) 배열 디스트럭쳐링

    - 배열 요소를 간결한 방법으로변수에 할당 하는 방법을 제공 합니다.

    - 다음 예제는 numbers 배열을 만든후 배열 디스트럭쳐링을 사용하여, num1, num2, num3에 할당 합니다

let numbers = ["one", "two", "three", "four"];

let [num1, num2, num3] = numbers;

console.log(num1); // 결과 one

console.log(num2); // 결과 two

    (1) 배열 디스트럭쳐링 요소 건너뛰어서 할당 하기

      - "," 개수 만큼 요소를 건너 뜁니다.

let [,, num3, num4] = numbers;

console.log(num3, num4);

    (2) 배열 요소 교환 하기

[num1, num2] = [num3, num4];

console.log(num1); // 결과 three

console.log(num2); // 결과 four

    (3) 배열 요소를 함수의 디스트럭쳐링 매개변수로 전달

function func([first, second]:[number, string]) {

console.log(first);

console.log(second);

}

func([100, "aaa"]); // 100을 fist에 전달, aaa를 second에 전달

3. 전개 연산자

  - 전개 연산자는 '...' 으로 나타내는데 다음 3가지 경우에 사용됩니다. 

  1) 나머지 매개 변수를 선언 할때 

    - 함수에서 용됩니다. (다음 포스트에서..)

  2) 배열 요소를 확장 할때 

    - 배열 합치기

      > ...arr 을 arr 로 치환 합니다.

let arr = [ 3, 4, 5];

let arr_join = [1, 2, 3, ...arr];

console.log(arr_join) // 결과 값 : [ 1, 2, 3, 3, 4, 5 ]

    - 배열 디스트럭쳐링

      > ... second에 나머지 배열 정보가 다 들어 갑니다.

let [first, ...sencond] = [1, 2, 3];

console.log(first); // 결과 1

console.log(sencond); // 결과 [2, 3]

  3) 객체 요소를 확장 할때

    - 객체 합치기

      > 배열 합치기와 동일 합니다.

      > ...obj 를 obj로 치환 합니다

let obj = { c: 3, d: 4, e: 5} ;

let obj2 = { a: 1, b: 2, ...obj};

console.log(obj2);

    - 객체 디스트럭쳐링

      > 객체 property 에 맞추어서 객체 디스트력쳐링이 이루어집니다.

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

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

console.log(n2); // 결과 값 2

console.log(n13); // 결과 값 { n1: 1, n3 : 3 }