[JavaScript] 분할 할당

분할 할당(destructuring assignment)은 JavaScript에서 배열이나 객체를 해체하여 변수에 개별적으로 할당하는 기능이다.

 

이를 통해 배열 또는 객체의 값들을 편리하게 추출하고 변수에 할당할 수 있다.

 

배열 분할 할당 배열 분할 할당을 사용하면 배열의 각 요소를 개별 변수로 추출할 수 있다.

 

배열의 각 요소는 배열에서 해당 위치에 있는 변수에 할당된다.

 

배열 분할 할당은 대괄호([])를 사용한다.

 

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

const [a, b, c, d, e] = arr;

console.log(a); // 1

console.log(b); // 2

console.log(c); // 3

console.log(d); // 4

console.log(e); // 5

 

 

배열 분할 할당을 사용하여 변수를 선언하고 배열을 할당할 수도 있다.

 

let a, b;

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

console.log(a); // 1

console.log(b); // 2

 

 

배열 분할 할당은 배열의 일부 요소를 건너뛰고 필요한 요소만 추출할 수도 있다.

 

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

const [a, , c] = arr;

console.log(a); // 1

console.log(c); // 3

 

 

※ 객체 분할 할당

 

객체 분할 할당은 객체의 속성을 변수로 추출한다.

 

객체 분할 할당은 중괄호({})를 사용한다.

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

const { x, y } = obj;

console.log(x); // 1

console.log(y); // 2

 

 

객체 분할 할당은 객체의 속성을 원하는 변수 이름에 할당할 수 있다.

 

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

const { x: a, y: b } = obj;

console.log(a); // 1

console.log(b); // 2

 

 

객체 분할 할당은 기본값을 설정할 수도 있다.

 

객체에 해당 속성이 없는 경우 기본값이 변수에 할당된다.

 

const obj = { x: 1 };

const { x, y = 2 } = obj;

console.log(x); // 1

console.log(y); // 2

 

 

객체 분할 할당은 중첩된 객체에서도 동작한다.

 

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

const { x, y: { z } } = obj;

console.log(x); // 1

console.log(z); // 2

 

 

※ 배열과 객체 동시에 분할 할당

 

배열과 객체가 혼합된 경우에도 분할 할당을 사용할 수 있습니다.

 

const arr = [1, { x: 2 }];

const [a, { x }] = arr;

console.log(a); // 1

console.log(x); // 2

 

 

분할 할당은 배열이나 객체의 중첩 구조를 깊게 따라갈 수 있으며,

유연하고 간결한 코드 작성을 가능하게 해준다.

 

이를 통해 배열이나 객체에서 필요한 값들을 효과적으로 추출하고 변수에 할당할 수 있다.