프론트 088 - spread 연산자

규링규링규리링·2024년 9월 2일

프론트 공부하기

목록 보기
88/135

spread

하나로 뭉쳐있는 값들의 집합을 전개해주는 연산자

...

사용 예시

배열

let arr = [1,2,3,4,5]
console.log(arr) 	// [1,2,3,4,5]
console.log(...arr) // 1,2,3,4,5

문자열

let str = 'Hello'
console.log(str) 	// Hello
console.log(...str)	// H e l l o

객체

const obj = {name : "otter", gender : "male"} 
obj 			// {name : "otter", gender : "male"} 
const newObj1 = obj
newObj1.name = 'rabbit'
newObj1			// {name : "rabbit", gender : "male"} 
obj				// {name : "rabbit", gender : "male"} 
const newObj2 = {...obj}
newObj2.name = 'banana'
newObj2			// {name : "banana", gender : "male"}
obj				// {name : "rabbit", gender : "male"} 

그냥 값을 저장하는식으로 하면 값이 아닌 주소값을 복사해버리기 때문에
복사한 뒤 값을 수정하면 원본의 값도 수정되어버림
하지만 spread를 사용하면 완전히 다른 객체로 만들어지기에
값을 수정해도 원본에는 아무 영향이 없음

[얕은 복사와 깊은 복사의 차이]

0개의 댓글