구조화

let userName: string = 'hoon'
let userAge: number = 26

let companyName: string = 'Toss'
let companyAge: number = 7

아래 코드에서는 name과 age라는 단어가 각기 다른 의미로 사용되어 변수를 구분하고 있습니다.

그런데 코드를 이렇게 작성하게 되면 작성하기가 번거롭고 기능의 확장이 어렵습니다. 따라서 우리는 인터페이스나 클래스를 사용하여 관련된 정보를 묶어 새로운 타입으로 표현합니다. 이를 구조화(structuring)라고 합니다.

export interface IPerson{
	name: string
  	age: number
}

export interface ICompany{
	name: string
  	age: number
}

이렇게 위와 같이 코드를 작성하게 되면 코드 기능의 확장을 수월히 합니다.

import { IPerson } from './IPerson_ICompany'

let hoon: IPerson = {name: 'hoon', age: 26},
    nam: IPerson = {name: 'nam', age: 26}

비구조화

이렇게 우리는 타입의 구조화를 통해 코드 작성의 편의성과 확장성을 높일 수 있었습니다. 그렇다면 비구조화는 어떤 것일까요?

어떤 시점에서는 데이터의 일부만 사용해야 할 때가 있습니다.

	let name = hoon.name, age = hoon.age

위 코드는 구조화된 hoon의 변수에서 각각의 속성부분을 변수에 저장하는 예시입니다. 이렇게 구조화된 데이터를 분해하는 것을 비구조화(destructuring)이라고 합니다.

비구조화 할당

비구조화 할당은 변수를 새롭게 변수를 만들고 각각의 값을 초깃값으로 할당받습니다.

import { IPerson } from './IPerson_ICompany'

let hoon: IPerson = {name: 'hoon', age: 26},
let {name, age} = hoon
console.log(name, age) // hoon 26

잔여 연산자

잔여 연산자는 ...으로 사용합니다.
이 연산자는 사용되는 위치에 따라 잔여 연산자(rest operator) 혹은 전개 연산자(spread opreator)라고 부릅니다.

잔여연산자 예시

let user: any = {
	name: 'hoon',
  	age: 26,
  	gender: 1,
  	address: 'seoul'
}
const {name, ...detail} = user
console.log(detail)

// {age: 26, gender: 1, address: 'seoul'}

위의 코드처럼 name을 제외한 나머지 속성을 별도의 detail 변수에 저장하고 싶다면 detail 변수 앞에 ... 잔여 연산자를 붙입니다.

전개 연산자

전개 연산자는 의미 그대로 객체의 속성을 모두 전개해 새로운 객체를 만듭니다

let part1 = {name: 'hoon'}
let part2 = {age: 26}
let part3 = {gender: 1}

let user = {...part1, ...part2, ...part3}

console.log(user) // {name: 'hoon', age: 26, gender: 1}