JS - 스프레드(spread) 연산자

이전에 배열에서 스프레드 연산자를 활용하는 방법에 대해서 설명한 적 있다.

오늘은 객체에서 스프레드 연산자를 활용하는 방법까지 포함하여 포스팅해보려 한다.

 

배열에서의 스프레드 연산자

배열 복제

let arr = [1,2,3]
let copyArr = [...arr]

console.log(copyArr)  // [ 1, 2, 3 ]

// 기존 arr 변경
arr.pop()

console.log(arr)  // [ 1, 2 ]
console.log(copyArr) // [ 1, 2, 3 ]

배열의 복제는 스프레드 연산자를 활용하여 위와 같이 사용할 수 있다.

기존의 배열이 변경되더라도 복제한 배열이 변경되지 않는다. (참조값 복사가 아닌 값 복사라는 의미다.)

 

스프레드 연산자를 활용한 구조분해할당 (rest 문법)

let arr = [1,2,3]


let [a,...rest] = arr

console.log(a) 	// 1
console.log(rest)	// [2,3]

스프레드 연산자를 활용하여 위와 같은 방법또한 가능하다.

 

배열 병합

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

let arr3 = [...arr1,...arr2]

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

위와 같은 방식으로 병합 또한 가능하다.

 

객체에서의 스프레드 연산자

객체 복제

let obj = {a:1, b:2, c:3}

let copyObj = {...obj}

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

객체 또한 위와 같은 복사가 가능하다.

 

스프레드 연산자를 활용한 구조분해할당 (rest 문법)

let obj = {a:1, b:2, c:3}

let {a,...rest} = obj

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

let {b,...rest2} = obj

console.log(rest2) // { a: 1, c: 3 }

이때 배열과는 달리 객체 내에 존재하는 '키'값 'a'로 빼와야 한다.

 

객체 병합

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

let obj3 = {...obj1,...obj2}
console.log(obj3)	// { a: 1, b: 4, c: 5, d: 6 }

객체 병합 역시 가능한데, 이때 뒤에 있는 객체 obj2가 obj1 을 덮어쓰게 된다.