[JavaScript] 자바스크립트 함수 - ③매개변수, 디폴트 매개변수, 나머지 매개변수, arguments 객체 (default parameter, rest parameter, arguments)

JavaScript

오늘은 자바스크립트 함수의 매개변수에 대해서 알아볼 것입니다.

 

 

매개변수(parameter)

매개변수(parameter)란 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수를 의미한다.

인수(argument)란 함수가 호출될 때 함수로 값을 전달해주는 값을 말한다.

 

자바스크립트에서는 함수를 정의할 때 매개변수의 타입을 따로 명시하지 않는다.

함수를 호출할 때에도 인수(argument)로 전달된 값에 대해 어떠한 타입 검사도 하지 않는다.

 

함수를 호출 할 때 함수의 정의보다 적은 수의 인수가 전달되더라도, 다른 언어와는 달리 오류를 발생시키지 않는다.

이 경우 자바스크립트에서는 전달되지 않은 나머지 매개변수에 자동으로 undefined 값이 설정된다.

 

 

다음의 예제를 보며 개념을 이해해보자.

 

예제 1) 정의보다 적은 수의 인수 전달

fucntion add(x, y, z){
	return x + y + z;
}

document.write(add(1, 2, 3) + "<BR>");       //6
document.write(add(1, 2) + "<BR>");         //NaN
document.write(add(1) + "<BR>");           //NaN
document.write(add() + "<BR>");             //NaN

위 예제에서 add() 함수를 호출할 때 인수가 세 개보다 적게 전달되면, 계산할 수 없다는 의미인 NaN을 반환한다.

그 이유는 전달되지 않은 나머지 값이 자동으로 undefined 값으로 설정되어, 산술 연산을 수행할 수 없기 때문이다.

 

NaN이란? - Not-A-Number, 즉 숫자가 아님을, 또는 될 수 없음을 뜻한다.

 

 

 

 

여기서부터는 NaN에 대한 내용이다. 

관심 없는 분들은 바로 예제 2)로 가면 될 것 같다.

 

---

NaN

 

그렇다면 다음 코드의 출력 결과는 어떨까?

document.write(add(1) +"<BR>");               
document.write(typeof(add(1)));                 
document.write(isNaN(add(1)) + "<BR>");

모두 함수의 정의보다 적은 수의 인수를 전달한 경우에 대해 출력하는 코드이다. 

isNaN(value)은 어떤 값이 NaN인지 판별해주는 함수다.

스크롤을 멈추고 결과에 대해 잠시 생각해보고 넘어가 보자.

 

.

.

.

.

.

.

 

 

NaN
number
true

위와 같이 출력된다.

 

 

자바스크립트의 다른 모든 값과는 달리, NaN은 같음 연산(==, ===)을 사용해 판별할 수 없다. 

그래서 NaN을 판별하는 함수가 필요한 것이다.

 

NaN 값은 산술 연산이 정의되지 않은 결과 또는 표현할 수 없는 결과를 도출하면 생성된다.

 

다음 코드와 출력 결과를 보면 이해가 될 것이다.

document.write(NaN == NaN);
document.write("<BR>")
document.write(NaN != NaN );
document.write("<BR>")
document.write(NaN === NaN );
document.write("<BR>")
document.write(NaN !== NaN );
document.write("<BR>")

false
true
false
true

 

아무튼 그래서 typeof(add(1)) 을 출력하면 number가 나오긴 하지만, 사실은 undefined 값으로 설정되어 있다는 것이다. 

 

NaN에 대해서는 다음 포스팅에서 더 자세히 알아볼 것이다.

 

---

 

하지만 다음 예제처럼 하면 NaN을 반환하지 않고 전달된 인수만을 가지고 정상적으로 계산하는 함수를 작성할 수 있다.

마치 다른 언어에서의 오버로딩같다.

 

예제 2) 인수의 개수가 정의와 달라도 정상적으로 작동하는 함수

function add(x, y, z) {
	if (x === undefined)
		x = 0;
	if (y === undefined)
		y = 0;
	if (z === undefined)
		z = 0;

	return x + y + z;
}

