스프레드 연산자(Spread Operator, ...)는 하나의 표현식을 여러 개의 인수, 배열 요소 또는 변수로 확장할 수 있게 해주는 JavaScript 문법입니다. ES6(ES2015)에서 도입되었으며, 배열과 객체를 더욱 직관적이고 간결하게 다룰 수 있도록 도와줍니다.
스프레드 연산자의 주요 용도
- 배열 합치기 —
concat()메서드를 대체하는 간결한 문법 - 함수 호출 시 배열을 개별 인수로 전달
- 배열 복사 및 병합
- 객체 복사 및 병합 (ES2018 이후 지원)
예제 코드
다음 예제는 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>실행 결과
10,20,rank,30,points,run
10,20,rank,30,points,run코드 설명
위 예제에서 변수 a와 c는 배열입니다. 스프레드 연산자(...)를 앞에 붙이면 배열의 각 요소가 개별적으로 펼쳐져 새로운 배열에 그대로 삽입됩니다. 따라서 e와 f는 같은 값을 갖지만, [...a, b, ...c, d] 형태로 작성하면 어떤 값이 어느 위치에 들어가는지 한눈에 파악할 수 있어 가독성이 크게 향상됩니다.
또한 스프레드 연산자는 원본 배열을 변경하지 않고 새로운 배열을 생성하므로, 불변성(immutability)을 유지해야 하는 React 등의 현대 프론트엔드 개발에서도 널리 활용됩니다.