[VUE] 자바스크립트 객체 복사 또는 비교하기 (javascript)

안녕하세요!

프뚜(프로그래머 뚜)입니다!

 

[개발 환경]

 - OS: windows 10 64bit

 - git: 2.37.1.windows.1

 - nodejs: v16.16.0

 - npm: 8.15.0

 - yarn: 1.22.19

 - @vue/cli(vue3): 5.0.8

 - vue-router: 4.1.3

 

Javascript에는 원시타입과 참조타입이 있습니다.

원시타입은 언어의 최고 로우 레벨에서 직접 표현되는 불변 데이터입니다. 변수에 할당될 때, 메모리의 고정 크기로 원시 값을 저장하고 해당 저장된 값을 변수가 직접적으로 가리키는 형태입니다. 또한 값이 절때 변하지 않는 불변성을 갖고있기때문에 때문에 재할당 시 기존 값이 변하는것 처럼 보일지 몰라도 사실 새로운 메모리에 재할당한 값이 저장되고 변수가 가리키는 메모리가 달라졌을 뿐입니다.
 - Boolean: 논리 요소를 나타내며 true와 false 두 가지의 값을 가질 수 있습니다.
 - Null: 어떤 값이 의도적으로 비어있음을 표현하며 불리언 연산에서는 거짓으로 취급합니다.
 - Undefined: 전역 undefined 속성은 undefined 원시 값을 나타내며, JavaScript의 원시 자료형 중 하나입니다.
 - Number: 정수 데이터를 나타낼 때 사용합니다.
 - String: 텍스트 데이터를 나타낼 때 사용합니다.
 - Symbol: 고유하고 변경 불가능한 원시 값이며 객체의 속성키로 사용할 수 있습니다.

 

참조타입은 자바스크립트에서 원시 타입을 제외한 나머지는 참조타입(객체)이라 할 수 있다. 배열과 객체, 그리고 함수가 대표적이며, 원시타입과 가장 큰 차이점은 변수의 크기가 동적으로 변한다는 것입니다. 이러한 특징 때문에 Object의 데이터 자체는 별도의 메모리 공간(heap)에 저장되며, 변수에 할당 시 데이터에 대한 주소 (힙 메모리의 주소 값)가 저장되기 때문에 자바스크립트 엔진이 변수가 가지고 있는 메모리 주소를 이용해서 변수의 값에 접근하게 되는 것입니다.

 

원시타입끼리 데이터를 복사할 땐 문제가 없지만, 참조타입은 주소를 저장하기 때문에 저장하는 방식이 다릅니다.

차이를 알아보도록 하고 원하는 결과를 얻을 수 있게 케이스를 정리해보았습니다.

 

 

- 원시타입과 참조타입 선언하기

 

 

- 원시타입 값을 비교, 복사 후 비교하기

원시타입은 값을 복사 후 비교해도 같음을 확인할 수 있습니다.

 

 

- 참조타입 값을 비교, 복사 후 비교하기

object1에 key : 1, object2에 key : 1 값을 넣었지만 두 개의 값 비교는 false 나왔습니다. 주소 값이 다르기 때문에 false가 나왔습니다. 반면에 object3는 object1의 주소 값을 할당(복사)받았기 때문에 값이 같음을 확인할 수 있습니다.

 

 

- 참조변수 복사 후 값 변경하기

object3에 object1 주소 값을 할당 후 object3의 key 값을 변경시켰습니다. 주소 값이 같기 때문에 object1에도 변경이 됐음을 확인할 수 있습니다.

 

 

- 주소 할당이 아닌 새로운 주소를 할당 후 값 복사하기

const temp = ...object;

object2에 새로운 주소를 할당 후 ...object1을 통해 값만 복사했습니다. 그렇기 때문에 주소 확인에는 false가 나타납니다.

 

 

- 참조변수의 값을 비교하기

JSON.stringfy(object);

 

참조타입을 복사할 땐 새로운 주소를 생성 후 ...을 통해 값을 넣습니다. 이후 비교할 땐 JSON.stringfy를 통해 비교하시면 됩니다.

 

 

해당 프로젝트는 gitlab에 제공되고 있습니다.

https://github.com/JeongSeongSoo/vue-tistory

GitHub - JeongSeongSoo/vue-tistory

 

궁금하신 부분 또는 문제가 생긴 부분에 대해서 댓글 남겨주시면 빠르고 정확한 답변드리겠습니다.

 

안전을 지키는 방법 바통 SOS 77% 페이백 이벤트