매개변수(parameter)란?
함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수
인수(argrument)란?
함수가 호출될 때 함수로 값을 전달해주는 값
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
addNum() 함수를 호출할 때 인수가 세 개보다 적게 전달되면, 계산할 수 없다는 의미인 NaN을 반환한다.
그 이유는 전달되지 않은 나머지 값이 자동으로 undefined 값으로 설정되어, 산술 연산을 수행할 수 없기 때문이다.
NaN을 반환하지 않고 전달된 인수만을 가지고 정상적으로 계산하는 함수를 작성할 수 있을까?
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
이렇게 작성하면, 인수가 세 개보다 적어도 계산이 가능하다.
그렇다면 만약, 함수의 정의보다 더 많은 수의 인수가 전달되면 매개변수에 대입되지 못한 인수들은 참조할 방법이 없는데 어떻게 해야할까?
arguments 객체
arguments 객체를 이용하면, 함수로 전달된 인수의 총 개수를 확인하거나, 각각의 인수에도 바로 접근할 수 있다.
arguments 객체는 함수가 호출될 때 전달된 인수를 배열의 형태로 저장하고 있다.
첫 번째 인수는 arguments[0]에 저장되며, 다음 인수는 arguments[1]에 저장된다.
또한, 인수의 총 개수는 arguments 객체의 length 프로퍼티에 저장된다.
function addNum() {
var sum = 0; // 합을 저장할 변수 sum을 선언함.
for(var i = 0; i < arguments.length; i++) { // 전달받은 인수의 총 수만큼 반복함.
sum += arguments[i]; // 전달받은 각각의 인수를 sum에 더함.
}
return sum;
}
addNum(1, 2, 3); // 6
addNum(1, 2); // 3
addNum(1); // 1
addNum(); // 0
addNum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // 55
addNum() 함수는 전달받는 인수의 개수에 상관없이 언제나 정상적인 계산을 수행한다.
ECMAScript 6부터 디폴트 매개변수, 나머지 매개변수로도 정의된다.
디폴트 매개변수(default parameter)
디폴트 매개변수란 함수를 호출할 때 명시된 인수를 전달하지 않았을 경우에 사용하게 될 기본값을 의미한다.
자바스크립트에서 매개변수의 기본값은 undefined 값으로 설정되어 있다.
// 기존 매개변수
function mul(a, b) {
// 인수가 한 개만 전달되었을 때 나머지 매개변수의 값을 undefined 값이 아닌 1로 설정함.
b = (typeof b !== 'undefined') ? b : 1;
return a * b;
}
mul(3, 4); // 12
mul(3); // 3
하지만 디폴트 매개변수를 이용하면 이러한 매개변수의 기본값을 바꿀 수 있다.
// 디폴트 매개변수
function mul(a, b = 1) { // 인수가 한 개만 전달되면 나머지 매개변수의 값을 언제나 1로 설정해 줌.
return a * b;
}
mul(3, 4); // 12
mul(3); // 3
나머지 매개변수(rest parameter)
나머지 매개변수는 생략 접두사(...)를 사용하여 특정 위치의 인수부터 마지막 인수까지를 한 번에 지정할 수 있다.
ex) 첫 번째 인수에서 두 번째 인수부터 마지막 인수까지를 뺀 후 그 결과를 반환하는 예제
// 기존 매개변수
function sub() {
var firstNum = arguments[0]; // 첫 번째 인수에서
for(var i = 0; i < arguments.length-1; i++) { // 두 번째부터 마지막 인수까지를
firstNum -= arguments[i+1]; // 뺌.
}
return firstNum;
}
sub(10, 2, 3); // 10 - 2 - 3 = 5
sub(10, 1, 5, 8); // 10 - 1 - 5 - 8 = -4
하지만 나머지 매개변수를 이용하면 sub() 함수를 좀 더 직관적으로 정의할 수 있다.
// 나머지 매개변수
// 첫 번째 인수를 변수 firstNum에 저장하고 나머지 인수들은 배열 restArgs에 저장함.
function sub(firstNum, ...restArgs) {
for(var i = 0; i < restArgs.length; i++) {
firstNum -= restArgs[i];
}
return firstNum;
}
sub(10, 2, 3); // 10 - 2 - 3 = 5
sub(10, 1, 5, 8); // 10 - 1 - 5 - 8 = -4
출처
http://www.tcpschool.com/javascript/js_function_parameterArgument
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
'기술 개발 > Javascript' 카테고리의 다른 글
require vs import (0) | 2023.04.03 |
---|---|
this 가 동작하는 원리와 용법 (0) | 2023.03.31 |
정규표현식(Regex) (0) | 2023.02.08 |
얕은 복사 vs 깊은 복사 (1) | 2023.01.12 |
호이스팅(Hoisting) (feat. var, let, const) (0) | 2023.01.05 |