객체의 비구조화 할당문
구조화가 필요한 코드 예
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"}
Author And Source
이 문제에 관하여(객체의 비구조화 할당문), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@doyoon9601/객체의-비구조화-할당문저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)