배열

const arr = [1, 2, 3];
const a = arr[0];
const b = arr[1];
const c = arr[2];

console.log(a, b, c); // 1 2 3

// 구조 분해 할당
const [a, b, c] = arr;

console.log(a, b, c); // 1 2 3

배열의 구조를 분해해서 각각의 변수에다가 재할당하는 것

const arr = [1, 2, 3];

const [, , c] = arr;

	console.log(c) // 3

arr 배열에서 마지막 데이터 3만 필요하다면 구조 분해 할당에서 ,(쉼표)로 구분하고 마지막에만 변수를 할당해주면 된다. → 순서가 중요하다

const arr = [1, 2, 3];
const [a, rest] = arr

console.log(a, rest) // 1 2

a에 첫번째 값만 할당하고 나머지를 rest에 할당하고 싶었는데 첫번째와 두번째 값만 할당되었다. 이럴 때는 전개 연산자를 사용해야한다.

const arr = [1, 2, 3];
const [a, ...rest] = arr

console.log(a, rest) // 1 [2, 3]

위에 설명한 것과 같이 이용하고 싶을 때는 전개연산자를 사용하여 rest를 변수로 만들어주어야한다.
여기서 rest는 단순 변수명으로 아무 변수명으로 사용해도 된다.

객체

const obj = {
	a: 1,
	b: 2.
	c: 3
}

const a = obi.a
const b = obj.b
const c = obi.c

console.log(a, b, c) // 1 2 3

// 구조 분해 할당
const { a, b } = obj
const { a, c } = obj
console.log(a, b) // 1 2 3

const { a, c } = obj

배열과 다른 점은 배열은 그냥 나열되어 있어서 순서가 중요하다면 객체는 속성 이름이 부여되어 있기 때문에 a와 c만 사용하고 싶으면 위와 같이 사용할 수 있다.

기본 값 지정

const obj = {
	a: 1,
	b: 2.
	c: 3
}

1. const { x } = obj // undefined
2. const { x = 4 } = obj // 4
3. const { c = 4 } = obj // 3

1번과 같이 이미 존재하는 객체 없는 변수로 할당하게되면 undefined가 출력된다.

따라서, 2번처럼 이미 존재하는 객체에 없는 변수라면 기본값을 지정해줄 수 있다.

3번처럼 객체에 존재하는 변수라면 기본값을 사용하지 않고 객체에 있는 값으로 할당된다.

속성 이름 변경

const obj = {
	a: 1,
	b: 2.
	c: 3
}

const { x = 4, a: newA } = obj

console.log(a) // error
console.log(newA) // 1

구조 분해 할당하는 과정에서 원래 객체의 변수(속성 이름)을 변경해줄 수 있다.

const obj = {
	a: 1,
	b: 2,
	c: 3,
	x: 7,
	у: 100
}

const { c, ...rest } = obj

console.log(c, rest) // 3 {a: 1, b: 2, x: 7, у: 100}