ES2015에는 destructuring assignment라는 기능이 있다. 객체나 배열에서 바로 값을 가져와서 변수에 할당할 수 있는 기능인데 처음 보면 좀 헷갈릴 수도 있지만 쓰다 보면 꽤 편해서 자주 사용하고 있다.

다음과 같은 함수를 보자. 파라미터를 2개 받는 함수인데(로직(?)은 여기선 의미 없다.) 이젠 파라미터에 기본값을 지정할 수 있으므로 코드가 훨씬 간단해졌다.

const paginate = (page = 1, perPage = 15) => {
  return {
    offset: (page - 1) * perPage,
    limit: perPage,
  };
};

이렇게 일일이 파라미터로 받아도 되지만 조건이 많아지면 객체로 받는 게 더 편한 때도 있다. 다음처럼 options라는 객체로 인자를 받으면 이전에는 기본값을 지정하기 위해서 Object.assign() 혹은 lodash의 _.assign 같은 메서드를 사용해서 기본값을 지정해서 사용할 때 모든 속성을 다 지정하지 않도록 할 수 있다.

const paginate = (options) => {
  options = Object.assign({
    page: 1,
    perPage: 15,
  }, options);

  return {
    offset: (options.page - 1) * options.perPage,
    limit: options.perPage,
  };
};

paginate({ page: 4});
// { offset: 45, limit: 15 }

이렇게 파라미터를 객체로 받을 때 destructuring assignment를 사용하면 코드를 더 간단하게 작성할 수 있다. 첫 예제와 똑같아 보이지만 파라미터를 받을 때 {}로 감싸서 destructuring assignment를 사용하면서 기본값을 지정했다. 이제 사용하는 쪽에서 필요한 속성만 지정하면 나머지는 기본값으로 들어가게 된다.

const paginate = ({ page = 1, perPage = 15 }) => {
  return {
    offset: (page - 1) * perPage,
    limit: perPage,
  };
};

paginate({ page: 4});
// { offset: 45, limit: 15 }

하지만 이때 paginate()처럼 아예 인자를 주지 않으면 TypeError: Cannot destructure propertypageof 'undefined' or 'null'. 오류가 발생한다. 함수가 호출될 때 destructuring assignment를 시도하지만 아무런 값도 전달되지 않았으므로 오류가 발생한 것이다.

const paginate = ({ page = 1, perPage = 15 } = {}) => {
  return {
    offset: (page - 1) * perPage,
    limit: perPage,
  };
};

paginate();
// { offset: 0, limit: 15 }

처음 보면 약간 헷갈릴 수 있는데 파라미터를 destructuring assignment 할 때 기본값으로 {} 빈 객체를 지정해서 호출할 때 인자를 주지 않아도 오류가 발생하지 않게 한 것이다.

destructuring assignment가 편해서 파라미터를 여럿 받을 때 점점 많이 사용하게 된다.