분해 구조 할당(Destructuring assignment)

자바스크립트에서 '분해 구조 할당'이란?

'분해 구조 할당' (Destructuring Assignment)은 ES6(2015)에서 도입된 기능 중 하나로, 배열이나 객체를 비구조화하여 그 값을 개별 변수에 할당하는 것을 말합니다.

이 기능은 변수를 선언하고 그 값을 할당하는 작업을 보다 쉽고 간결하게 해주며, 코드의 가독성과 유지 보수성을 높여줍니다.

배열에서의 분해 구조 할당

1. 배열 비구조화 할당

배열 비구조화 할당은 배열의 각 요소를 개별 변수에 할당하는 것을 말합니다.

const arr = [1, 2, 3];

const [a, b, c] = arr;

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

1-1. default값을 주었을 때

배열에서 비구조화 할당 시, 만약 할당하려는 요소가 undefined인 경우 default값을 설정할 수 있습니다.

const arr = [1, 2];

const [a, b, c = 3] = arr;

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

1-2. 변수 선언 후 분해 구조 할당

변수를 선언한 후에도 분해 구조 할당을 할 수 있습니다.

let a, b, c;

[a, b, c] = [1, 2, 3];

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

1-3. 두 변수의 값 교환하기

분해 구조 할당은 두 변수의 값을 교환하는 데에도 유용하게 사용될 수 있습니다.

let a = 1, b = 2;

[a, b] = [b, a];

console.log(a); // 2
console.log(b); // 1

1-4. 분해 구조 할당 시 일부 값 무시하기

배열에서 분해 구조 할당을 할 때, 일부 값을 무시하고 싶다면 쉼표(,)를 사용합니다.

const arr = [1, 2, 3];

const [a, , c] = arr;

console.log(a); // 1
console.log(c); // 3

2. 배열에서 spread 연산자를 사용한 분해 구조 할당

spread 연산자(...)를 사용하여 배열에서 분해 구조 할당을 할 수 있습니다.

const arr = [1, 2, 3, 4];

const [a, b, ...rest] = arr;

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

객체에서의 분해 구조 할당

1. 객체 비구조화

객체 비구조화 할당은 객체의 프로퍼티를 개별 변수에 할당하는 것을 말합니다.

const obj = { x: 1, y: 2 };

const { x, y } = obj;

console.log(x); // 1
console.log(y); // 2

1-1. default값을 주었을 때

객체에서 비구조화 할당 시, 만약 할당하려는 프로퍼티가 undefined인 경우 default값을 설정할 수 있습니다.

const obj = { x: 1 };

const { x, y = 2 } = obj;

console.log(x); // 1
console.log(y); // 2

2. rest를 이용한 분해 구조 할당

rest 연산자(...)를 사용하여 객체에서 분해 구조 할당을 할 수 있습니다.

const obj = { x: 1, y: 2, z: 3 };

const { x, ...rest } = obj;

console.log(x); // 1
console.log(rest); // { y: 2, z: 3 }

2-1 rest를 이용한 분해 구조 할당 시 주의할 점

• rest 연산자는 항상 마지막에 위치해야 합니다.

// 올바른 예시
const { a, b, ...rest } = { a: 1, b: 2, c: 3 };

// 잘못된 예시
const { ...rest, a, b } = { a: 1, b: 2, c: 3 };

• rest 연산자를 사용한 변수는 반드시 배열로 할당되어야 합니다.

// 올바른 예시
const { a, b, ...rest } = { a: 1, b: 2, c: 3 };
const arr = [a, b];

// 잘못된 예시
const { a, b, ...rest } = { a: 1, b: 2, c: 3 };
const obj = { a, b };

• 객체에서 rest 연산자를 사용할 때는 해당 객체가 가지고 있는 프로퍼티 중에서 이미 분해되어 할당된 프로퍼티는 제외되고 나머지 프로퍼티들이 rest 변수에 할당됩니다.

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

const { a, ...rest } = obj;

console.log(a); // 1
console.log(rest); // { b: 2, c: 3 }

참고자료 출처

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
https://ko.javascript.info/destructuring-assignment