FrontEnd/JavaScript

[JS] javascript : 메서드 파라메터 기본값 설정과 기본값에 대한 이야기

모찌바라기 2022. 12. 18. 02:41
728x90
반응형

 

 

 

javascript에서 메서드의 파라메터(인자)의 기본값과 기본값 설정에 대해 정리해본다.

 

 

 

함수의 매개변수(인자)의 기본값은 undefined이다.

 

샘플코드

const paramsMethod = (a) => {
    console.log(a);
    console.log( 5 * a );
};

paramsMethod();

//👉️ undefined
//👉️ Nan

paramsMethod(3);

//👉️ 3
//👉️ 15

 

위의 코드와 같이 a라는 인자를 받는 paramsMethod 메서드를 선언하였다.

그리고 paramsMethod를 호출할 때, 인자를 넘기지 않고 console.log를 통해 a를 찍어보면 undefined이

뜨는 것을 확인 할 수 있다.

 

즉 javascript에서 메서드의 인자의 기본값은 undefined라는 의미이다.

 

그렇게 되면 예기치 못한(?) 오류가 발생할 수 있기 때문에 이를 방지하고자 인자의 기본값을 설정 할 수 있다.

다음 코드를 보도록 하자.

 

 

 

함수의 매개변수(인자)의 기본값을 설정하는 방법

 

샘플코드 

const paramsMethod = (a=1, b=4) => {
    console.log(a + b);
};

paramsMethod();
//👉️ 5

paramsMethod(3);
//👉️ 7

paramsMethod(6,3);
//👉️ 9

 

인자의 기본값을 설정하려면 메서드를 선언할때 인자의 값을 미리 초기화 하면 된다.

위와 같이 (a=1, b=4) 같이 말이다. 그렇게 되면 메서드를 호출 할 때, 인자를 넘기지 않아도 

기본값은 undefined이 아닌 기본값으로 설정이 된다.

 

 

 

인자의 기본값을 함수/변수로도 설정 할 수 있다.

 

신기한건 인자의 기본값을 단순한 값이 아닌, 함수 또는 변수로도 설정을 할 수 있다. 

다음 코드를 보자.

 

 

인자의 기본값을 메서드로 설정하는 샘플코드

const sumMethod = (a,b) => {
	return a + b;
}

const paramsMethod = (some = sumMethod) => {
    console.log(some(1,2));
}

paramsMethod();
//👉️ 3

 

 

인자의 기본값을 변수로 설정하는 샘플코드

const globalVal = 'this is global Value';

const paramsMethod = (val = globalVal) => {
    console.log(globalVal);
}

paramsMethod();
//👉️ 'this is global Value'

 

 

이렇게 파라메터의 기본값을 설정하는 것은 메서드를 선언하고 누군가가 실수로 인자를 넘기지 않았을 때

로직에 문제가 생기지 않도록 방지해주는 역할을 한다. 

혼자 개발한다면 상관이 없겠지만, 팀에서 일한다면 혹시 모르니 설정해놓는 것도 좋은 방법인 것 같다.

 

자세한 내용은 아래 MDN문서를 참조하도록 하자. 나는 내가 자주 쓸 것 같은 내용만 위에서 정리했다.

 

 

MDN 기본값 매개변수 참조

 

 

 

728x90
반응형