원시 값 && 참조 값

JavaScript에서 원시 값(primitive, 또는 원시 자료형)이란 객체가 아니면서 메서드도 가지지 않는 데이터입니다. 원시 값에는 7종류, string, number (en-US), bigint (en-US), boolean, undefined, symbol, 그리고 null이 존재합니다.

 

https://developer.mozilla.org/ko/docs/Glossary/Primitive

원시 값 - 용어 사전 | MDN

 

???

사람눈에는 모두 똑같이 보이지만 자바스크립트는 아니라고한다. 왜 그럴까?

 

이 둘의 차이는 메모리 관리에 있다.

 

자바스크립트에서는 속성이나 변수에 할당한 값은 메모리에 저장해야한다.

 

자바스크립트에는 stack이랑 heap이라는 2가지 타입의 메모리를 알고있고,

 

stack은 쉽게 접근 할수 있는 메모리로 간단한 item들을 관리할수있다. -> 이미 크기를 알고있는 알고있는 아이템(숫자,문자,불리안)만 stack에 들어갈 수 있다.

 

heap은 크기나 구조를 미리 결정할 수 없는 item이 메모리에 들어간다. 실행중에 바뀌고, 변형되는 것들이 heap에 들어간다.

아래 사진을 보면 차이점을 알수있다.

 

각 Heap 값들의 주소는 힙의 항목을 가리키는 포인터에 저장되고 그 포인터들은 스택에 저장된다.

 

왜 원래있던 dog객체의 name까지 바뀌었을까???

 

그것은 참초 타입(객체,배열)의 pointer만 스택에 저장되기 때문이다.

그래서 위에 newDog는 dog 자체를 복사한것이 아닌, 포인터만 복사하였고 이 포인터는 같은 주소를 가리키기에 newDog의 name은 vi를 가리키고 있었고 이것을 hi로 바꾸니깐 원래 dog의 이름도 바뀐것이다. 

위와 같은 원리다.

만약 배열이나 객체가 같은 메모리에 같은 위치를 가리키고 있다면 두개의 객체나 배열은 같다고 간주한다.

예시)

 

그러면 어떻게 복사해야하나

방법은 많고 그중에 대표적인 2가지만 뽑자면slice()나 ...연산자를 활용하면 된다.

이 개념들은 공식문서에 자세하게 나와있으므로 설명은 생략하겠다.

 

객체는 Object.assign를 활용하거나 {...객체이름}을 해주면 된다.

 

하지만 중첩되어있는 객체,배열/ 다른 속성( 다른 객체,배열)을 가지고 있다면 그것들까지는 복제되지 않고 포인터만

남는다. < 나중에 또 공부하자 >

 

 

https://academind.com/tutorials/reference-vs-primitive-values

Reference vs Primitive Values

 

 

 

https://redux.js.org/usage/structuring-reducers/immutable-update-patterns#immutable-update-patterns

Immutable Update Patterns | Redux