구조 분해 할당(Destructuring assignment)

1.구조분해할당(Destructuring assignment)

• 배열이나 객체의 속성을 해체하고, 그 값을 개별 변수에 담을 수 있게 하는 JS표현식
• 원래 변수에서 어떤 값을 분해해 할당할지 정의한다

let x = [1,2,3,4,5];
//기본 변수 할당
let [y, z, p] = x;
y; // 1
z; // 2
p; // 3

// 선언에서 분리한 할당
let a,b;
[a, b] = [10, 20];
a; // 10
b; // 20

1) 배열 구조 분해 할당

var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

• 기본 값이 할당되어있으면, 분해 값이 undefined일 때 그 값을 대신 반환한다.

var a, b;

[a=5, b=7] = [1];
console.log(a); // a에는 1이 할당되어 교체된 값 리턴
console.log(b); // undefined므로 기존 할당된 7 리턴

• 변수값 교환

var a = 1;
var b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

• 함수 반환

function f() {
  return [1, 2];
}

var a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2

2) 객체 구조 분해 할당

• 기본할당

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true

// 할당 변수와 키가 동일하지 않으면 undefined를 뱉는다
let {a, b} = o

console.log(a); // undefined
console.log(b); // undefined

// 선언없는 할당
({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20

({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

• 함수 매개변수의 기본 값 설정

const student = { name: '최초보', major: '물리학과', lesson: '양자역학', grade: 'B+' }

function getSummary({name, lesson: course, grade }){
return `${name}님은 ${grade}의 성적으로 ${course}을 수강했습니다`
}

getSummary(student);
// "최초보님은 B+의 성적으로 양자역학을 수강했습니다"

---

★ 중첩된 객체 및 배열의 구조 분해
★ for of 반복문과 구조 분해
★ 함수 매개변수로 전달된 객체에서 필드 해체하기

그외 참조사이트
모던JS