Logo

[ES2015] 기본 매개변수 (Default Parameters)

ES2015는 자바스크립트의 근간이 되는 함수에도 여러 가지 변화를 가져왔습니다. 이번 포스팅에서는 그 중 기본 매개변수(Default Parameters)에 대해서 알아보도록 하겠습니다.

매개변수를 무시한 함수 호출

다음과 같이 사용자의 아이디의 배열을 매개변수를 받아서 사용자의 상세 정보를 돌려주는 함수가 있다고 가정해봅시다.

function findUsers(ids) {
  console.log("finding", ids.length, "users");
  // 사용자를 DB 또는 API를 통해 찾아옴
}

아래와 같이 정상적인 배열을 넘기면 함수는 예상하는 것처럼 잘 돌아갑니다.

findUsers([101, 102, 103]);
findUsers([]);
finding 3 users
finding 0 users

하지만 다음과 같이 인자 없이도 위 함수를 호출하면 어떻게 될까요?

findUser();

문법이 엄격한 다른 언어라면 분명히 함수 호출이 불가능했을텐데요. 자바스크립트에서는 매개변수보다 부족한 인자를 넘겨도 함수 호출이 가능합니다.

이때 인자가 넘어오지 않은 매개변수는 모두 undefined를 할당받습니다. 그리고 undefined는 배열이 아니기 때문에 length 속성을 가지고 있지 않고, 그래서 다음과 같은 오류가 발생합니다.

TypeError: Cannot read property 'length' of undefined

이와 같이 너무나도 너그러운 자바스크립트의 함수 호출 때문에… 우리는 함수가 호출될 때 매개변수가 제대로 들어올거라고 보장할 수가 없습니다.

인자체크 및 방어로직

위 문제를 해결하는 가장 오래된 관행은 함수 내부에서 비즈니스 로직 도달 전에 인자의 존재여부를 체크하는 것이 었습니다. 인자가 존재할 경우 그 값을 그대로 비즈니스 로직에서 사용하고, 존재하지 않는 경우에는 매개변수에 디폴트값을 할당하는 방어로직을 삽입하는 것입니다.

function findUsers(ids) {
  if (ids === undefined) {
    ids = [];
  }
  console.log("finding", ids.length, "users");
  // 사용자를 DB 또는 API를 통해 찾아옴
}

이 방법이 나름 먹히긴 했지만 함수의 매개변수가 늘어날 수록 아쉬운 점들이 생겼습니다. 함수 내부에서 핵심 비즈니스 로직보다 부수적인 인자 검증 로직이 차지하는 공간이 늘어나면서 코드 가독성이 떨어지고 유지보수가 어려워졌습니다.

ES2015에서는? 기본 매개변수!

기본 매개변수(Default Parameters)라고 불리는 ES2015의 새로운 기능을 이용하여 위 코드를 개선해보겠습니다.

function findUsers(ids = []) {
  console.log("finding", ids.length, "users");
  // 사용자를 DB 또는 API를 통해 찾아옴
}

너무 달라진 부분이 미미해서 차이점을 발견하지 못하시는 분들도 있으실 것 같네요. ㅋ 바로 함수의 매개변수 뒤에 = []이 추가되었는데요. ids의 기본값으로 빈 배열을 할당해준 것이라고 보시면 됩니다.

이렇게 기본값이 할당되어 있는 함수 매개변수를 기본 매개변수라고 부릅니다. 이 기본값은 해당 매개변수의 인자가 없이 호출되었을 시 뿐만 아니라 명시적으로 undefined가 넘어왔을 때도 사용되어 집니다.

findUsers();
findUsers(undefined);
finding 0 users
finding 0 users

기본 매개변수를 이용하면 기존에 함수 바디의 최상단에 위치하던 인자체크 및 방어로직을 함수 시그니쳐로 가져올 수가 있습니다.

이를 통해 함수 내부에는 비지니스 로직만 남게 되어 좀 더 깔끔한 함수 구현을 얻을 수 있게 되었습니다. :)

다음 포스팅에서는 명명된 매개변수(Named Parameters)에 대해서 알아보도록 하겠습니다.

참고

https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Default_parameters