반응형
구조 분해 할당의 목적은
배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하기 위함
// 1. 배열의 구조 분해 할당
let arr = [1, 2, 3];
let testOne = arr[0];
let testTwo = arr[1];
let testThree = arr[2];
// => 매우 불편
// 구조 분해 할당을 통해 한 번에 값을 할당
let [one, two, three] = arr;
console.log(one, two, three); // 1 2 3
let [one1, two2] = arr;
console.log(one1, two2); // 1 2
// 2. 객체의 구조 분해 할당
let person = {
name: "DY",
age: 99,
hobby: "Coding",
};
// [key] 값을 기준으로 할당
let { name, age, hobby, extra = "hello" } = person;
console.log(name, age, hobby, extra); // DY 99 Coding hello
// 할당 받는 변수의 이름을 변경하는 방법
let { name: myName, age: myAge, hobby: myHobby } = person;
console.log(myName, myAge, myHobby); // DY 99 Coding hello
// 3. 객체 구조 분해 할당을 이용해서 객체를 넘기는 방법
const func = ({ name, age, hobby, extra }) => {
console.log(name, age, hobby, extra);
};
func(person); // DY 99 Coding undefined
반응형
'JavaScript' 카테고리의 다른 글
[JavaScript][기초] Object Type 깊은 복사/깊은 비교 (0) | 2024.06.30 |
---|---|
[JavaScript][기초] Spread / Rest (...) (0) | 2024.06.30 |
[JavaScript][기초] Truthy & Falsy (0) | 2024.06.23 |
[JavaScript][기초] 객체 { } 생성 (0) | 2024.06.23 |
[JavaScript][기초] 콜백 함수 (0) | 2024.06.23 |