만약에 파라미터 3개를 가지는 함수가 존재한다고 가정해보자.
function pay_check(member_num, mediaName, mediaCode) {
// 사용자별로 결제 매체정보를 확인
}그런데, html 코드 내에서는 파라미터 2개를 가지는 함수를 호출한다.
<html>
<head>
</head>
<body>
<checkbox onclick="pay_check(1, 'KBS')" />
</body>
</html>과연 결과는 어떻게 될까?
일반적으로 많이 사용하는 Java 언어에서는 함수를 정의할 때, 파라미터의 갯수에 따라 함수가 다르게 호출된다.
그러나 JavaScript에서는 예외이다.
자바스크립트에서는 함수를 정의할 때는 매개변수의 타입을 따로 명시하지 않는다.
함수를 호출할 때에도 인수(argument)로 전달된 값에 대해 어떠한 타입 검사도 하지 않는다.
함수를 호출할 때 함수의 정의보다 적은 수의 인수가 전달되더라도, 다른 언어와는 달리 오류를 발생않는다. (핵심!!)
이 같은 경우 자바스크립트는 전달되지 않은 나머지 매개변수에 자동으로 undefined 값을 설정한다.
function addNum(x, y, z) { // x, y, z라는 3개의 매개변수를 가지는 함수 addNum()을 정의함.
return x + y + z;
}
addNum(1, 2, 3); // 인수로 1, 2, 3을 전달하여 함수를 호출함. -> 6
addNum(1, 2); // 인수로 1, 2을 전달하여 함수를 호출함. -> NaN
addNum(1); // 인수로 1을 전달하여 함수를 호출함. -> NaN
addNum(); // 인수로 아무것도 전달하지 않고 함수를 호출함. -> NaN
+에피소드)
결제 관련 서비스 함수 내에 코드를 수정하면서, 파라미터 갯수가 다른 과거 함수가 일시적으로 저장되었던 적이 있었다.
최근에 Java언어를 주로 사용하다보니, 너무나도 당연하게 파라미터가 갯수가 맞지 않으면 함수가 실행되지 않을 것이라고 생각했다.
JavaScript에서는 매개변수 타입을 지정하지 않다보니, 자연스럽게 undefined로 값이 대체되면서 함수가 실행되어 버린것..
일시적으로 과거 함수가 적용된 시점에 결제를 시도한 고객사에서는 기존과 다른 금액이 책정되어 결제된 경우가 있었다.
다시 생각하니.. 아찔한 기억..
앞으로는 JavaScript 함수를 생성 및 활용할 때 '유효성 체크' 처리를 진행해야겠다.
function addNum(x, y, z) {
if(x === undefined) // 함수 호출시 x에 해당하는 인수가 전달되지 않은 경우
x = 0; // 변수 x의 값을 undefined에서 0으로 변경함.
if(y === undefined) // 함수 호출시 y에 해당하는 인수가 전달되지 않은 경우
y = 0; // 변수 y의 값을 undefined에서 0으로 변경함.
if(z === undefined) // 함수 호출시 z에 해당하는 인수가 전달되지 않은 경우
z = 0; // 변수 z의 값을 undefined에서 0으로 변경함.
return x + y + z;
}
addNum(1, 2, 3); // 6
addNum(1, 2); // 3
addNum(1); // 1
addNum(); // 0
* 참고 출처
'프론트엔드' 카테고리의 다른 글
| [DI] 의존성 주입이란? (0) | 2021.07.16 |
|---|---|
| 포워딩과 리다이렉트 차이점 정리 (0) | 2021.07.08 |
| 크롬 80 버전 - SameSite CORS 이슈 PHP (0) | 2021.05.08 |
| 메일 수신확인은 어떻게 이루어질까? (0) | 2021.04.26 |
| ArrayList.remove() 사용시 주의점 (0) | 2020.07.07 |
댓글