함수의 매개변수

JavaScript는 다른 프로그래밍 언어랑 비교했을 때 꽤 관대한 언어입니다.

 

이런 부분은 함수의 매개변수에도 적용되는 부분입니다.

 

 

 

기본값 매개변수 - JavaScript | MDN

 

 

 

 

아래 코드로 예시를 들어보겠습니다.

const getSum = (a, b) => a + b;

const sumValue = getSum(1, 5);

console.log(sumValue); // 6 출력

함수의 선언에서 2개의 매개변수를 사용했다면, 해당 함수를 호출할 때 2개의 인자를 받아 호출하는 것이 일반적입니다.

 

하지만 JavaScript에서는 매개변수의 개수보다 부족한 인자를 받아 함수를 호출해도 오류가 발생하지 않습니다.

JavaScript에서 함수의 매개변수는 undefined가 기본값입니다.

 

때문에 매개변수의 개수보다 부족한 인자를 받아 함수를 호출하는 것은 결국 잘못된 방식으로 함수를 호출하는 것이니

 

JavaScript에서는 누락된 매개변수의 값을 기본값인 undefined를 사용합니다.

 

하지만 위의 이미지의 경우 2개의 인자를 받아 계산하는 함수이기 때문에 undefined를 기본값으로 받아버리면 

 

NaN값을 반환하게 됩니다.

 

 

 

 

위의 경우처럼 경우에 따라 기본값이 undefined가 아닌 다른 값을 기본값으로 취해야 할 때가 있을 수 있습니다.

const getSum = (a, b = 0) => a + b; // b의 기본값을 0으로 설정

const sumValue = getSum(1);

console.log(sumValue); // 1출력

( a, b = 0 )처럼 기본값을 설정하고 싶은 매개변수에  ' = 설정하고 싶은 매개변수 '를 붙여주면 기본값을 설정하실 수 있습니다.

 

위의 코드의 경우 매개변수 b에 0이라는 기본값을 설정했기 때문에 함수 호출에 매개변수보다 부족한 인자 값을 입력했을 경우

 

매개변수 b는 기본값 0을 받아 함수 본문이 실행되게 됩니다.

 

 

 

 

위의 경우는 매개변수보다 부족한 인자를 받아 함수를 호출한 경우 기본값을 받는 것이었지만,

 

아래처럼 매개변수의 개수만큼 인자를 받았지만 기본값을 받는 경우도 있습니다. 

const getSum = (a, b = 3) => a + b;

const sumValue1 = getSum(1, undefined);
const sumValue2 = getSum(1, null);
const sumValue3 = getSum(1, "");

console.log(
  `result - sumValue1 : ${sumValue1} // sumValue2 : ${sumValue2} // sumValue3 : ${sumValue3} \n
  type - sumValue1 : ${typeof sumValue1} // sumValue2 : ${typeof sumValue2} // sumValue3 : ${typeof sumValue3}`
);

인자로 undefined를 받아 함수 호출 시 기본값으로 설정된 3을 받아 결과가 4가 나오고 타입은 number가 나옵니다.

 

하지만 같은 falsy값인 null과 ' '(빈 문자열)을 인자로 받은 경우는 기본값을 받지 못하고 결과는 1이 나옵니다.

 

null의 경우 falsy값이지만 숫자와 연산할 경우 강제형변환이 일어나 0으로 변환되기 때문에 기본값을 받지 않고, 타입은 number가 나옵니다.

 

빈 문자열의 경우 falsy값이지만 숫자와 연산할 경우 숫자가 강제형 변환이 일어나 '1'로 변환되고 결과는 '1' 나오며, 타입은 string이 나옵니다.

 

 

 

마지막으로 기본값을 할당할 때 앞쪽 매개변수를 사용할 수 있는 점을 정리하겠습니다.

 

const getSum = (a, b = a === 1 ? 2 : 3) => a + b;

const sumValue1 = getSum(1);
const sumValue2 = getSum(3);

console.log(`sumValue1 : ${sumValue1} // sumValue2 : ${sumValue2}`);

' b   =   a   ===   1   ?   2   :   3 '으로 앞쪽 매개변수 a을 이용하여 a의 값이 1일 경우 기본값으로 2를 설정하고,

 

1이 아닌 경우 3을 설정했습니다.

 

참조하려는 매개변수가 기본값을 설정하는 매개변수 앞에만 있으면 참조가 가능합니다.

 

 

 

 

 

주의하셔야 할 점은 기본값을 설정하는 매개변수는 제일 마지막에 와야 한다는 점입니다.

const getSum = (a = 3, b) => a + b;

const sumValue1 = getSum(1);

console.log(sumValue1); //  NaN 출력

함수 호출 시 사용되는 인자는 함수의 매개변수 왼쪽부터 할당이 됩니다.

 

이는 기본값이 설정돼있어도 여전히 적용됩니다.

 

기본값이 없는 다른 매개변수를 찾는 것이 아닌 해당 자리에 있는 매개변수에 값을 적용합니다.

 

때문에 첫 번째 매개변수 a에는 인자 1이 할당되고, 두 번째 매개변수 b에는 기본값인 undefined가 할당되게 되어 결과는 NaN이 됩니다.