[JS] Syntax | 16. 구조분해(Destructuring)

JavaScript의 구조분해는 배열이나 객체 등 여러 값의 집합으로 존재하는 값들의 요소를 각각의 변수에 바로 할당할 수 있게 하는 기능입니다.

 

배열의 경우 대괄호 [ ]로 변수들을 묶어 사용할 수 있습니다.

const arr = ["cat", "dog", "rabbit", "parrot", "fox"];

// destructuring
const [var1, var2, var3, var4, var5] = arr;

console.log(var1);  // "cat"
console.log(var2);  // "dog"
console.log(var3);  // "rabbit"
console.log(var4);  // "parrot"
console.log(var5);  // "fox"

객체의 경우 중괄호 { }로 변수들을 묶어 사용할 수 있습니다.

const obj = {
    name: "Jhon",
    age: 16,
    grade: "A",
}

// destructuring
const {name, age, grade} = obj;

console.log(name);  // "Jhon"
console.log(age);   // 16
console.log(grade); // "A"

두 경우 모두 해당 값이 undefined를 가질 때를 위해 default value를 설정할 수 있습니다.

 

예외적으로 null의 값은 그대로 null값을 전달합니다.

 

특히 객체의 경우 받는 객체의 속성값 이름을 임의로 변경할 수도 있습니다.

// 배열의 default value 설정
const arr = ["c", "b"];
const [var1, var2, var3="a"] = arr;
console.log(var1, var2, var3);  // "c", "b", "a"

// 객체의 default value 설정
const obj = {
    attr1: 12,
    attr2: "35",
}
// attr1과 attr2의 속성 이름을 age와 id로 재정의
const {attr1: age, attr2: id, attr3="male"} = obj
console.log(age, id, attr3);  // 12, "35", "male"

이를 응용하면 함수에서 매개변수로 배열 또는 객체를 받을 때 그 구성요소를 구조분해로 받을 수 있습니다.

const arrFunc = ([first, second, ...last]) = > {
    console.log("first is", first);
    console.log("second is", second);
    console.log("last are", last);
}

const arr = ["Min", "Lee", "Choi", "Park"];
arrFunc(arr);

// ***

const objFunc = ({name, age, sex}) = > {
    console.log("name:", name);
    console.log("age:", age);
    console.log("sex:", sex);
}

const obj = {
    name: "Min",
    age: 22,
    sex: 'M',
}
objFunc(obj);