Destructuring Assignment
구조 분해 할당, 또는 비구조화 할당.
배열이나 객체의 속성을 해체하여 그 값을 개별 변수로 담을수 있게 하는 표현식.
객체 비구조화 할당
01.js
const batMan = {
name: '브루스 웨인',
actor: '크리스챤 베일',
alias: '배트맨'
};
const catWoman = {
name: '셀리나 카일',
actor: '앤 헤서웨이',
alias: '켓 우먼'
};
function print(hero) {
const { alias, name, actor } = hero;
const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
console.log(text);
}
print(batMan);
print(catWoman); const { alias, name, actor } = hero;이 코드가 객체에서 값들을 추출해서 새로운 변수로 선언해 주는 것.
여기서 파라미터 단에서 객체 비구조화 할당을 하면 더 심플한 코드를 작성할 수 있음.
02.js
const batMan = {
name: '브루스 웨인',
actor: '크리스챤 베일',
alias: '배트맨'
};
const catWoman = {
name: '셀리나 카일',
actor: '앤 헤서웨이',
alias: '켓 우먼'
};
function print({ alias, name, actor }) {
const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
console.log(text);
}
print(batMan);
print(catWoman);배열 비구조화 할당.
03.js
const arr = [1, 2];
const [one, two, three = 3] = arr;
console.log( one );
console.log( two );
console.log( three );깊은 비구조화 할당.
const deepObject = {
state: {
information: {
name: 'jeaha',
languages: ['javascript', 'java', 'sql']
}
},
value: 5
};
const { name, languages } = deepObject.state.information;
const { value } = deepObject;
const extracted = {
name,
languages,
value
};
console.log(extracted);728x90
반응형
'Language > JavaScript' 카테고리의 다른 글
| [Modern JS] Promise (0) | 2020.06.14 |
|---|---|
| [Modern JS] spread 와 rest (0) | 2020.06.14 |
| [Modern JS] 화살표 함수 (Arrow Function) (0) | 2020.06.05 |
| [Modern JS] Template Literal (0) | 2020.05.29 |
| [Modern JS] keyword ? var : ( let || const ) (0) | 2020.05.29 |