구조 분해 할당(Destructuring assignment)


const user = { name: 'ian', age: 23, university: '숭실대학교', girlfriend: null };

const say = user => {
  return `
    ${user.university} ${user.name}님 환영합니다.
    ${user.age}살 나이에 여자친구가 ${user.girlfriend ? '있' : '없'}으시군요.
  `;
}

say(user); // 숭실대학교 ian님 환영합니다.↵ 23살 나이에 여자친구가 없으시군요.

위와 같은 예제가 있다.

user 오브젝트의 값들을 사용하기 위해서는 항상 user.`프로퍼티의 이름` 으로 접근해야한다.

만약 오브젝트의 Depth가 길어지거나 같은 코드 블럭에서 자주 사용할 변수의 경우에는 코드 작성이 번거로워 질 수 있다.


const user = { name: 'ian', age: 23, university: '숭실대학교', girlfriend: null };

const say = userInfo => {
  // 이 부분을 구조 분해 할당이라고 한다.
  const { name, age, university, girlfriend } = userInfo;

  return `
    ${university} ${name}님 환영합니다.
    ${age}살 나이에 여자친구가 ${girlfriend ? '있' : '없'}으시군요.
  `;
}

say(user); // 숭실대학교 ian님 환영합니다.↵ 23살 나이에 여자친구가 없으시군요.

오브젝트의 경우에는 위와 같은 형태로 오브젝트 프로퍼티를 손쉽게 접근할 수 있다.

위의 예제를 응용한다면 아래와 같이 사용할 수 있다.


const user = { name: 'ian', age: 23, university: '숭실대학교', girlfriend: null };

const say = ({
  name,
  age,
  university,
  girlfriend,
  // 아래와 같은 방법으로 넘어오지 않은 프로퍼티의 기본 값을 지정할 수 있다.
  comment = '화이팅!',
  // 아래와 같은 방법으로 name, age, university, girlfriend, comment 이 외의 값을 props를 통해 받아올 수 있다.
  // ex) props.phoneNumber
  ...props
}) => {
  return `
    ${university} ${name}님 환영합니다.
    ${age}살 나이에 여자친구가 ${girlfriend ? '있' : '없'}으시군요.
    ${comment}
  `;
}

say(user); // 숭실대학교 ian님 환영합니다.↵ 23살 나이에 여자친구가 없으시군요.↵ 화이팅!

만약 오브젝트의 depth가 깊은 경우 아래처럼 사용할 수 있다.


const user = { name: { first: 'im', last: 'ian' } };

const say = ({
  name: {
    first,
    last
  },
  age,
}) => {
  return `${first} ${last}님은 ${age}세가 맞습니까?`;
}

say(user); // "im ian님은 23세가 맞습니까?"

프로퍼티의 이름이 길거나 중복되는 경우에는 아래처럼 이름을 변경해줄 수 있다.


const user = { veryLongPropertiesName: 'ian' }

const say = ({
  veryLongPropertiesName: shortName,
  // 없는 프로퍼티에 값을 지정하며 동시에 다른 이름을 지정할 수도 있다.
  veryLongProperitesAge: shortAge = 23,
}) => {
  return `당신의 이름은 ${shortName}이며 ${shortAge}세 입니까?`;
}

say(user); // 당신의 이름은 ian이며 23세 입니까?

이 구조 분해 할당은 배열인 경우에도 사용할 수 있다.


const numbers = [1, 3, 5, 7, 9];

const calc = numberArr => {
  // a = 1, b = 3, c = 5 할당 된 후 이 외의 값인 7과 9는 props에 배열로 담기게 된다.
  const [a, b, c, ...props] = numberArr; // props = [7, 9];
  let propsCalc = 1;
  props.forEach(v => {
    propsCalc = propsCalc * v;
  });

  return [a * b * c, propsCalc];
}

calc(numbers); // [15, 63]

다람쥐 헌 쳇바퀴에 타고파

구조 분해 할당(Destructuring assignment)