JavaScript ES6에서 도입된 나머지 매개변수(Rest Parameter)와 스프레드 연산자(Spread Operator)는 모두 점 세 개(...)를 사용하지만, 그 역할은 서로 다릅니다. 이 글에서는 두 문법의 개념과 실제 활용 예제를 통해 차이점을 명확하게 살펴보겠습니다.
나머지 매개변수(Rest Parameter)
나머지 매개변수는 함수에 전달된 여러 개의 인수를 하나의 배열로 묶어 표현할 수 있게 해주는 기능입니다. ES6에서 도입되기 전에는 arguments 객체를 사용해야 했지만, 나머지 매개변수는 이러한 번거로움을 크게 줄여 개발자의 작업을 한결 수월하게 만들어 줍니다.
나머지 매개변수는 점 세 개(...)로 표시하며, 매개변수 이름 앞에 위치시킵니다. 이렇게 하면 함수가 호출될 때 전달된 인수들이 자동으로 하나의 배열로 수집됩니다.
다음 코드 예제를 통해 나머지 매개변수를 정의하고 사용하는 방법을 확인해 보겠습니다.
<html>
<body>
<script>
function addition(...numbers) {
var res = 0;
numbers.forEach(function (number) {
res += number;
});
return res;
}
document.write(addition(3));
document.write(addition(9,10,11,12,13));
</script>
</body>
</html>
위 예제에서 addition 함수는 인수의 개수에 상관없이 동작합니다. 인수를 하나만 전달해도, 다섯 개를 전달해도 모두 numbers라는 배열로 수집된 후 합계가 계산됩니다.
스프레드 연산자(Spread Operator)
스프레드 연산자는 나머지 매개변수와 반대로 동작합니다. 즉, 하나의 배열을 개별 요소로 펼쳐서(spread) 함수의 각각의 인수로 전달할 수 있게 해줍니다.
문법(Syntax)
스프레드 연산자의 기본 문법은 다음과 같습니다.
function myfunction(...iterableObj);
다음은 스프레드 연산자를 사용해 배열의 요소를 함수 인수로 전달하는 예제입니다.
function multiply(x, y) {
return x*y;
}
var myArgs = [50, 100]; console.log(multiply(...myArgs));
위 예제에서 myArgs 배열은 스프레드 연산자에 의해 50과 100이라는 두 개의 개별 인수로 펼쳐져 multiply 함수에 전달되며, 결과적으로 5000이 출력됩니다.
활용 예제: concat 메서드와 비교
스프레드 연산자는 배열을 병합할 때 특히 유용합니다. 아래 예제에서는 기존의 concat() 메서드와 스프레드 연산자를 사용한 방법을 비교해 보겠습니다.
<html>
<body>
<script>
var a, b, c, d, e, f, g;
a = [10,20];
b = "rank";
c = [30, "points"];
d = "run"
// concat 메서드 사용
e = a.concat(b, c, d);
// 스프레드 연산자 사용
f = [...a, b, ...c, d];
document.write(e);
document.write("<br>"+f);
</script>
</body>
</html>
concat() 메서드와 스프레드 연산자 모두 동일한 결과를 만들지만, 스프레드 연산자는 새 배열 리터럴 안에서 원하는 위치에 자유롭게 요소를 배치할 수 있다는 장점이 있습니다. 또한 객체 병합, 배열 복사 등 다양한 상황에서도 직관적으로 활용할 수 있어 현대 JavaScript 개발에서 널리 사용되고 있습니다.
정리
- 나머지 매개변수(Rest Parameter): 여러 개의 인수를 하나의 배열로 모읍니다. 함수 선언 시 매개변수 앞에
...를 붙입니다. - 스프레드 연산자(Spread Operator): 배열이나 반복 가능한 객체를 개별 요소로 펼칩니다. 함수 호출 시 또는 배열/객체 리터럴 안에서
...를 붙입니다.
두 문법은 같은 기호를 사용하지만 사용 위치와 목적이 다르다는 점을 기억하면, 더 깔끔하고 유연한 JavaScript 코드를 작성하는 데 큰 도움이 됩니다.