[JavaScript] 객체 비구조화 할당 (객체 구조 분해)

[JavaScript] 객체 비구조화 할당 (객체 구조 분해)

 

 

객체 비구조화 할당 (=객체 구조 분해)을 이용하면 객체 안에 있는 값을 변수나 상수로 바로 선언해 주므로,

코드가 좀 더 간결해질 수 있다.

 

아래의 코드를 바로 봐보자.

const fruit = ["apple", "grape", "banana"];
const [a, b] = fruit;
console.log(a);    // "apple"
console.log(b);    // "grape"

 

const [a, b] = fruit; 부분이 비구조화 할당 문법이다.

fruit 배열의 인덱스 0, 1번째의 값이 각각 a, b에 할당된다.

 

키-값 형식에서도 비구조화 할당이 가능하다.

const fruit = {
    num: 4,
    name: "apple",
    price: 2000
};

const juice = {
    num: 2,
    name: "orange juice",
    price: 1500
};

function print(thingsToBuy) {
    const { num, name, price } = thingsToBuy;
    console.log( `${price}원짜리 ${name}을 ${num}개 사야합니다.`);
}

print(fruit);    // "2000원짜리 apple을 4개 사야합니다."
print(juice);    // "1500원짜리 orange juice를 2개 사야합니다."

 

위 코드를 더 간단하게 만들 수도 있다.

아래와 같이 함수의 파라미터에서 객체 비구조화 할당을 바로 하면 된다.

const fruit = {
    num: 4,
    name: "apple",
    price: 2000
};

const juice = {
    num: 2,
    name: "orange juice",
    price: 1500
};

function print({ num, name, price }) {
    console.log( `${price}원짜리 ${name}을 ${num}개 사야합니다.`);
}

print(fruit);    // "2000원짜리 apple을 4개 사야합니다."
print(juice);    // "1500원짜리 orange juice를 2개 사야합니다."