[Javascript] 객체 복사하기 (feat. 전개 연산자(...))

자바스크립트에서 객체나 배열을

 

복사하는 방법에 대해 알아보겠습니다.

 

 

복사에는 얕은 복사와

 

깊은 복사(Deep Copy)가 있습니다.

 

 

얕은 복사(Shallow Copy)란?

 

과일을 예로 들어보겠습니다.

See the Pen by jisupark123 (@jisupark123) on CodePen.

 

 

fruitsA를 fruitsB에 복사하고

 

fruitsB에만 "melon"을 집어넣었는데 

 

출력 결과 두 배열 모두 바뀐 것을 볼 수 있습니다.

 

우리는 단순히 값을 복사 했다고 생각하지만 컴퓨터의 내부를 들여다보면 다릅니다.

 

100      →	100
fruitsA	fruitsB
["apple", "banana"]	["apple", "banana"]

 

 

fruitsB = fruitsA 라고 입력하면 자바스크립트는 단순히 값을 복사하지 않고

 

fruitsA의 메모리 주소 ex)100 를 fruitsB와 공유하게 됩니다.

 

이렇게 하면 메모리를 절약할 수 있기 때문이죠.

 

 

그래서 fruitsB의 값을 바꾸면 같은 메모리 주소를 공유하는 fruitsA의 값도 바뀌게 됩니다.

 

이렇게 이름만 같은 변수로 복사하는 것을 얕은 복사(참조 복사)라고 부릅니다.

 

 

깊은 복사(Deep Copy)란?

 

깊은 복사는 얕은 복사의 반대말입니다.

 

깊은 복사를 하게 되면 복사한 두 배열이 완전히 독립적으로 작동하게 됩니다.

 

 

See the Pen by jisupark123 (@jisupark123) on CodePen.

 

 

 

처음 코드와의 차이점은

const fruitsB = fruitsA

에서

const fruitsB = [...fruitsA]​

로 바뀐 것입니다.

 

전개 연산자(...)는 말 그대로 배열, 객체의 요소를

코드 내에서 전개시키는 역할을 합니다.

 

위의 코드에서 ...fruitsA 는

fruitsA 에서 [ ] 를 뺀 "apple", "banana" 와 같습니다.

 

 

아래 코드는 전개 연산자를 응용하는 방법입니다.

 

 

See the Pen by jisupark123 (@jisupark123) on CodePen.

 

 

전개 연산자가 쓰여진 자리에 배열이 전개되는 것뿐이므로

 

이런 식으로 응용할 수도 있습니다.