[javascript] 구조 분해 할당 (destructuring assignment)

1. 구조 분해 할당

배열이나 객체를 분해하여 저장된 값을 개별 변수에 원하는대로 담을 있는 문법입니다.

2. 배열 분해 할당하기

1) 배열 분해 할당

var arr = ["kim", "park", "lee"];

var [a, , c, d = "empty"] = arr; //배열 구조 분해 할당

console.log(a, c, d); // kim lee empty

arr 배열에 "kim", "park", "lee" 값이 들어있고, arr 배열을 구조 분해 할당해서 변수 a, c, d에 삽입합니다.
배열에 순서와 선언된 변수 순서에 맞게 분해 할당됩니다.
해당 자리가 비어있다면, 할당되지 않으며, 값이 할당되지 않았을 경우 디폴트 값을 설정할 수 있습니다.

 

2) "..." 연산자로 나머지 값 저장하기

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var [n1, n2, ...narr] = numbers;

console.log(n1, n2, narr);// 1 2 [3, 4, 5, 6, 7, 8, 9, 10]

배열의 앞 부분 몇개와 나머지 값들을 배열에 저장할 때 사용합니다.  

 

3) 배열 합치기

var a1 = [1, 2, 3];
var a2 = [4, 5, 6];
var a3 = [...a1, ...a2];

console.log(...a3, ...a2); //1 2 3 4 5 6 4 5 6
console.log(a3); //[1, 2, 3, 4, 5, 6]

"..." 연산자는 배열을 펼치는 연산자입니다. "..." 연산자를 사용해서 a1배열과 a2배열을 합쳐서 a3배열을 만들 수 있습니다. 

 

3. 객체 분해 할당하기

1) 객체 분해 할당

var person = {
    id: 35,
    name: "lee",
    age: 21,
    hobby: ["reading", "game", "bike ride"]
};

var {name, id, age, hobby, join = false} = person;

console.log(id, name, age, hobby, join); // 35 "lee" 21 ["reading", "game", "bike ride"] false

객체 분해 할당은 배열 분해 할당 방법과 비슷하다. 차이가 있다면 분해 할당을 선언하는 부분이 [ ... ]이 아니고 { ... } 입니다.
그리고 디폴트 값을 선언할 수 있으며, key 값만 맞다면 변수 선언의 순서가 달라도 상관없습니다. 

 

2) 객체의 나머지 연산

var person = {
    id: 35,
    name: "lee",
    age: "21",
    hobby: ["reading", "game", "bike ride"]
};

var {id, ...data} = person;

console.log(id, data); // 35 {name: "lee", age: "21", hobby: Array(3)}

배열 분해 할당과 마찬가지로 "..." 연산자를 통해 기본 변수와 객체에 원하는 만큼 나누어 할당할 수 있습니다. 

 

3) 객체 합치기

var person = {
    id: 35,
    name: "lee",
    age: "21",
    hobby: ["reading", "game", "bike ride"]
};

var extraInfo1 = {
    nationality: "KOREA",
    introduce: "Hi !"
};

var extraInfo2 = {
    a: "GOOD",
    b: "NICE"
};


var info = {...person, extraInfo2, ...extraInfo1};

console.log(info);
/*
{
  age: "21"
  extraInfo2: {a: "GOOD", b: "NICE"}
  hobby: ["reading", "game", "bike ride"]
  id: 35
  introduce: "Hi !"
  name: "lee"
  nationality: "KOREA"
}
*/

 

4) 중첩 객체 분해 할당

let config = {
    option: {
        a: true,
        b: false
    },
    arr: ["GOOD", "PERSON"],
};

var {
    option: {
        a,
        b
    },
    arr: [str1, str2],
    name = "app"
} = config;

console.log(name, a, b, str1, str2); // app true false GOOD PERSON

---

참조 :

https://ko.javascript.info/destructuring-assignment