Destructuring(구조 분해 할당)

Destructuring(구조 분해 할당)

 

특징

• 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

• JSON 규격의 객체나 배열은 쉽게 매핑하여 변수를 할당할 수 있고, 함수의 반환값을 여러 개로 할 수 있음

• ES6 에서는 Destructing 을 통해 객체나 배열이 복잡하게 전달되는 함수들로 인하여 변수를 할당하고 속성에 접근해야할 때, 간편하게 할당 및 정의

 

 

예제)

let num1, num2, rest;
[num1, num2] = [100, 200]
console.log(num1);
console.log(num2);


[num1, num2, ...rest] = [100, 200, 300, 400, 500];
console.log(rest);


const myObject = {
    name: 'Test',
    gender: 'Male',
    job: 'Programmer'
};
const {name, gender, job} = myObject;
console.log(name + ", " + gender + ", " + job);


-- 출력 결과 --
100
200
[300, 400, 500]
Test, Male, Programmer

 

 

예제) 기본값 설정

const myArray = [1,2];
const [a=10, b=9, c=8, d=7] = myArray;
console.log(a + ", " + b + ", " + c + ", " + d);

-- 출력 결과 --
1, 2, 8, 7

• 왼쪽의 표현식에 = 연산자와 함께 적을 때, 오른쪽의 객체나 배열에 값이 없으면 기본값으로 설정

 

 

예제) Destructing 응용

function destrucArray([first, second]) {
    return [first + second, first - second, first * second, first / second];
}


function destructObject({name, gender}) {
    return {
        greetings: 'Hello, ' + name,
        sayHello() {
            console.log(`sayHello function: Hello,  ${name}, ${gender}`);
        }
    };
}


const [sum, sub, mul, div] = destrucArray([1, 2]);
console.log(`Return DestructArray : ${sum}. ${sub}, ${mul}, ${div}`);
const {greetings, sayHello} = destructObject({name: "TEST", gender: "male"});
sayHello();



-- 출력 결과 --
Return DestructArray : 3. -1, 2, 0.5
sayHello function: Hello,  TEST, male

 

 

 

 

 

 

 

참조 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

속깊은 JavaScript(양성익 지음)