구조 분해 할당 (Destructuring assignment)

구조 분해 할당 : Destructuring assignment

배열이나 객체의 속성을 쉽게 해체하여 변수에 담아주는 javascript 표현식이다. 구조 분해 할당은 크게 배열 구조 분해와 객체 구조 분해로 나뉘게 된다.

- 배열 구조 분해

배열에 담긴 요소들을 순서대로 해당 변수에 담아준다. 

const numbers = ["one", "two", "three"];
const [a, b, c] = numbers;

console.log(`one: ${a} | two: ${b} | three: ${c}`);
// one: one | two: two | three: three

각각의 변수에 배열을 통해 값을 할당하여 줄 수 있다.

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

console.log(`a: ${a} | b: ${b}`);
// a: 1 | b: 2

L 각각의 변수에 값을 할당하는 과정에서 기본값을 설정하여 줄 수 도 있다. 대입하는 값이 존재하지 않는 경우 기본값을 그대로 유지한다.

let a, b;
[a = 1, b = 2, c = 3] = ["one", "two"];

console.log(`a: ${a} | b: ${b} | c: ${c}`);
// a: one | b: two | c: 3

변수의 값을 서로 교환할 수 있다.

let a = 1;
let b = 2;

console.log(`a: ${a} | b: ${b}`);
// a: 1 | b: 2

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

console.log(`a: ${a} | b: ${b}`);
// a: 2 | b: 1

함수가 반환할 배열을 할당할 수 있다.

const arr = () => {
  return [1, 2];
};

const [one, two] = arr();

console.log(`one: ${one} | two: ${two}`);
// one: 1 | two: 2

배열의 나머지 요소들을 한 변수에 할당할 수 있다.

const numbers = [1, 2, 3, 4, 5, 6];
const [one, ...rest] = numbers;

console.log(`one: ${one} | rest: ${rest}`);
console.log(rest);
// one: 1 | rest: 2,3,4,5,6
// [ 2, 3, 4, 5, 6 ]

---

- 객체 구조 분해

기본적 객체 구조 분해 사용 방식

const numbers = { one: 1, two: 2 };
const { one, two } = numbers;

console.log(`one: ${one} | two: ${two}`);
// one: 1 | two: 2

const { one: number1, two: number2 } = numbers;
console.log(`number1: ${number1} | number2: ${number2}`);
// number1: 1 | number2: 2

기본값을 할당하여 줄 수 있다. 대입되는 값이 없는 경우에는 기본값이 유지된다.

const me = { myName: "me", hobby: "sleep" };
const { myName = "hee", hobby = "eat", like = "snack" } = me;

console.log(`myName: ${myName} | hobby: ${hobby} | like: ${like}`);
// myName: me | hobby: sleep | like: snack

기본값과 할당과 새로운 변수로의 선언을 동시에 할 수 있다.

const me = { myName: "me", hobby: "sleep" };
const { myName: newName = "hee", hobby = "eat", like = "snack" } = me;

console.log(`newName: ${newName} | hobby: ${hobby} | like: ${like}`);
// newName: me | hobby: sleep | like: snack

 

 

 

 

출처 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment