Spread 스프레드 연산자

스프레드 연산자에 대해 쉽게 알아보자.

 

스프레드 연산자(Spread Operator)는 이름이 거창하지만,  " . . . " 를사용한다.

쉽게 " . . . " 를 사용한다는것은 "요소를 펼쳐 놓겠다" 란 의미로 이해해보자.

이말은 배열이나 객체의 모든 요소를 개별적으로 분리하여 사용할 수 있게 해주겠다란 말이다.

 

[  ] 배열에서의 스프레드 연산자 사용

배열에서 스프레드(...)를 사용하면 기존 배열에 새로운 요소를 추가하여 새로운 배열을 만들어준다.

• 이해하기

const oldArray = [1, 2, 3];  // 기존 배열
const newElement = 4;  // 추가하고 싶은 새 요소

const newArray = [...oldArray, newElement]; // newArray의 값은 : '[1,2,3,4]'

 

…oldArray는 oldArray의 “모든 요소”를 새 배열 ‘newArray’에 개별적으로 펼처 넣는것을 의미한다.

그 뒤 newElement가 추가되어 최종적으로 ‘[1,2,3,4]’라는 새 배열이 만들어진다.

 

• 만약 newElement가 배열이라면, 즉 const newElement = [4];  인 경우

const oldArray = [1, 2, 3]; // 기존 배열
const newElement = [4]; // 배열 형태의 새 요소

const newArray = [...oldArray, ...newElement]; // ...이 포인트다.
//newArray의 값은 : ‘[1,2,3,4]’

 

여기서 중요한건 newElement앞에도 … 처리를 했다는것이다. 그러면 위에 말한것 처럼 여기서도

newElement의 요소를 펼쳐놓을것이다. 그래서 newArray의 값은 : ‘[1,2,3,4]’

 

• 만약 newElement 앞에 … (스프레드)연산자를 사용하지 않는다면?

const oldArray = [1, 2, 3]; // 기존 배열
const newElement = [4]; // 배열 형태의 새 요소

const newArray = [...oldArray, newElement];  // newElement에 ...사용안함
// 결과: [1, 2, 3, [4]]

---

 

객체에서 스프레드 연산자 사용

스프레드 연산자는 자바스크립트에서 객체 또는 배열의 요소를 확장하는 데 사용되는데,

객체의 경우, 스프레드 연산자를 사용하여 객체의 속성을 쉽게 복사하고 새 객체로 결합 할 수 있다.

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

//새로운 객체를 만들고 싶을때
let combinedObj = { ...obj1, ...obj2 };
// 결과: { a: 1, b: 3, c: 4 }

위에 예제에서 obj1과 obj2의 속성을 새 객체 combinedObj로 복사했다.

두 객체에 동일한 키(b)가 있을 경우, 뒤에 나오는 객체(obj2)의 값이 사용된다.

스프레드 연산자는 객체의 속성을 업데이트하거나, 기존 객체에 새로운 속성을 추가하는 데에도 유용하다.

 

• 이해하기

const array = []
const newArray1 = [ ...array, {name: "찬동"}]
const newArray2 = [ ...array, {name: "지동", age: 5}]

결과 : newArray1 =  [{ name: "찬동" } ], newArray2= [{ name: "지동", age: 5 }]

 

const array = []
const newArray1 = [...array, {name: "찬동"}]
const newArray2 = [...newArray1, {name: "지동", age: 5}]

결과 : [{name: "찬동"},{name: "지동", age: 5}]

const object = {name: "찬동"}
const array = [{name: "지동", age: 3 }]
const newArray = [...array, {...object, age: 5}]

결과 : [{name: "지동", age: 3 }, {name:"찬동", age:5}]

 

스프레드 연산자는 무엇에 감싸져있는지 객체인지 배열인지 잘 구분만 하면 된다.

const prevUsersList = [{name: "찬동", age: 5}]
const newArray = [...prevUsersList, {name: "지동", age: 3}]

결과 : newArray = [{name: "찬동", age: 5}, {name: "지동", age: 3}]