Default Parameters 문법 :: 마이구미

이 글은 자바스크립트 문법 중 Default Parameters 문법에 대해 다룬다.
이름이 생소할 지라도 대부분 사용하고 있는 문법이다.
디폴트 파라미터를 사용할 경우, 정확히 이해하고 있지 않으면 이슈를 맞이할 여지가 있다.
MDN - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters

 

디폴트 파라미터(Default Parameters) 문법은 흔히 사용하고 있다.

 

function multiply(a, b = 1) {
  return a * b;
}

 

값이 할당되어있지 않으면 기본값을 채워주기 위한 용도로 사용하고 있다.

그리고 함수 파라미터가 아닌 객체에서도 구조 분해 할당 문법과 함께 많이 사용된다.

 

const obj = { a: 1 };

...

const { a, b = 1 } = obj;

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

 

 

위 코드의 결과는 a 는 기존에 존재하는 a 을 그대로 사용하고 b 는 존재하지 않아 디폴트 파라미터로 인해 1 이 할당된다.

우리가 흔히 사용하고 있는 형태일 것이다.

 

최근에 위와 같은 형태에서 이슈를 맞이했다.

 

const obj = { a: 1, b: null };

...

const { a, b = 1 } = obj;

 

서버의 내려온 응답값 null 을 그대로 사용하면서 디폴트 파라미터로 기본값을 정의해주었다.

이전 예제처럼 b 의 값이 1로 할당되어진다고 보는가?

본인은 그렇게 기대했지만 결과는 그렇지 않았다.

결과는 b 의 값은 null 이었다.

 

처음에 의심한 건 구조 분해 할당 문법이었다.

ES6 문법이기에 ES5 로 변환하여 확인해보았다. (https://es6console.com/)

(뭔가 코드 이슈가 나오면 변환해서 확인해보면 도움이 많이 된다. 자주 애용하는 방법이다.)

 

var obj = { a: 1, b: null };

var a = obj.a;
var _obj$b = obj.b;
var b = _obj$b === undefined ? 1 : _obj$b;

 

코드를 보면 원인을 찾을 수 있다.

디폴트 파라미터 문법이 b === undefined ? 1 : b 로 표현되는 것을 볼 수 있다.

b 의 값은 null 이고 null 은 undefined 와 같지 않기 때문에 이러한 결과를 낼 수 밖에 없었다.

 

MDN 공식 문서에서도 바로 첫 문장에 설명하고 있다.

 

기본값 함수 매개변수 (default function parameter)를 사용하면 값이 없거나 undefined가 전달될 경우 이름붙은 매개변수를 기본값으로 초기화할 수 있습니다.

 

"값이 없거나 undefined" 를 주의 깊게 봐야한다.

0, false, null, '', false 과 같은 값을 의미하는 것이 아니다.

 

null === undefined // false
0 === undefined // false
NaN === undefined // false
'' === undefined // false
false === undefined // false

 

디폴트 파라미터를 사용할 경우에는 이 부분을 이해해야한다.

공식 문서에서도 falsy 값에 대해서도 조금 더 설명하고 있다.

(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters#passing_undefined_vs._other_falsy_values)