[JavaScript] 기본 매개변수 (Default Parameters) 정확하게 사용하기!

Default Parameters

Default Parameter를 사용하면 주어진 값이 없거나 undefined가 전달될 경우, 매개변수를 기본값으로 초기화할 수 있다.

/*
 * Sample Code 1
 */
function defaultParams(arg) {
    console.log(arg);
};

defaultParams(); 	// undefined

위의 샘플 코드를 보면 JavaScript에서 함수의 매개변수가 기본적으로 undefined임을 알 수 있다.

 

또한, 위 코드를 통해 JavaScript에서는 함수의 인자에 필수값 여부를 설정하는 구분값이 없기 때문에 함수를 선언할 때 parameter를 선언했다고 할 지라도 실제 함수를 호출하는 구간에서 해당 parameter에 값을 넣지 않는다고 해도 오류가 발생하지는 않는다.

---

하지만 함수 내부에서 parameter를 변형 등 활용하는 경우, 예상치 못한 에러가 발생할 가능성이 있다.

/*
 * Sample Code 2
 */
function defaultParameter(paramObj) {
    const val = paramObj.key;
    console.log(val);
}

defaultParameter();		// Uncaught TypeError: Cannot read property 'key' of undefined
defaultParameter(undefined);	// Uncaught TypeError: Cannot read property 'key' of undefined

위의 샘플 코드를 보면 JavaScript에서 생기는 자유도(?)로 인해 발생하는 내부적인 TypeError가 발생 가능함을 알 수 있다.

 

함수 내부적으로 Validation 체크 로직이 없을 경우,

parameter에 대한 필수값 여부를 설정하는 것이 없고, 기본값을 할당하고 있지 않기 때문에 위의 에러가 발생하는 것이다.

---

위의 TypeError를 미연에 방지할 수 있는 방법은 무엇일까?

val 변수에 값을 할당하기 전에 paramObj가 전달되었는지 확인하는 방법이 있을 것이고,

아래의 예시와 같이 함수의 parameter가 전달되지 않거나 undefined로 전달된 경우를 위해 기본값을 할당하는 방법이 있다.

/*
 * Sample Code 3
 */
function defaultParameter(paramObj = {}) {
    const val = paramObj.key;
    console.log(val);
}

defaultParameter();		// undefined
defaultParameter(undefined);	// undefined
defaultParameter({ key: 'val' });	// 'val'

paramObj에 빈 값을 넣거나 undefined를 넣을 경우 paramObj는 {}의 빈 Object가 할당되어 이후의 로직이 처리되고,

그 외의 값에 대해서는 default value가 아닌 전달된 값이 paramObj에 할당된다.

Falsy Values in JavaScript

결론으로 넘어가기 전에 한가지 개념을 같이 짚고 넘어가는 것이 좋을 것 같다.

JavaScript에는 참/거짓을 판단하는 Boolean Script에서 입력된 값을 거짓(False)으로 판단하는 Falsy Value로 아래의 6가지가 있다.

• false
• 0
• ""(Empty String)
• null
• undefined
• NaN

if문이나 &&문과 같이 Boolean 문맥이 있는 경우 위의 6가지 값들은 동일하게 false로 인식하게 되는 공통점이 있다.

 

하지만, 함수의 Default Parameter 만큼은 Falsy한 값이 전달된다고 Default Parameter를 할당하는 것이 아님에 주의해야 한다.

Default Parameter는 JavaScript 함수에서 매개변수를 전달받을 때의 동작과 관련된 부분이기 때문에 빈 값과 undefined인 경우에만 적용되는 것이지 그 외의 Falsy한 값들에 대해서는 전혀 무관한 영역 임을 알고 있어야 한다.

---

Default Parameter는 JavaScript뿐 아니라 TypeScript에서도 동일한 방식으로 설정 및 동작이 가능하다.

하지만 사용에 있어서 주의해야되는 부분이라고 생각된다.

 

우선, Default Parameter를 사용하는 순서이다.

위의 샘플 코드와 Falsy Value 설명에서도 언급한 것과 같이 Default Parameter가 할당되는 경우는 빈 값 또는 undefined인 경우로 한정된다.

function defaultParam(a = 'Apple', b, c) {
	console.log(`${a}, ${b}, ${c}`)
}

defaultParam('Alpha', 'Bravo', 'Charlie');		// 'Alpha, Bravo, Charlie'
defualtParam(undefined, 'Bravo', 'Charlie'); 		// 'Apple, Bravo, Charlie'

 

적당한 예시가 생각이 나지 않아서 마음에 쏙 드는 예시는 아니지만, 

위와 같이 3개의 parameter를 받는 함수가 있다고 할 때, 첫 번째 parameter에 Default Parameter를 설정해주었다.

 

함수가 내부적으로 갖고 있는 기본값을 사용하고 싶다면, 함수를 호출할 때 2번째 호출과 같이 첫 인자로 undefined를 사용해야 한다.

물론, 이런 코드 작성 방법에 대해서 문제 제기를 하지 않는다면 큰 주의사항은 아니지만 여러 방면에서 제약사항이 많은 함수 구성일 수 있다.

 

오히려, Default Parameter는 맨 마지막의 c에 설정하고, 실제로 함수에서 사용할 때 c parameter의 호출 부분을 변경하는 것이 가독성이나 함수의 호출 방법 등에서 보다 효과적이고 편리한 수단이 될 수 있다.

 

또 다른 주의할 점은 JavaScript의 경우 parameter에 대한 type check가 되지 않기 때문에 Default Parameter가 있다고 하더라도 전혀 다른 type의 객체가 전달된다면 내부적인 코드 상의 에러가 발생할 수 밖에 없다.

즉, Default Parameter가 validation의 역할까지는 불가능하다는 것이다.