JS spread operator 스프레드 연산자(...)

스프레드 연산자(...)를 사용하면 배열이나 객체의 요소를 하나하나 분해하여 이를 함수의 인자로 사용하거나 배열 요소, 객체 속성으로 펼쳐서 사용할 수 있게 해 준다. 이는 데이터 복사, 합치기 등의 작업을 매우 간결하게 처리할 수 있게 도와준다! 

 

말로 들으면 잘 이해가 안가는데, 코드를 보면 아주 확실히 알 수 있다. 

 

 

배열의 스프레드 

기존 방식 

let arr1 = [1, 2, 3];
let arr2 = [4, 5];

// arr1과 arr2를 합치기
let combinedArr = arr1.concat(arr2);

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

 

스프레드 연산자 사용 

let arr1 = [1, 2, 3];
let arr2 = [4, 5];

// arr1과 arr2를 합치기
let combinedArr = [...arr1, ...arr2];

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

//혹은 이렇게 추가도 된다 
let addNum = [...arr1, 10];

console.log(addNum); //[1,2,3,10]

 

기존에는 concat 을 이용해서 앞과 뒤의 배열들을 합쳤다면 이제는 ... 스프레드 연산자를 통해 나열만 해주면 간단하게 원하는 걸 얻을 수 있다. 

 

객체의 스프레드 

기존 방식 

let obj1 = { a: 1, b: 2 };
let obj2 = { c: 3, d: 4 };

// obj1의 속성을 obj2에 복사
let combinedObj = Object.assign({}, obj1, obj2);

console.log(combinedObj); // { a: 1, b: 2, c: 3, d: 4 }

 

스프레드 연산자 사용 

let obj1 = { a: 1, b: 2 };
let obj2 = { c: 3, d: 4 };

// obj1의 속성을 obj2에 복사
let combinedObj = { ...obj1, ...obj2 };

console.log(combinedObj); // { a: 1, b: 2, c: 3, d: 4 }

 

 

이렇게 하면  코드가 간결해지고, 배열이나 객체를 조작할 때 더 직관적이고 효율적으로 작성 할 수 있다는 장점이 있다.