구조분해 할당(Destructuring assignment)

Javascript 문법

 

구조분해 할당(Destructuring assignment)

: 배열이나 객체의 속성을 해체해 그 값을 개별변수에 담는 것

• 배열 구조 분해
• 객체 구조 분해

 

배열 구조 분해

const [변수] = 배열;

 

• 각 변수에 배열을 인덱스 순으로 값 대응

const list =["안녕","반가워",2];
[item1,  item2, item3] = list;
// 밑의 식과 동일
// const item1 = list[0];
// const item2 = list[1];
// const item3 = list[2];

console.log(item1); // 안녕
console.log(item2); // 반가워
console.log(item3); // 2
console.log("-------------");

//item1, item2, item3의 값이 없으면 hello 출력, item4값이 없으면 hi출력
[item1, item2, item3 = "hello", item4 = "hi"] = list;
console.log(item1); // 안녕
console.log(item4); // hi

 

• 변수의 선언이 분리되어도 구조 분해를 통해 값 할당 가능

var a, b;
[a,b] = ["안녕", "반가워"];
console.log(a);
console.log(b);

 

• 구조분해 시 변수의 값이 undefined일 때 기본값 할당 가능

var c, d;
[c="하하하",d="히히히"] = ["신난다!"];
console.log(c); // 신난다!
console.log(d); // 히히히
// c의 기본값은 "하하하", d의 기본값은 "히히히"
// c는 구조 분해 값이 할당되어 "신난다!" 출력
// d는 구조 분해 값이 undefined이기 때문에 기본값인 "히히히"출력

 

 

 

객체 구조 분해

const {변수} = 객체;

 

• 객체 안의 속성을 변수명으로 사용

const obj = {
    key1: "value1",
    key2: "value2"
};

const {key1,key2,key3="value3"} = obj;
console.log(key1); // value1
console.log(key2); // value2
console.log(key3); // value3

객체 구조 분해는 key값으로 value값을 찾기 때문에 객체가 만들어진 순서대로 변수명을 적지 않아도 됨
배열 구조 분해는 index로 값을 가져오기 때문에 변수명을 적을 때 순서를 지켜가며 작성해야 함

 

• :(콜론)을 이용해 새 변수명을 선언하고, 원래의 값을 새 변수명에 할당할 수 있음

const obj2 = {
    a: "apple",
    b: "banana",
    c: "candy"
};
const { a, b:b2, c} = obj2;
console.log(a);  // apple
console.log(b2);  // banana
console.log(c);  // candy

 

• rest (나머지) 연산자

      : 나머지를 가져오는 연산자

        객체/배열/함수의 파라미터에서 사용 가능

const { b, ...rest} = obj2; //rest 연산자는 마지막에 위치시켜야 함
console.log(b); // banana
console.log(rest); // { a: 'apple', c: 'candy' }
//rest는 지정 key값(ex. b) 외 나머지의 key와 value값(ex, a,c)을 가져옴