[JavaScript] 구조분해 할당

구조분해 할당(Destructuring Assignment)은 배열, 객체의 여러 속성값을 변수로 할당할 수 있는 문법이다.

기본적인 사용법

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

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

배열에서의 구조분해 할당

선언과 할당 분리하기

위에서와 같이 새로운 변수 할당할 수 있고 아래 코드와 같이 이미 존재하는 변수에 할당할 수 있다.

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

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

선언한 변수의 개수와 할당하는 요소의 개수가 일치할 필요는 없다.

배열에서 할당하는 기준은 인덱스이다, 그러므로 순서대로 할당한다.

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

const [c, d] = [1, 2, 3];
console.log(c, d); // 1 2

const [e, , f] = [1, 2, 3]; // -> 일부 속성값을 사용하기 싫으면 건너뛰는 개수만큼 쉼표를 입력해준다.
console.log(e, f); // 1 3

기본값

지정한 기본값보다 할당된 값이 우선으로 처리된다.
만약 배열의 속성값이 undefined이면 기본값이 할당된다.

const num = [1];
const [a = 10, b = 20] = num;

console.log('a:', a, ' b:', b); // a: 1  b: 20

Rest 요소 사용하기

rest 요소는 Rest 파라미터와 마찬가지로 반드시 마지막 위치에 작성해야된다.
rest 요소를 이용하면 나머지 모든 속성 값을 새로운 배열로 만들 수 있다.

const nums = [1, 2, 3, 4, 5];
const [a, b, ...restValue] = nums;

console.log(restValue); // [ 3, 4, 5 ]

객체에서의 구조분해 할당

기본적인 사용법

배열에서는 순서가 중요했지만 객체에서는 순서는 상관없다.

const info = {
  name: '다현',
  age: 20,
};
const { age, name } = info;
const { name, age } = info;

console.log(age, name); // 20 다현
console.log(name, age); // 다현 20

속성명이 중요하다.

객체에서 할당 기준은 속성명이다. 이때 속성명은 프로퍼티의 키와 같다.
위에서 설명했듯이 순서는 상관없으며 선언된 변수의 이름과 기존의 속성명이 일치하면 할당된다.

const info = {
  name: '다현',
  age: 20,
};
const { a, b } = info;

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

다른 변수 이름으로 속성값을 할당받기

const info = {
  name: '다현',
  age: 20,
};
const { name: myName, age } = info;

console.log(myName, age); // 다현 20

기본값 설정하기

배열에서처럼 속성값이 undefined인 경우에만 기본값이 들어간다.
속성값이 null이거나 값이 들어있다면 설정한 값이 들어가지 않는다.

const info = {
  name: '다현',
  age: 20,
};
const { name = 'pulan', age = 88, job = 'front-end developer' } = info;

console.log(name); // 다현
console.log(age); // 20
console.log(job); // front-end developer

Rest 파라미터를 사용하여 별도의 객체를 생성하기

const info = {
  name: '다현',
  age: 20,
  job: 'front-end developer',
  dream: 'dream',
};
const { age, ...restValue } = info;

console.log(restValue); // { name: '다현', job: 'front-end developer', dream: 'dream' }

함수의 매개변수에서 사용하기

const info = {
  name: '다현',
  age: 20,
};

const display = ({ name, age }) => {
  console.log(`안녕하세요. 저는 ${name}이고 ${age}살 입니다.`);
};
display(info); // 안녕하세요. 저는 다현이고 20살 입니다.

배열의 요소가 객체인 경우

배열, 객체 구조분해 할당을 같이 사용할 수 있다.

const members = [
  { name: 'Kim', skills: 'HTML' },
  { name: 'Moon', skills: 'CSS' },
  { name: 'Song', Skills: 'JavaScript' },
];
const [{ name }, { skills }, ...restMember] = members;

console.log(name); // Kim
console.log(skills); // CSS
console.log(restMember); // [ { name: 'Song', Skills: 'JavaScript' } ]

중첩 객체인 경우

const user = {
  key: 1,
  info: {
    name: 'Kim',
    skills: 'HTML',
  },
};
const {info: { name, skills }} = user;

console.log(name); // Kim
console.log(skills); // HTML