JavaScript(ES6)에 새롭게 추가된 대표적인 연산자는 스프레드(Spread) 연산자와 레스트(Rest) 매개변수입니다. 두 연산자 모두 세 개의 점(...)을 사용하지만, 사용되는 위치와 역할이 서로 다릅니다.
레스트(Rest) 매개변수란?
레스트 매개변수를 사용하면 함수에 전달되는 불특정 개수의 인수를 하나의 배열로 표현할 수 있습니다. ES6에서 도입된 이 기능은 arguments 객체를 직접 다루는 번거로움 없이 가변 인수를 손쉽게 처리할 수 있도록 개발자의 작업을 크게 단순화해 줍니다.
레스트 매개변수는 세 개의 점(...)으로 표시하며, 함수의 매개변수 이름 앞에 붙입니다.
예제 코드
다음 코드는 레스트 매개변수를 활용해 전달받은 모든 숫자를 더하는 예제입니다.
<html>
<body>
<script>
function addition(...numbers) {
var res = 0;
numbers.forEach(function (number) {
res += number;
});
return res;
}
document.write(addition(3)); // 출력: 3
document.write(addition(9, 10, 11, 12, 13)); // 출력: 55
</script>
</body>
</html>스프레드(Spread) 연산자란?
스프레드 연산자는 배열, 문자열 등 반복 가능한(iterable) 객체를 개별 요소로 펼쳐서(expand) 여러 인수, 배열 요소, 변수 등으로 확장할 수 있게 해줍니다. 덕분에 concat() 같은 메서드를 사용하지 않고도 훨씬 간결하고 직관적으로 배열을 병합할 수 있습니다.
예제 코드
아래 코드를 실행하면 concat() 메서드와 스프레드 연산자의 결과가 동일하게 출력되는 것을 확인할 수 있습니다.
<html>
<body>
<script>
var a, b, c, d, e, f;
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>핵심 정리
레스트 매개변수: 함수 선언 시 매개변수 이름 앞에 ...을 붙여, 전달된 인수들을 하나의 배열로 모읍니다.
스프레드 연산자: 함수 호출이나 배열 리터럴에서 ...을 사용해, 배열이나 문자열을 개별 요소로 펼칩니다.
두 연산자는 문법이 동일하지만, 레스트는 요소를 "모으는" 역할을 하고 스프레드는 요소를 "펼치는" 역할을 한다는 점에서 서로 반대되는 기능이라는 것을 기억하면 좋습니다.