[JavaScript] function 파라미터 탐구하기 (default 파라미터, ...Rest 파라미터)

#0. 파라미터 (= 매개변수, parameter)

- 함수 작성시 사용할 수 있는 특별한 형태의 변수다. 

- 아래 함수에서 1번째줄 a,b가 파라미터이며,

- 함수호출시, 함수명(값1, 값2) 형태로 함수를 호출하고, 이때 a = 값1. b=값2 와 같은 형태로 함수가 돌아간다.

function 더하기(a, b) { // 여기 있는 a, b가 파라미터임
	console.log(a+b);       
}
더하기(1, 2)  // a=1, b=2 로 대입하여, 더하기 함수를 실행하겠다.

 

#1. default 파라미터

- 파라미터는 기본값도 정할 수 있다.

- 그냥 파라미터 자리에 함수명(a=10) 과같은 형태로 사용되면, 호출시 argument가 비었을때 default값이 대입되어 함수가 실행된다. 

- 아래 함수에서는 더하기(1) 형태로 함수를 호출했으므로, a=1, b는 default 로 정해둔 10이 대입되어 출력된다. 

1. default 파라미터로 값넣기

function 더하기(a, b = 10) {
   	// b = 10 : b자리에 아무것도 안넣으면 10으로 출력해주셈
	console.log(a + b);
}
더하기(1); // 출력결과 >> 11
// a = 1, b = 10 됨.

 

- 위와 같이 default 파라미터는 값을 넣을수도 있고, 연산도 넣을수도 있고, 함수도 넣을 수 있다. 

2. default 파라미터로 연산 넣기

function 더하기2(a, b = 2 * a) {
	console.log(a + b);
}
더하기2(1); // 출력결과 >> 3
// a = 1, b = 2 * 1 됨.

 

3. default 파라미터로 함수 넣기

- 아래 예제에서, 함수 호출시 b값을 지정하지 않았다면 b는 임시함수()에서 return된 값인 8이 대입된다. 

function 임시함수() {
	return 8;
}
function 더하기3(a, b = 임시함수()) {
	console.log(a + b);
}
더하기3(1); // 출력결과 >> 9
// a = 1, b = 8 (리턴된값)

 

 

#2. ... Rest 파라미터

- argument들을 array형태로 가지고 오고 싶을때 사용

- 파라미터 자리에 ...파라미터 형태로 사용하면된다.

1. 사용법1 -  argument 전체 가져오기

function RestParamFunc(...파라미터들) {
	console.log(파라미터들);
}
RestParamFunc(10, 20, 30, 40);  // 출력결과 >> [10, 20, 30, 40]

 

2. 앞에 몇몇 argument 제외하고 배열화

-  앞에 있는 몇몇 arguments를 제외하고, array로 만들수도 있다.

function RestParamFunc2(a, b, ...파라미터들) {
	console.log(파라미터들);
}
RestParamFunc2(10, 20, 30, 40);   // 출력결과 >> [30, 40]

 

3. 모든 argument들을 하나씩 콘솔창에 출력해주는 함수

- 반목문을 함께 활용하면 파라미터에 대입된 모든 argument를 하나씩 출력할 수도 있다. 

function RestParamFunc3(...파라미터들) {
for (var i = 0; i < 파라미터들.length; i++) {
	console.log(파라미터들[i]);
	}
}
RestParamFunc3(10, 20, 30, 40); // 출력결과 >> 10 20 30 40

 

4. 주의사항

1) 가장 뒤에 써야함 (...파라미터들, a) -> 이런식으로 쓰면 안돼

function RestParamFunc4(...파라미터들, a, b) {
	console.log(파라미터들);
}
RestParamFunc4(10, 20, 30, 40);   // 출력결과 >> Uncaught SyntaxError: Rest parameter must be last formal parameter

 

2) 한번만 사용가능 (...파라미터들, ...파라미터들) -> 안돼

function RestParamFunc5(...파라미터들, ...파라미터들) {
	console.log(파라미터들);
}
RestParamFunc5(10, 20, 30, 40);   // 출력결과 >> Uncaught SyntaxError: Rest parameter must be last formal parameter