8. 구조 분해 할당

 

구조 분해 할당이란 객체나 배열 중 필요한 일부를 변수로 분해할 수 있도록 해주는 특별한 문법 구조이다.

 

배열 값 할당

 

한 번에 여러 개의 변수에 값을 할당할 수 있다.

//기본형
 [식별자, 식별자, 식별자, ...] = 배열
 
 //예시1
 let arr = [1,2,3];
 let [num1, num2, num3] = arr;
 
 num1 -> 1
 num2 -> 2
 
 //예시2
 let [a,b] = [1,2]
 console.log(a,b) -> 1,2

 

 

값 교체

let a=1;
let b=2;

//[변환시킬 변수] = [변환할 변수 값]
[a,b] = [b,a];

a -> 2
b -> 1

 

 

객체 값 할당

 

객체 내부에 있는 속성을 꺼내서 변수를 할당한다.

 

- 배열

//기본형
{속성 이름, 속성 이름 } = 객체
{식별자=속성 이름, 식별자=속성 이름} = 객체

//예시
let obj = {
  key1 : '가',
  key2 : '나'
};

let {
  key1 : newName,
  key2
} = obj;

 

- 객체

let user = {
 name : "lynn",
 age : 23,
 hobby : "golf"
};

let {hobby} = user;

console.log(hobby); -> golf

 

쉼표 분해

 

배열에서 필요하지 않은 요소가 있으면, 쉼표를 사용해서 버릴 수 있다.

//배열 요소인 'apple' 버리기
let user = ["lynn", 'apple', 23];

let [name, , age] = user;

console.log(name);
console.log(age)l

 

 

기본값 할당 분해

 

변수에 값이 할당되지 못하는 상황을 방지하기 위해, 기본값(default value)을 설정한다.

let [a=3, b=4, c=5] = [1,2];
console.log(a); -> 1
console.log(b); -> 2
console.log(c); -> 5

 

 

매개변수 ' ... '

 

매개변수 '...'을 이용하여 복사한 두 배열은 완전히 독립적으로 작동한다.

 

- 배열

//기본형
 [...배열]
 [...배열, 자료, 자료, 자료]
 
 //예시1
 const a = [1,2]
 const b = [...a]
 b.push(3)
 b.push(4)
 
 conosle.log(b) -> [1,2,3,4]
 
 //예시2
 const a = [1,2]
 const b = [3, ...a, 4]
 
 console.log(b) -> [3,1,2,4]

 

- 객체

//기본형
{...객체}
{...객체, 자료, 자료, 자료}

//예시
const a = {
  이름 : 'lynn',
  나이 : 23,
  성별: 여자
}

const b = {...a}
b.이름 = '예린'
b.나이 = 21

console.log(JSON.stringify(b)) -> {"이름":"예린","나이":21,"성별":"여자"}