Web/javascript

객체의 비구조화 할당문

rockettttman 2022. 10. 5. 15:54

구조화

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

 

-- 구조화가 필요한 코드 예
let personName = 'Jack'
let personAge = 32
-- 구조화 한 코드
export interface IPerson {
name: string
age: number
}
let jack: IPerson = {name: 'Jack', age: 32}
view raw gistfile1.txt hosted with ❤ by GitHub

비구조화

구조화된 데이터는 데이터의 일부만 사용해야 할 때가 있는데 아래와 같이 구조화된 데이터를 분해하는 것을 비구조화라고 한다.

 

//비구조화
let name = jac.name, age = jack.age
//비구조화 할당
let {name, age} = jack
view raw gistfile1.txt hosted with ❤ by GitHub

잔여 연산자/ 전개 연산자

ESNext 자바스크립트와 타입스크립트는 점을 연이어 3개 사용하는 ...연산자를 제공하는데 사용하는 위치에 따라 잔여 연산자 혹은 전개 연사자라고 부른다.

 

//잔여 연산자의 예
let address: any {
country: 'Korea',
city: 'Seoul',
address1: 'Gangnam-gu',
address2: 'Sinsa-dong 123-456'
}
const { country, city, ...deatil } = address;
//전개 연산자의 예
1.
let cord = {...{x:0}, ...{y:0}}
console.log(cord) //{x: 0, y: 0}
2.
let part1 = {name: 'jane'}
let part2 = {age: 22}
let part3 = {city: 'Seoul', country: 'KR'}
let merged = {...part1, ...part2, ...part3}
console.log(merged)
// {name: 'jane', age: 22, city: 'Seoul', country: 'KR'}
view raw gistfile1.txt hosted with ❤ by GitHub

'Web > javascript' 카테고리의 다른 글

chrome V8 엔진에 대해  (0) 2024.03.14
javascript Prototype  (0) 2024.02.20
mocking과 mock testing  (0) 2022.06.23
보자마자 유용하다고 느끼는 javascript 문법  (0) 2022.06.14
array.map 안에서의 async/await 사용하기  (0) 2022.05.01