[javascript] 스프레드 연산자(...) 개념과 사용법

📌스프레드 연산자

◾ 스프레드 연산자란?

 스프레드 연산자는 자바스크립트 ES6 버전부터 도입된 기능으로, 배열이나 객체의 요소를 개별적으로 펼치거나, 새로운 배열이나 객체를 생성하는 데 사용된다. 

 

자바스크립트 객체 중 반복이 가능한 Array, Map, Set, String 등의 원소를 나열할 수 있는 기능이다. 

 

 

🤔처음에 이 기능을 알아보게 된 것은 '반복문을 사용하지 않고도 간단하게 배열의 요소를 값에 넣을 수 없을까?' 였는데 이 의문점에 꼭 맞는 유용한 기능이 바로 이 '스프레드 연산자' 였다. 

 

◾ 스프레드 연산자 사용법

1. 배열에서 요소 펼치기

배열의 요소를 펼칠 때 사용한다.

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const combined = [...arr1,...arr2];

 

결과

console.log(combined); // [1, 2, 3, 4, 5, 6]

 

 

2. 배열 복사

배열을 복사할 때도 유용하다. 기존의 배열은 변경하지 않는다. 

const original = [1,2,3];
const copy = [...original];

 

 

결과

console.log(copy); // [1,2,3]
console.log(copy === original); // false (새로운 배열)

 

 

3. 객체 복사

const obj = { a: 1, b: 2 };
const copy = { ...obj };

 

결과

console.log(copy); // { a:1, b:2 }
console.log(copy === obj); //false (새로운 객체)

4. 객체 병합

const obj1 = { num:1, num2:2 };
const obj2 = { age:3, age2:4 };
const combined = { ...obj1, ...obj2 };

 

결과

console.log(combined); // { num: 1, num2: 2, age: 3, age2: 4 }

 

 

---

스프레드 연산자를 통해 반복문과 같은 것을 사용하여 요소를 하나씩 접근하여 꺼내지 않아도 매우 쉽게 요소들을 펼쳐 다른 값에 할당하거나 합칠 수 있다 😊