[TS] 객체의 비구조화 할당문

인터페이스나 클래스를 사용해 관련된 정보를 묶어 새로운 타입으로 표현하는 것을 구조화라고 한다.

export interface IPerson{
	name: string
    age: number
 }

코드를 이처럼 구조화하면 비슷한 유형의 변수를 쉽게 만들 수 있으므로 코드의 기능 확장이 수월해진다.

비구조화란?

구조화된 데이터는 어떤 시점에서 데이터의 일부만 사용해야 할 때도 있다.

let jack: IPerson = { name: 'jack', age: 32}
let name = jack.name

jack이라는 변수에서 jack.name이라는 부분을 따로 변수에 저장한다.
이 시점부터는 jack 변수는 더 사용하지 않고, 그 대신 name이라는 변수만 사용한다.
이처럼 구조화된 데이터를 분해하는 것을 비구조화라고 한다.

비구조화 할당

비구조화 할당은 ESNext 자바스크립트의 구문으로 타입스크립트에서도 사용 가능하다.
비구조화 할당은 객체와 더불어 배열과 튜플에도 적용 가능하다.

let {name, age} = jack

name, age 변수가 새롭게 만들어지고, name변수는 jack.name의 값, age변수는 jack.age의 값을 각각 초깃값으로 할당받는다.

잔여 연산자

ESNext에서 점을 3개 연이어 사용하는 ...연산자를 제공한다.
이를 위치에 따라 잔여 연산자 혹은 전개 연산자라고 부른다.

let address: any = {
	country: 'korea',
    city: 'seoul',
    address1: '강남구',
}

const {country, city, ...detail} = address

잔여연산자는 detail에 country, city를 제외한 나머지 변수를 저장하고 싶을 때 사용된다.

전개 연산자

점 3개 연산자가 비구조화 할당문이 아닌 곳에서 사용될 때, 이를 전개연산자라고 한다.

let coord = {...{x:0}, ...{y:0}}
console.log(coord) // {x:0, y:0}

전개 연산자는 의미 그대로 객체의 속성을 모두 전개해 새로운 객체로 만들어준다.