[JavaScript] Spread Operator(스프레드 연산자)

Spread Operator(스프레드 연산자)

ES6에는 Spread Operator 라는 새로운 기능이 추가되었다.

 

이 스프레드 연산자는 배열, 문자열 등 반복 가능한(iterable) 객체의 요소를 전개하거나 펼친다.

 

기본 문법

const arr1 = [1, 2, 3, 4, 5];

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

 

위 코드처럼 arr1 배열 앞 (...) 처럼 3개의 점을 이용한 문법이며, 이런 스프레드 연산자를 쓰면 arr1 배열의 원소를 풀어쓸 수 있다.

---

1. Spread Operator의 배열 복사

자바스크립트에서 배열을 새로운 변수에 할당하는 경우, 새로운 배열은 기존 배열을 참조한다.

따라서 새로운 배열을 변경하는 경우 원본 배열 역시 변경된다.

// 단순 변수 할당
const arr1 = ['apple','banana']; 
const arr2 = arr1; 

arr2.push('cat'); 

console.log(arr2); // [ "apple", "banana", "cat" ]

// 원본 배열도 변경된다.
console.log(arr1); // [ "apple", "banana", "cat" ]

 

 

ES6의 스프레드 연산자를 사용하면, 다음과 같이 새로운 복사된 배열을 생성할 수 있다.

// ES6 Spread Operator
const arr1 = ['apple','banana']; 
const arr2 = [...arr1]; 

arr2.push('cat'); 

console.log(arr2); // [ "apple", "banana", "cat" ]

// 원본 배열은 변경되지 않는다
console.log(arr1); // [ "apple", "banana" ]

 

참고로 Spread 연산자를 이용한 복사는 얕은(shallow) 복사를 수행하며, 배열 안에 객체가 있는 경우에는 객체 자체는 복사되지 않고 원본 값을 참조한다.

따라서 원본 배열 내의 객체를 변경하는 경우 새로운 배열 내의 객체 값도 변경된다.

let arr1 = [{name: '모래', age: 27}]; 
let arr2 = [...arr1]; 

arr2[0].name = '마리';

console.log(arr1); // [ {name:'마리', age: 27}]
console.log(arr2); // [ {name:'마리', age: 27}]

---

2. spread operator와 객체

다음 예제 처럼 객체에도 스프레드 연산자를 사용할 수 있다.

const obj1 = { a : 1, b : 2 };
const obj2 = { c : 3 };
const obj3 = {...obj1, ...obj2};

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

 

이와 같이 배열 같은 iterable 객체와 일반적인 enumerable 객체 모두에게 스프레드 연산자를 사용할 수 있다.

---

3. 함수에서의 Spread Operator

Rest Parameter

스프레드 연산자를 매개변수로 사용하면 이를 rest parameter 라고 한다.

rest parameter를 사용하면 함수 호출 시, 여러 개의 인수를 전달할 수 있고 함수에서는 이 인수들을 하나의 변수로 받아 처리할 수 있다.

const func = function(...args) {
	console.log(args);
}
func(3); // [3]
func(4,5,6); // [4,5,6]

 

위 예시에서 func() 함수에 매개변수 1개만 넣으면 rest parameter는 하나의 요소를 가지는 배열이 된다.

반면, 여러 개의 인수를 넣으면 rest parameter는 3개의 인수를 모두 가지는 배열이 된다.

 

이 외에도 스프레드 연산자를 활용하여 일반 함수에 여러 개의 인수를 전달할 수도 있다.

 

function sum(a, b ,c) {
    console.log(a + b + c);
}

const num = [1, 2, 3, 4];

sum(...num); // 6

 

위와 같이 일반 함수에 스프레드 연산자를 사용하여 인수를 전달하는 경우, 함수는 필요한 값만 받아들이고 정의되지 않은 나머지 인수는 무시한다.

 

 

참조🙇‍♀️

https://shinyks.com/2023/08/javascript/spread-operator-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%B0%EC%82%B0%EC%9E%90/

https://growing-jiwoo.tistory.com/35#%E-%-D%--%--%EB%B-%B-%EC%--%B-%EC%--%--%EC%--%-C%EC%-D%--%--Spread%--Operator