명칭이 달라요!
함수에서 값을 받을 때 그 값을 "파라미터(매개변수)"라고 하고, 함수에 값을 넣어주는 경우에 그 값을 "인자값" 이라고 합니다. rest는 함수의 파라미터 역할로 값을 받아서 한번에 처리하는데 주로 사용한다면, spread 연산자는 함수의 인자값으로 값을 한번에 넣어줄 경우에 사용합니다. 이 두 문법의 쓰임이 정확히 반대입니다.
rest
rest는 spread 연산자와 마찬가지로 객체나 배열 그리고 함수에 주로 사용되며, 이 세가지 중 객체와 배열에 사용할 때는 "구조분해 할당"이라는 문법을 이용하는 것이 특징입니다. 구조분해 할당에 대한 글은 여기를 참고하세요.
또한, 영단어로써 "나머지"라는 뜻이 있는 rest가 함수에서는 주로 파라미터로 사용됩니다. 단어의 뜻 그대로 파라미터로써 입력받은 인자값들을 "한번에" 처리 할 수 있는 기능이 있어서 함수의 인자값이 몇개가 올지 모르는 상황에서 사용한다면 유용합니다.
1. rest - 객체와 배열
예시1. 객체에서 rest
let 아이유 ={
이름:"이지은",
직업:"가수",
나이:29,
}
let {이름, ...rest} = 아이유
console.log(이름); //"이지은"
console.log(rest); //Object {직업:"가수", 나이:29}
rest는 객체와 배열에서 사용하면 구조분해 할당 문법과 함께 사용합니다. 간략하게만 설명하자면 구조분해 할당은 객체 안에 특정한 값을 추출할 때 사용하는 문법입니다. 위 예제에서는 아이유라는 객체에서 이름을 제외한 나머지는 모두 rest에 담겨 출력됐습닌다.
예시2. 배열에서 rest
let num = [0, 1, 2, 3, 4, 5];
let [zero, ...rest] = num;
console.log(zero); //0
console.log(rest); //[1,2,3,4,5]
배열도 마찬가지 입니다. 0을 zero라는 변수에 담고 남은 숫자들은 모두 rest에 담겼습니다.
2. rest - 함수 파라미터
예시3. 함수 파라미터
let function = example(...rest){
console.log(rest);
}
example(1,2,3,4,5,6,7,8,9,10);
example() 함수에 인자값으로 1부터 10까지, 10자리의 숫자들을 대입했습니다. example() 함수는 이 10자리의 많은 인자값들을 rest 파라미터 단 1개만을 활용해 "한번에" 받아냈습니다.
또한, 위 코드의 출력된 값을 확인해보면 1부터 10까지의 대입한 값들이 모두 "배열[]" 형태로 출력된 것을 확인할 수 있습니다. rest를 파라미터로 활용해서 인자값을 받게되면 모두 배열형태의 자료형으로 저장되는 특징이 있습니다.
예시4. 나머지
let function example(a, b, ...rest){
console.log(a,b); //1,2
console.log(rest); //[3,4,5,6,7,8,9,10]
}
example(1,2,3,4,5,6,7,8,9,10);
이번에는 example() 함수에 a와 b 그리고 ...rest 세가지 파라미터를 활용해 인자값을 받았습니다. 이 함수의 결과 값을 확인해보면 인자값 1, 2는 a와 b에 대입됐으며, 1과 2를 제외한 나머지 값들은 모두 "배열[]" 형태로 출력됐습니다.
이처럼 rest는 파라미터의 마지막에 남은 모든 값을 담을 수 있는 기능이 있습니다.
3. rest - 주의사항
예시5. 에러 I - 마지막 순서
function error (a, ...rest, b){
console.log(rest)
}
...rest는 항상 파라미터의 가장 마지막 순서에 배치해야 합니다. 예시2에서 언급했듯이 나머지로써 마지막에 모든 값들을 받아야 하기 때문에 ...rest가 파라미터 중간에 위치하게 되면 에러가 발생합니다.
예시6. 에러 II - 1개 이상 사용
function error2(a, ...rest, ...rest ){
console.log(rest)
}
마찬가지로 ...rest를 파라미터로 한개 이상 사용한다면 에러가 발생합니다.
예시7. 자율작명
function num(...작명 ){
console.log(작명);
}
num(1,2,3,4,5);
글에서는 rest 문법을 설명하는데 있어 편의상 나머지라는 뜻의 "rest"라는 영단어를 사용해서 작명했지만, 여러분이 ...rest를 사용한다면 작명하고 싶은대로 작명해도 상관없습니다. 꼭 "rest"라고 작명하지 않아도 ...만 찍어준다면 기능은 동일합니다.
spread 연산자(함수 인자값) vs ...rest(함수 파라미터)
자 다시 spread 연산자로 돌아와서 한가지 기능에 대해서 더 알아보겠습니다. 위에서 rest는 함수의 파라미터로써 입력받은 인자값들을 한번에 받아내 모두 배열형태로 만든다고 했습니다.
반면 spread 연산자는 객체나 배열 형태의 자료형들을 함수에 인자값으로써 한번에 대입해줄 수 있는 기능이 있습니다.
예시8. 함수 인자값
let a = [1,2,3];
let sum = function(x, y, z){
let result = x + y + z;
return console.log(total);
}
sum(a[0], a[1], a[2]);
sum(...a);
대입한 모든 값을 더해주는 sum() 함수를 하나 만들었습니다. 이 함수에 많은 양의 데이터를 담고있는 배열 a를 인자값으로 넣어주려면 어떻게 해야할까요?
spread 연산자의 사용법을 몰랐거나 혹은 spread 연산자가 없던 시절에는 index(a[0], a[1], a[2])를 활용해서 배열 안의 값들을 하나씩 함수에 적용해야만 했습니다. 이것도 물론 틀린 방법은 아닙니다만, 시간이 너무 오래걸린다는 단점이 있죠. 만약 객체나 배열의 값이 100가지가 넘어간다면 이 모든 값들을 언제 하나씩 입력하고 있을래요?
이럴때 spread 연산자를 활용하면 한번에 배열이나 객체를 함수에 인자값으로 적용하는 것이 가능합니다.
정리
rest의 기능
1. 객체 배열에서 구조분해 할당(Destructring)문법을 사용해 특정 값을 추출하는 것이 유리함
2. 함수의 파라미터로써 입력받은 인자값들을 한번에 배열로 받아서 처리함
3. 한개 이상 중복 사용, 파라미터로써 제일 마지막 순서에 오지 않는다면 에러가 발생함
4. 자율 작명이 가능함
spread 연산자의 기능
1. 객체나 배열을 함수에 인자값으로 한번에 대입하는 것이 가능함
비교
1. spread 연산자는 함수의 인자값, ...rest는 함수의 파라미터 역할을 함
spread 연산자와 ...rest에 대해서 알아보자. 끝
