스프레드 연산자(Spread Operator)는 배열이나 반복 가능한 객체(iterable)의 요소들을 개별적인 인수로 분리하여 전달할 수 있게 해주는 강력한 문법입니다. 즉, 하나의 배열을 여러 개의 독립된 값으로 펼쳐서 함수에 전달하거나 다른 배열과 결합할 때 유용하게 사용됩니다.
기본 문법
function myFunction(...iterableObj);
스프레드 연산자는 점 세 개(...)로 표현되며, 함수 호출 시 배열 앞에 붙여서 사용하면 배열의 각 요소가 개별 인수로 전달됩니다.
예제
아래 예제는 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
스프레드 연산자의 장점
- 가독성 향상:
concat()보다 어떤 요소들이 결합되는지 한눈에 파악하기 쉽습니다. - 유연한 배치: 배열 요소 사이에 새로운 값을 자유롭게 삽입할 수 있습니다.
- 함수 호출 활용:
Math.max(...numbers)처럼 배열을 개별 인수로 바로 전달할 수 있습니다.
이처럼 스프레드 연산자는 ES6(ES2015)부터 도입된 문법으로, 배열 병합, 함수 인수 전달, 객체 복사 등 다양한 상황에서 현대적인 자바스크립트 코드를 작성하는 데 필수적인 도구입니다.