11. 원시 타입과 객체 타입의 차이(콜스택과 힙)

👀  원시 타입과 객체 타입의 차이

원시 타입은 값을 콜 스택에 저장

객체 타입은 값을 힙에 저장

 

객체 타입은 콜스택의 value에 객체가 아닌 힙에 저장된 메모리주소를 저장한다.

---

좀 더 쉽게 풀기 (24.01 추가)

 

비트(bit)는 0과 1로 표현할 수 있고 고유의 식별자로 위치를 알 수 있다.

좀더 효율적으로 관리하기 위해 비트를 적당한 묶음으로 관리한게 바이트(byte).

 

1바이트에는 8개의 비트로 묶여있다.

그리고 1비트는 0,1 두가지로 표현할 수 있기 때문에

256개(2의 8승)값을 표현할 수 있다.

 

모든 데이터는 이렇게 바이트 단위의 식별자인 메모리 주소값을 통해서 구분하고 연결한다.

 

원시 타입 : number, string, boolean, undefined, null, symbol

참조 타입 : array, function, data, RegExp, Map, WeekMap, Set, WeekSet

 

공통점:

두 타입 다 변수의 값에 할당한 값이 저장된 데이터 공간의 주소값을 복제한다.

 

다른점:

원시 타입은 할당된 값이 저장된 데이터 공간의 주소값을 바로 복제하는 것이고,

참조 타입은 할당된 프로퍼티 값들이 저장된 데이터 공간의 주소값들을 묶음을 바라보는 주소값을 복제하는 것.

---

👀  원시 타입과 객체 타입의 차이 예시 - 불변값과 가변값

let age = 35;
let oldAge = age;
age = 36;

console.log(age); //35
console.log(oldAge); //36

const me = {
	name : ‘Kyle’,
	age : 35
};

const friend = me;
friend.age = 33;

console.log(friend); //{ name : ‘Kyle’, age : 33 }
console.log(me); //{ name : ‘Kyle’, age : 33 }

Age와 oldAge를 원시타입 Number로 할당을 했다면, 그리고 같은 숫자 35를 할당을 했다면!

이미 변수 age에서 35가 별도 메모리 공간에 저장되어 있기 때문에 그 값을 재활용해서

oldAge에 age와 같은 메모리주소를 변수값으로 저장한다.

그래서 두 변수 전부 같은 메모리 주소를 가지고있다.

그래서 그 메모리안에 들어있는 value35가 찍힌다.

 

만약 이때 age의 value를 36으로 변경하게 되면

별도의 데이터 메모리 공간에 36의 값이 없기때문에 0002의 공간을 만들어서 36을 저장한다.

그래서 변수 age값에 새로운 메모리주소 0002를 할당한다.

이때는 값이 다르기 때문에 서로 다른 메모리 주소를 바라보고 있다는것을 확인할 수 있다.

 

따라서 변수의 할당값을 변경했을때 기존에 바라보고 있던 주소의 값을 변경하는게 아닌

데이터 공간에 변경한 값이 있는지 찾은 후 있으면 그 주소값으로 변수의 값에 저장하고

없으면 다른 데이터 공간에 할당값을 저장하고 그 주소값을 변수의 값에 저장하기 때문

에 불변성을 갖는다고 한다.

이렇게 원시 타입은 불변성을 갖는다!

 

객체 타입으로 선언하면 원시형과는 조금 다르다.

 

객체의 변수(프로퍼티) 영역이 따로 존재한다.

 

me라는 변수에 name,age 항목이 담긴 객체를 선언해서 저장을 해주는데

콜스택의 value에는 객체를 저장하는게 아니라 힙에 저장되어 있는 객체의 주소값을 저장한다.

(보통 객체들은 힙에 저장을 한다.)

그리고 그 주소를 메모리주소에 연결시켜서 콜스택에서는 힙의 해당 객체주소를 바라보는것.

만약에 me객체의 age값을 33으로 바꾸면 어떻게 될까?

me의 age값만 33으로 변경해도 me와 friend 전부 같은 메모리 주소를 바라보고

있기때문에 두 변수의 객체 모두 age값이 33으로 변하게된다.

이것이 바로 객체의 얕은 복사!

 

위의 그림처럼 얕은 복사(Shallow Copy)란 객체를 복사할 때

원본 값과 복사된 값이 같은 참조(=메모리 주소)를 가리키는 것이다.

얕은 복사의 주의할 점은 원본의 불변성을 지켜줘야 된다는것!!(중요)

불변성을 지켜주지 못하면  다른 순수 함수에도 영향을 미친다.

 

반대로 객체의 깊은 복사는 새로운 메모리 공간을 확보해 완전히 복사하는 것을 의미한다.

그래서 복사한 객체의 값을 변경해도 원본과는 다른 메모리 공간을 바라보고 있기때문에

원본객체는 바뀌지 않는다.

 

객체의 얕은 복사는 Object.assign()을 사용하고

객체의 깊은 복사는 lodash JS라이브러리의 clonedeep을 사용하는것도 방법중 하나!