Outsider's Dev Story

Stay Hungry. Stay Foolish. Don't Be Satisfied.
RetroTech 팟캐스트 44BITS 팟캐스트

JavaScript 함수 파라미터에서 destructuring assignment 이용하기

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가 편해서 파라미터를 여럿 받을 때 점점 많이 사용하게 된다.

2018/02/05 17:48 2018/02/05 17:48