ES6에서 도입된 Rest 연산자(...)와 Spread 연산자(...)는 동일한 기호(...)를 사용하지만, 사용되는 위치와 역할이 완전히 다릅니다. 이 글에서는 두 연산자의 개념과 차이점, 그리고 실제 동작 예제를 살펴보겠습니다.
Rest 연산자(...)
Rest 연산자는 함수를 호출할 때 인수의 개수를 제한하지 않고, 전달된 초과 인수들을 하나의 배열로 묶어 접근할 수 있게 해줍니다. 또한 배열이나 객체를 구조 분해(destructuring)할 때 나머지 요소를 한꺼번에 담는 용도로도 활용됩니다.
Spread 연산자(...)
Spread 연산자는 배열과 같은 반복 가능한(iterable) 객체를 개별 요소로 펼쳐서 확장합니다. 배열 합치기, 함수에 인수를 한꺼번에 전달하기 등에 널리 사용됩니다.
- Rest 연산자 : 여러 개의 값을 하나의 배열로 모읍니다. (함수 매개변수, 구조 분해 할당)
- Spread 연산자 : 하나의 배열을 개별 요소로 풀어냅니다. (배열 병합, 함수 호출 시 인수 전달)
예제 코드
다음은 자바스크립트에서 Rest 연산자와 Spread 연산자를 함께 사용하는 방법을 보여주는 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample, .result {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript Rest 및 Spread 연산자</h1>
<div class="sample"></div>
<div style="color: green;" class="result"></div>
<button class="btn">Spread 연산자</button>
<h3>위 버튼을 클릭하면 Spread 연산자로 두 배열을 연결합니다</h3>
<button class="btn">Rest 연산자</button>
<div style="color: green;" class="result"></div>
<h3>위 버튼을 클릭하면 Rest 연산자로 숫자들을 더합니다</h3>
<script>
let sampleEle = document.querySelector(".sample");
let btnEle = document.querySelectorAll(".btn");
let resEle = document.querySelectorAll(".result");
let arr = [2, 3, 4, 5];
let arr1 = ["a", "b", "c", "d"];
sampleEle.innerHTML = "arr = " + arr + "<br> arr1 = " + arr1;
function addArr(num, ...ar) {
let sum = num;
ar.forEach((item) => {
sum += item;
});
resEle[1].innerHTML = "요소들의 합 = " + sum;
}
btnEle[0].addEventListener("click", () => {
resEle[0].innerHTML = "연결된 배열 = " + [...arr, ...arr1];
});
btnEle[1].addEventListener("click", () => {
addArr(44, 11, 35, 44, 22, 99);
});
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 초기 화면이 출력됩니다.
“Spread 연산자” 버튼을 클릭하면 Spread 연산자를 통해 arr과 arr1이 하나의 배열로 연결되어 2,3,4,5,a,b,c,d가 출력됩니다.
“Rest 연산자” 버튼을 클릭하면 Rest 연산자로 수집된 숫자들이 모두 더해져 255(44+11+35+44+22+99)가 출력됩니다.
