Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

몽탁이의 개발일기

자바스크립트의 객체 복사 본문

Javascript 정리

자바스크립트의 객체 복사

몽탁 2020. 9. 2. 18:28

객체는 기본적으로 할당될 때

 

어느 정도의 크기를 가져야 할지 모르기 때문에

 

주소를 먼저 할당 후

 

해당 주소에 정의한 데이터의 타입의 크기에 맞춰서 메모리를 할당하게 됩니다.

 

객체를 그대로 넣어서 복사

그래서 위 그림처럼 객체를 그대로 넣어주면

 

객체 메모리 할당 (ref = 주소)

이 와같이 주소를 복사하여 해당 객체에 넣어주게 됩니다. 

 

결론적으로 주소는 같은 곳을 가리키게 되고 독립적으로 복사가 되지 않아

 

첫 번째 그림처럼 user2의 name을 바꿨지만 user1의 name도 바뀌게 됩니다.

 

이런 것을 call by reference로 인한 값 변경이라고 합니다.

 


그렇다면 서로에게 영향을 주지 않게 복사하는 방법은 무엇이 있을까요?

 

자바스크립트의 기본 객체인 Object의 API를 이용하면 데이터 자체를 clone 하여 서로 영향을 주지 않는

 

객체를 만들 수 있습니다.

 

Object 객체의 메소드인 assign을 이용한 복사

assign을 이용하여 매개변수로 빈객체와, 복사하고 싶은 객체를 넘기게 되면

 

빈 객체 안에 user1의 객체가 들어가게 되고 그 객체를 리턴하여

 

서로 영향을 주지 않는 객체가 탄생됩니다.

 

이것을 더 간단히 코딩하면,

 

빈객체를 바로 넣어줘서 새로운 객체를 리턴

위와 같이 빈 객체를 바로 넣어주어서 바로 새로운 객체를 생성할 수 있게 됩니다.

 

추가적으로, assign은 넣어준 객체들을 앞에서부터 순서대로 덮어씌워 생성하게 됩니다.

 

넣어준 객체들이 덮어씌워짐

user1과 user2에서 name과 age가 겹치게 되어 

 

assign의 인자로 넣어준 2번째 user2 객체의 키와 값이 들어가게 되었고

 

hasJob라는 속성이 추가되어 새로운 객체를 user3가 받게 됩니다.

 

이런 점을 유의하여 조심히 사용해야 됩니다.

'Javascript 정리' 카테고리의 다른 글

JSON 이란?  (0) 2020.09.08
자바스크립트 배열의 유용한 APIs  (0) 2020.09.07
자바스크립트의 객체  (0) 2020.09.02
자바스크립트 Class의 상속  (0) 2020.09.02
자바스크립트에서의 Class  (0) 2020.09.01