js - 구조 분해 할당

구조 분해 할당

배열과 객체의 값을 분해해서 변수에 할당해줌

배열의 값을 복사한 후 변수에 할당해줌으로 배열이 수정 또는 파괴되지 않습니다.

 

let fruits = ["사과","수박","오렌지","딸기"];

let fruit1 = fruits[0];

let fruit2 = fruits[1];

let fruit3 = fruits[2];

let fruit4 = fruits[3];

 

1) 기본 구문 let [변수명, 변수명, ...] = 배열변수 

ex) let [fruit1, fruit2, fruit3, fruit4] = fruits;

 

2) 쉼표를 사용하여 요소 무시하기

let fruits = ["사과","수박","오렌지","딸기"];

let [fruit1, , fruit2] = fruits;

 

3) 변수의 값을 교환

변수에 할당된 값을 교환할때도 구조 분해 할당을 사용할 수 있음.

구문 -> [변수1, 변수2] = [변수2, 변수1];

let name = 'green';

let admin = 'admin';

admin엔 'green', name엔 'admin'

[name, admin] = [admin, name];

let temp;

temp = name;

name = admin;

admin = temp;

 

4) 나머지 매개변수를 활용한 나머지 요소 배열로 가져오기

구문 -> let [변수명1, 변수명2, ...변수명3] = 배열변수

ex)

let fruits = ["사과","수박","오렌지","딸기","키위"];

let [fruit1, fruit2, ...fruit3] = fruits;

 

객체 구조분해할당

구조분해할당으로 객체도 분해할 수 있음

구문 -> let {변수명1, 변수명2} = {키1:...., 키2:...};

ex)

let options = {

    title: "Menu",

    width: 100,

    height: 200,

}

let {title, width, height} = options;

 

1) 객체의 키와 다른 변수명으로 할당

객체 키명: 변수명

let options = {

    title: "Menu",

    width: 100,

    height: 200,

}

let {title, width: w, height} = options;

let {title} = options;

 

2) 나머지 패턴 '...'

let options = {

    title: "Menu",

    width: 100,

    height: 200,

}

let {title, ...rest} = options