자바스크립트에서 전개 연산자(스프레드 오퍼레이터: Spread Operator)는 데이터 구조를 효과적으로 복사하고 병합할 때 사용하는 핵심 문법이다. 마침표 세 개(...)로 표기하며, 배열이나 객체처럼 여러 값이 묶여 있는 대상을 개별 요소로 분리하여 다룰 수 있게 돕는다. 기존 데이터를 직접 변경하지 않고 새로운 불변 상태를 생성할 수 있어 데이터 관리의 안정성을 높인다.
전개 연산자의 개념
전개 연산자는 반복 가능한(이터러블: Iterable) 객체나 일반 객체의 요소를 하나씩 펼쳐내는 문법이다. 묶여 있는 데이터 구조의 포장을 풀어서 개별 항목으로 나열하는 동작을 수행한다. 이는 여러 개의 물건이 담긴 상자를 열어 내용물을 하나씩 꺼낸 뒤 다른 상자에 옮겨 담는 과정에 비유할 수 있다. 이 문법을 사용하면 기존 원본 데이터를 유지하면서 새로운 요소를 추가하거나 특정 요소를 손쉽게 수정할 수 있다.
위 이미지는 전개 연산자가 배열과 객체의 요소를 개별 단위로 분리하여 새로운 구조에 전달하는 흐름을 나타낸다. 원본 데이터 자체를 직접 수정하지 않고 요소를 전개하여 새로운 배열이나 객체를 구성하는 구조를 확인할 수 있다.
자료형별 전개 연산자 사용법
전개 연산자는 배열, 객체, 문자열 등 다양한 자료형에 적용된다. 아래 예제 코드는 각 자료형에서 전개 연산자가 어떻게 동작하는지 보여준다.
//array
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
const arr4 = [...arr1]; // [1, 2, 3]
//object
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const obj3 = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }
const obj4 = { ...obj1 }; // { a: 1, b: 2 }
//string
const str = "hello";
const arr = [...str]; // ["h", "e", "l", "l", "o"]
위 이미지는 작성된 코드가 실행되어 콘솔에 출력된 결과 화면이다. 각 자료형이 전개 연산자를 통해 새로운 배열과 객체로 생성된 결과를 보여준다.
코드 동작 원리 및 분석
제시된 코드의 각 영역별 동작 원리는 다음과 같다.
- 배열 병합과 복사:
arr3은...arr1과...arr2를 사용하여 두 배열의 원소를 순서대로 펼쳐 하나의 새로운 배열로 병합한다.arr4는arr1의 모든 요소를 펼쳐 새로운 배열에 담는 얕은 복사(샬로 카피: Shallow Copy)를 수행한다. 원본 배열인arr1은 그대로 유지된다. - 객체 병합과 복사:
obj3은obj1과obj2가 가진 속성(프로퍼티: Property)들을 펼쳐 하나의 새로운 객체로 합친다.obj4는obj1의 모든 키와 값을 복사하여 새로운 독립 객체를 생성한다. - 문자열 전개: 문자열은 순회 가능한 이터러블이므로
...str을 적용하면 각 글자가 분리되어 배열arr의 개별 원소로 변환된다.
사용 시 주의점
전개 연산자를 사용할 때 학습자가 자주 혼동하는 부분은 다음과 같다.
- 얕은 복사의 한계: 전개 연산자는 1차원 데이터는 독립적으로 복사하지만, 배열이나 객체 내부에 또 다른 객체나 배열이 중첩되어 있는 경우 내부 참조값(메모리 주소)이 공유된다. 따라서 2차원 이상의 깊은 복사(딥 카피: Deep Copy)가 필요한 구조에서는 별도의 복사 방식을 고려해야 한다.
- 객체 속성 이름 충돌: 객체를 병합할 때 중복되는 키(Key)가 존재하면 나중에 작성된 객체의 속성 값이 이전 값을 덮어쓴다. 속성의 우선순위를 고려하여 전개 순서를 지정해야 한다.