document.write(add(1, 2, 3) + "<BR>")       //6
document.write(add(1, 2) + "<BR>")          //3
document.write(add(1) + "<BR>")             //1
document.write(add() + "<BR>")              //0

 

---

Arguments 객체

만약 함수의 정의보다 더 많은 수의 인수가 전달되면, 매개변수에 대입되지 못한 인수들은 참조할 방법이 없게 된다.

하지만 arguments 객체를 이용하면, 함수로 전달된 인수의 총 개수를 확인하거나, 각각의 인수에도 바로 접근할 수 있다.

 

 

바로 예제를 보며 이해해보자.

예제 3) arguments 객체의 사용

function add() {
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

document.write(add(1, 2, 3) + "<BR>");          //6
document.write(add(1, 2) + "<BR>");             //3
document.write(add(1) + "<BR>");                //1
document.write(add() + "<BR>");                 //0
document.write(add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10) + "<BR>");    //55

arguments 객체는 함수가 호출될 때 전달된 인수를 배열의 형태로 저장하고 있다.

인수는 첫 번째부터 순서대로 arguments[0], arguments[1] ,,, 에 순차적으로 저장된다.

또한, arguments.length property에 인수의 총개수가 저장된다.

따라서 위 예제는 인수의 개수와 상관없이 언제든지 정상적으로 작동한다.

 

 

이때 유의사항은, arguments 객체는 배열과 비슷할 뿐, 실제로 Array 객체가 아니라는 것이다.

숫자로 된 인덱스와 length property만을 가질 뿐, 모든 것을 배열처럼 다룰 수는 없다.

 

 

 

---

디폴트 매개변수와 나머지 매개변수

ECMAScript 6부터 새롭게 정의된 매개변수는 다음과 같다.

 

1. 디폴트 매개변수(default parameter)

2. 나머지 매개변수(rest parameter)

 

---

디폴트 매개변수(Default parameter)

디폴트 매개변수란 함수를 호출할 때 명시된 인수를 전달하지 않았을 경우에 사용하게 될 기본값을 의미한다.

 

예제를 먼저 보자.

예제 4) 디폴트 매개변수 사용

function add(a, b=1) {
    document.write("arguments : ");
     for(var i=0; i< arguments.length; i++){
         document.write(arguments[i] + " ");
         
     }
     document.write("<BR>");
     return a+b;
 }

 document.write("add(1, 2, 3) : "+add(1, 2, 3) + "<BR><br>");          //3
 document.write("add(1, 2) : "+add(1, 2) + "<BR><BR>");          	   //3
 document.write("add(1) : "+add(1) + "<BR><BR>");             		   //2
 document.write("add() : "+add() + "<BR><BR>");              		   //NaN
 document.write("add(1, 2, 3, ~ ,10) : "+add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10) + "<BR>");    //3

자바스크립트에서 매개변수의 기본값은 undefined 값으로 설정되어 있다.

하지만 default parameter를 이용하면 이러한 매개변수의 기본값을 바꿀 수 있다.

 

---

나머지 매개변수(rest parameter)

나머지 매개변수는 생략 접두사(...)를 사용하여 특정 위치의 인수부터 마지막 인수까지를 한 번에 지정할 수 있다.

 

예제를 통해 알아보도록 하자.

예제 5) 나머지 매개변수 사용

function add(a, ...z) {
    for (var i = 0; i < z.length; i++) {
        a += z[i];
    }
    return a;
}

document.write(add(1, 2) + "<BR>");
document.write(add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10) + "<BR>");

/* 출력 결과
3
55
*/

Rest parameter를 사용할 경우 인수의 개수와는 상관없이 편하게 코드를 짤 수 있다.

단, 나머지 매개변수는 익스플로러, 사파리에서 지원하지 않는다.

 

 

 

 

---

 

 

이렇게 해서 자바스크립트의 함수 작성에 대한 전반적인 내용을 알아봤습니다.

다음 포스팅은 자바스크립트에서 사용자의 편의를 위해 미리 정의해둔 전역함수들에 대해 알아보겠습니다.

읽어주셔서 감사합니다.