객체의 비구조화 할당문

구조화가 필요한 코드 예

let personName = "jack"
let personAge =32

let companyName = "Apple Company, Inc"
let companyAge = 43

위 코드는 name과 age라는 단어가 각기 다른 의미로 사용되게 구현하면 작성하기도 번거롭고 기능을 확장하기도 어렵습니다.
인터페이스나 클래스를 사용해 관련된 정보를 묶어 새로운 타입으로 표현하는것을 구조화(structuring)라고 합니다.

export interface IPerson {
	name: string
    age: number
}

export interface ICompany {
	name: string
    age: number
}

이처럼 코드를 구조화하면 다음 코드에서 보듯 다른 비슷한 유형의 변수를 쉽게 만들 수 있습니다. (코드의 기능확장이 수월해집니다.)

import {IPerson, ICompany} from "./IPerson_ICompany"

let jack: IPerson = {name: "Jack", age: 32},
	jane: IPerson = {name: "Jane", age: 22}
    
let apple: ICompany = {name: "Apple Computer, Inc", age: 43}
	ms:ICompany = {name: "Microsoft", age: 44}

비구조화란?

구조화된 데이터는 어떤 시점에서 데이터의 일부만 사용해야 할 때가 있습니다.
다음 코드는 구조화된 jack변수에서 jack이 아닌 jack.name, jack.age 부분을 각각 name과 age 변수에 저장합니다.
저장된 이후부터는 jack변수는 더 사용하지 않고 그 대신 name과 age 변수만 사용합니다.
이처럼 구조화된 데이터를 분해하는것을 비구조화(destructuring)라고 합니다.

let jack = {name: "Jack", age:32}

//비구조화
let name = jack.name
let age = jack.age

비구조화 할당

비구조화 할당(destructuring)은 ESNext JS의 구문으로 타입스크립트에서 사용할 수 있습니다.
비구조화 할당은 객체와 더불어 배열과 튜플에도 적용할 수 있습니다. 비구조화 할당을 객체에 적용하려면 얻고 싶은 속성을 중괄호로 묶습니다.

let {name, age} = jack

ex

import {IPerson} from "./IPerson_ICompany"

let jack: IPerson = {name:"Jack", age= 32}
let {name, age} = jack
console.log(name, age) // Jack 32

잔여 연산자

ESNext Js와 Typescript는 점을 연이어 3개 사용하는 ...연산자를 제공합니다. 이 연산자는 사용되는 위치에 따라 잔여 연산자 혹은 전개연산자라고 부릅니다.

다음코드에서 adress변수는 5개 속성을 가지고 있는ㄷ게, 이 중 country와 city를 제외한 나머지 속성을 별도의 detail이라는 변수에 저장하고 싶다면, 08행에서 보듯 detail변수 앞에 잔여 연산자를 붙입니다.

let adress: any = {
	contry:"Korea",
    city: "Seoul",
    address1: "Gangnam-gu",
    address2: "Sinsa-dong 123-456"
    address3: "789 street, 2 Floor ABC building"
}
const {country, city ...detail} = address
console.log(detail) 

//결과
	{
		address1: "Gangnam-gu",
    	address2: "Sinsa-dong 123-456"
    	address3: "789 street, 2 Floor ABC building"
    }

전개 연산자

객체 앞에 점세개가 붙었는데 비구조화 할당문이 아니면 전개연산자 라고(spread operator) 합니다
(객체 안에 객체가 있으면 안에 있는 객체를 풀어주는듯함)

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

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

let part1 = {name: "jane"}, part2 = {age: 22}, part3 = {City: "Seoul", country:"Kr"}
let merged = {...part1, ...part2, ...part3}
console.log(merged)

//결과
// {name: "jane", age: 22, City: "Seoul", country:"Kr"}