나머지 매개변수(rest parameter)
매개변수가 2개일 때도 있고, 3개 또는 10개 100개일 때도 있다면 어떻게 구현해야할까?
호출할 때 매개변수의 개수가 고정적이지 않은 함수를
가변 매개변수 함수 라고 부른다.
자바스크립트에서는 이러한 함수를 구현할 때 나머지 매개변수 라는 형태의 문법을 사용한다.
기본 형태는 이러하다
function 함수이름(...매개변수) { }
함수의 매개변수 앞에 마침표 3개(...)를 입력하면 매개변수들이 배열로 들어온다!
-> 나머지 매개변수의 자료형은 무조건 배열이다.
나머지 매개변수와 일반 매개변수 조합
나머지 매개변수는 이름 그대로 나머지이다.
일반적인 매개변수와 함께 사용할 수 있다.
function 함수이름(매개변수,매개변수, ...나머지 매개변수) { }
나머지 매개변수는 앞쪽에다 쓰지 않는다.
코드를 실행 했을때, 에러가 발생함.
a,b에 뭐가 들어가야하는지 명확하게 알 수 없기 때문이다.
전개 연산자
매개변수로 배열을 입력할 수 없고 숫자를 입력해야 하는 함수가 있다고 하자.
기본적으로는 다음과 같이 배열 요소를 하나하나 전개해서 입력하는 방법밖에 생각할 수 없다.
함수(arr[0],arr[1],arr[2])
하지만 이런 상황에 대비하고자 자바스크립트는 배열을 전개해서 함수의 매개변수로 전달해주는 전개 연산자(spread operator)를 제공한다.
전개 연산자는 다음과 같이 배열 앞에 마침표 3개(...)를 붙이는 형태로 사용한다.
함수이름(...배열)
전개 연산자도 ... 을 만들어 사용한다.
다만 나머지 매개변수와 차이점은 나머지 매개변수는 함수를 만들때 사용하지만, 전개 연산자는 함수를 호출 할때 사용한다.
전개 연산자 활용!
다음 코드는 전개 연산자를 사용해서 매개변수를 전달하고,
전달받은 매개변수를 단순하게 나머지 매개변수로 출력하는 예제이다.
-
전개 연산자를 사용하지 않은 경우
[Array(4)] -> 4개의 요소가 있는 배열이 들어옴.
-
전개 연산자를 사용한 경우
[1,2,3,4] -> 숫자가 하나하나 들어옴.
이말은 즉, 매개변수에 ... 을붙이면(나머지 매개변수) 배열로 들어가고,
호출할때 ...을 붙이면(전개 연산자) 배열이 아닌걸로 나열된다는 걸 의미한다.
잘 기억해두자!
첫번째 코드에서 arr = ['a','b','c'] 로 배열이다
arr이 A함수에 A(arr) 들어가서 호출되면 우선 A(...arg)인 나머지매개변수로
들어가게 되면 [['a','b','c']]가 되어서 console.log(arr)출력에서
[Array(3)]이 나오게 되는것이다.
그아래 B함수를 보자!
함수안에 나머지매개변수(B(...arg))와 전개연산자(console.log(...arg))가 쓰여있다.
A함수와 마찬가지로 B(arr)로 호출하게되면 우선
나머지 매개변수를 거쳐 [['a','b','c']] 가 될것이고,
console.log(...arg)인 전개 연산자를 통해 요소가 전개 된다.
그래서 호출을 하게되면
B(arr) => ['a','b','c']
B(...arr) => a b c 가 나오게 되는것이다.
여러번 반복해보며 이해해보자.
나머지 매개변수 와 전개 연산자 예제로 비교해보기
호출할때 다르게 써서 코드를 실행 시킨다는걸 비교해 볼 수있다.
위에서 첫번째 코드를 입력했을때, 함수를 호출한다면 안에 배열을입력을 해야하고, 두번째 코드에선 호출할때 배열이 아닌 녀석으로 호출을 해야한다.
만약 두번째 코드에서 호출을 해야하는 녀석이 배열이라면
전개 연산자를 써야한다.
간단 비교해보기!
직접 여러번 써서 해보자.
내용정리
1. 나머지 매개변수는 함수를 만들때
-> const 함수 = function (...매개변수){}
나머지 매개변수의 자료형은 배열!
2. 전개 연산자는 함수를 호출할때
-> 함수(...배열)
