구조 분해할당(Destructing)

구조 분해할당(Destructing) 

- 배열과 객체의 속성을 해체하여 그 값을 개별 변수로 받는방법

예시

const arr = [1,2,3]
const [first, second, third] = arr

let x,y,z
[x,y,z] = arr;

 

예시

let x, y, z;
 
[x, y] = [1, 2];
console.log(x, y); // 1 2
[x, y] = [1];
console.log(x, y); // 1 undefined
[x, y] = [1, 2, 3];
console.log(x, y); // 1 2
[x, , z] = [1, 2, 3];
console.log(x, z); // 1 3
 
// default value
[x, y, z = 3] = [1, 2];
console.log(x, y, z); // 1 2 3
[x, y = 10, z = 3] = [1, 2];
console.log(x, y, z); // 1 2 3
 
// spread operator
[x, ...y] = [1, 2, 3];
console.log(x, y); // 1 [ 2, 3 ]


출처:  [기본기를 쌓는 정아마추어 코딩블로그]

 

예시

배열 (분해 후 새 변수에 할당)

const [a, b, ...reset] = [10, 20, 30, 40, 50]

// a,b,reset는 각각 어떤 값인가?

객체(분해 후 새 변수에 할당)

const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}


// a, b, rest값?

1,2행은 value값이 나오고 rest는 객체가 나온다.

객체의 경우 배열과 다른점이 있는데 객체의 속성으로 받아야 한다는 점이다.

// ES6
const obj = { firstName: 'soyoung', lastName: 'park' };
 
const { firstName, lastName } = obj;
// const {f,l} = obj; 이렇게 받을 수 없다.**
 
console.log(firstName, lastName); // soyoung park

 

속성명으로 변수를 선언하고 받아야 한다.

function margin() {
  const left = 1, right = 2, top = 3, bottom = 4;
  return { left, right, top, bottom };
}
const { left, bottom } = margin();
//필요한 프로퍼티만 이름으로 가져올 수 있음.
console.log(left, bottom); // 1 4
 
//중첩 객체에서 가져오는 방법 
function settings() {
  return { display: { color: 'red' }, keyboard: { layout: 'qwerty'} };
}
const { display: { color: displayColor }, keyboard: { layout: keyboardLayout }} = settings();
console.log(displayColor, keyboardLayout); // red qwerty


출처:  [기본기를 쌓는 정아마추어 코딩블로그]

 

 

 

---

예제: 함수에서 객체 분해

- 객체에서 구조 분해 할당을 사용하는 경우 선언(const, let, var)과 함께 사용하지 않으면 에러가 발생할 수 있다.

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

let user = {
  id: 42,
  displayName: "jdoe",
  fullName: {
      firstName: "John",
      lastName: "Doe"
  }
};

whois(user)