5. 매개변수의 기본값을 설정해준다, default parameter

안녕하세요, 프로독학러 입니다.

이번 포스팅에서는 함수를 정의하는 단계에서 파라메터(*파라메터=매개변수)의 기본값을 설정하는 것에 대해서 알아보겠습니다.

먼저 표현식을 보겠습니다.

function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) {
   statements
}

함수의 이름을 정하는 name뒤에 오는 괄호안에 매개변수를 지정합니다. 이 때, 기본 값을 할당할 수 있습니다.

예제를 통해 이해해 봅시다.

function add (a=0, b=10){
    return a+b;
}

위의 예제에서 add라는 함수를 정의할 때 파라메터를 적는 부분에 a=0, b=10이라고 정의 했습니다.

값으로 들어오는 a와 b에 대해서 기본값을 설정한 것입니다.

add함수의 default parameter가 설정된 상황에서 아래의 코드를 실행하면 각각 어떤 결과가 나올까요?

add(10);
add(10, 15);

첫 번째 함수를 실행할 때는 인자가 한 개만 들어왔습니다.

그리고 두 번째 함수를 실행할 때는 인자가 두 개 들어왔습니다.

결과는 다음과 같습니다.

add(10); //20
add(10, 15); //25

첫 번째의 결과는 20을 리턴하고 두 번째의 결과는 25를 리턴합니다.

첫 번째 함수의 실행에서는 인자가 하나(10) 들어옵니다. 이는 함수를 정의 단계에서의 파라메터 a를 의미합니다.

a의 기본값은 0 이었지만 10이 들어왔기 때문에 들어온 값을 a로 인식합니다. 그러나 b는 함수의 호출로부터 전달되지 않았기 때문에(인자가 하나만 들어옴) 기본값인 10을 그대로 사용합니다.

즉, a=10(인자로 들어온 값), b=10(기본값) 이므로 a+b의 결과로 20이 리턴됩니다.

반면 두 번째 함수의 실행 결과는 첫 번째의 예제와 달리 두 개의 인자가 함수의 호출에 사용됩니다.

이때는 a와 b모두 기본값이 아닌 인자로 들어온 값이 할당됩니다.

따라서 a+b의 값인 25가 리턴됩니다.

default parameter가 없을 때 기본값을 설정하는 것은 다음과 같았습니다.

function multiply(a, b) {
  if(typeof b !== 'undefined'){
    var b = b;
    }else{
    var b = 1;
    }
  return a*b;
}
 
multiply(5); // 5

함수의 몸톤 내에서 매개변수 b가 있는지 없는지 검사하여 있다면 b에 인자로 들어온 b를 할당하고, 없다면 1을 할당하는 예제입니다.

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

위는 같은 예제를 default parameter를 사용했을 때의 예제입니다.

default parameter 가 있을 때와 없을때의 코드의 길이와 가독성이 훨씬 좋아진 것을 알 수 있습니다.

여기까지 default parameter에 대해서 알아봤습니다.

다음 포스팅에서는 ES6에서 객체를 쉽게 병합할 수 있도록 도움을 주는 object assign 에 대해서 알아보도록 하겠습니다.

감사합니다.

**참고 자료 (항상 감사드립니다)

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

*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)