JavaScript ES6(ECMAScript 2015)에서 도입된 문법 중 가장 혁신적이고 편리한 기능을 꼽자면 단연 스프레드 연산자(Spread Operator)일 것입니다.
코드의 양을 획기적으로 줄여주고 가독성을 높여주는 이 마법 같은 ... 문법에 대해 자세히 알아보겠습니다. 🧩
1. 스프레드 연산자란?
스프레드(Spread)라는 단어는 ‘펼치다’, ‘퍼뜨리다’라는 의미를 가지고 있습니다.
이름 그대로 객체(Object)나 배열(Array)과 같이 뭉쳐 있는 데이터를 개별 요소로 ‘쫙 펼쳐주는’ 역할을 합니다.
문법은 아주 간단하게 점 세 개(...)를 찍어서 사용합니다.
핵심 특징: 기존의 원본 객체나 배열을 변경하지 않고(불변성 유지), 새로운 객체나 배열을 생성할 때 주로 사용됩니다.
2. 실전 활용 예제
스프레드 연산자는 크게 객체, 배열, 문자열 세 가지 상황에서 자주 쓰입니다.
1) 객체(Object) 병합 및 복사
기존 객체의 속성을 그대로 가져오면서 새로운 속성을 추가하거나 덮어씌울 때 매우 유용합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const object1 = {
name: "오윤희",
job: "vocalist",
};
// object1의 모든 속성을 펼쳐서 넣고, age를 추가
const object2 = {
...object1,
age: 44,
};
console.log(object2);
// 실행 결과
// { name: '오윤희', job: 'vocalist', age: 44 }
2) 배열(Array) 확장 및 복사
배열을 합치거나 요소를 추가할 때, 복잡한 push나 concat 메서드 대신 직관적으로 사용할 수 있습니다.
1
2
3
4
5
6
7
8
9
const array = ["진천댁", "주단태", "주석훈"];
// 기존 배열을 펼치고, 뒤에 새로운 요소를 추가
const newArray = [...array, "주석경"];
console.log(newArray);
// 실행 결과
// ['진천댁', '주단태', '주석훈', '주석경']
3) 문자열(String)을 배열로 변환
문자열도 순회가 가능한(Iterable) 데이터이기 때문에 스프레드 문법을 사용할 수 있습니다.
- 그냥 펼치면: 문자 하나하나가 인자로 전달됩니다.
- 배열 안에 펼치면: 문자 하나하나가 배열의 요소가 됩니다.
1
2
3
4
5
6
7
8
9
const string = "심수련";
// 1. 함수 인자로 펼쳐질 때
console.log(...string);
// 실행 결과: 심 수 련 (공백으로 띄워져서 출력됨)
// 2. 배열 안에서 펼쳐질 때
console.log([...string]);
// 실행 결과: ['심', '수', '련']
3. 요약 및 주의사항
- 불변성(Immutability): 스프레드 연산자는 원본 데이터를 건드리지 않고 복사본을 만듭니다. 이는 리액트(React) 상태 관리에서 매우 중요한 개념입니다.
- 얕은 복사(Shallow Copy): 스프레드 연산자는 1차원 깊이까지만 복사합니다. 객체 안에 또 객체가 있는 경우(중첩 객체)에는 주의해서 사용해야 합니다.
마치며
오늘은 자바스크립트의 필수 문법인 스프레드 연산자(...)에 대해 알아보았습니다.
이제 concat이나 assign 같은 옛날 방식 대신, 깔끔한 스프레드 문법을 적극 활용해 보세요!
내용 중 궁금한 점이나 피드백이 있다면 언제든 댓글 남겨주세요. 👋