spread 연산자를 통한 복사

fieldnight·2023년 11월 1일

spread연산자 (전개연산자)

...
온점 3개
ㅤ

1. 배열에서의 spread 동작

let arr = [1,2,3,4,5]
console.log (arr)  //[1,2,3,4,5]
console.log(...arr) //1,2,3,4,5
배열이 한꺼풀 벗겨져서 숫자가 요소로 취급된다.
문자열에도 사용 가능하다. ㅤ

ㅤ

2. 문자열에서의 spread 동작

let str= "Hello"
console.log(str)    //"Hello"
console.log(...str) //"H""e""l""l""o"
문자 하나하나가 펼져진다.
즉, 집합된 값을 하나하나 전개해준다.
객체에도 사용 가능하다.

ㅤ

3. spread를 이용하여 객체타입을 복사해보자 !

ㅤ

1. 알고 가야할 개념: 깊은 복사와 얕은 복사

얕은 복사: 주소값까지만 복사하여 원본 데이터의 변화가 없다.
깊은 복사 : 실제 데이터까지 복사한다.
ㅤ

ㅤ

2. 알고 가야할 개념: const를 객체에 써도 되는 이유?

const obj ={name:"minari"}
obj.name = "minari2"
console.log(obj.name) //" minari2"
const는 재선언, 재할당이 안된다. 그런데 const로 선언한 객체에 키를 추가/수정이 가능했다. const 키워드로 선언된 obj(주소값)은 변환되지 않았다.
obj에 담긴 주소값은 여전히 '100'인 상태이고, 단지 해당 주소값이 참조하는 실제 힙 메모리의 내용을 변경했기 때문이다.
( 힙 메모리는 유동적으로 크기와 데이터가 변화할 수 있다. )
ㅤ

ㅤ

3. 참조타입(=객체타입)을 재할당하면 어떤 복사를 하는가?

얕은복사를 한다.
객체, 배열, 함수는 참조타입이다.
메모리공간을 예측할 수 없기에 메모리의 가상공간인 힙에 저장된다.
값을 복사했을때 객체 자체를 복사해서 완전히 새롭게 만들어지는게 아닌 기존 객체의 '주소값'을 복사한다. 복사한 할당값에서 변경/삭제시 기존 값에 영향을 미친다. (얕은복사)
ㅤ
<아래의 표는 힙, 얕은복사인 참조타입의 복사를 나타낸다.>
-코드캠프

ㅤ

4. 단순 객체를 spread 연산자로 재할당하면 어떤 복사를 하는가?

깊은복사를 한다.

let obj = {name: "minari", gender: "female"
console.log(obj)    //{name: "minari", gender: "female"}
const copyObj = { ...obj }
//...로 인해 벗겨진 대괄호를 씌워서 copyObj에 '객체'로 저장한다.

spread를 사용해 만든 객체는 원본 배열과 연결이 끊어진다. (깊은복사)

const arr =[]
const secArr =[]
let copy = [...arr, ...secArr]
두개의 배열을 한번씩 펼쳐서 새로운 배열에 합쳐준다.
spread를 사용할 경우 원본 배열과는 연결이 끊어진다.(깊은복사)

ㅤ

5. 이중 객체를 spread 연산자로 재할당하면 어떤 복사를 하는가?

ㅤ얕은복사를 한다
let origin = {
  favFood ={first: "meet" , second: "sushi"}}
 ㅤ
let copy = {...origin}
copy.favFood.first ="beef";
//이 경우 origin.favFood.first 도 beef가 되어버린다. 
ㅤ
원래 spread 연산자를 사용하여 복사하면 완전히 다른 객체로 떨어져 기존 객체에 영향을 미치지 않으나, 이중객체의 값을 바꾸게 되면 얕은복사 가 일어난다. spread를 통해서임에도 불구하고 참조형은 얕은 복사가 기본이란 법칙을 따른다. 모든 곳에서 같은 주소를 바라보게 된다!