[모던 자바스크립트 딥다이브]_원시 값과 객체의 비교 어디까지 보고 오셨어요?

원시값

우리는 지난 시간에서 원시값은 변하지 않는 불변의 값이라고 배웠습니다.

자바스크립트에서 변수에 원시값을 할당을 하게 된다면

원시값에 해당하는 메모리를 확보하고

그곳에 원시값을 저장한 뒤

변수에는 메리의 주소를 연결시키겠죠.

...
1000	주소
...
x = 1000 (주소)
...

x라는 변수에 1000 값을 할당하려면

1000에 해당하는 메모리를 확보한 뒤

이 메모리의 주소를 변수에 연결하는 것입니다.

 

하지만 자바스크립트에서는 값을 재할당 할 수가 있는데

이는 어떻게 가능할까요?

...
1000	주소
60	주소
...
x= 60 (주소)
...

이렇게 새로운 메모리를 확보하고 다시 주소를 변수에 연결하는 것입니다.

이렇게 우리는 이해하고 넘어가면 되겠습니다.

 

그럼 또 다른 상황을 예제로 살펴보겠습니다.

만약 y에 x라는 변수를 할당하게 되면 어떻게 될까요?

60이라는 원시값의 주소가 연결되는 것일까요?

...
1000	주소
60	주소
60	주소
...
x = 60 (주소)
y = x (주소)
...

위의 메모리에서도 볼 수 있 듯 x 변수에 연결된 주소를 그대로 y에 연결시키지는 않고

다시 메모리를 확보하고 복사된 값 주소를 y에 연결합니다.

그래서 x의 값이 바뀌더라도 y의 값은 바뀌지 않습니다.

 

객체

객체는 자바스크립트의 원시값을 제외한 모든 것들이라고 할 수 있습니다.

함수, 배열 등도 다 객체타입의 한 종류 입니다.

 

객체는 원시값과는 다르게 그 값을 변경할 수 있습니다.

const foo = {
    name = 'kim',
    age = 30
}

...
{ name : 'kim', age : 30 }	주소
...
foo (주소)
...

이 코드블럭과 메모리 모형을 확인해보면 객체타입으로서 하나의 메모리를 확보하고 저장되는 것을 볼 수 있습니다.

따라서 우리는 객체값에 접근할 때 타입자체는 변경할수 없고, 그 안에 있는 값들을 변경할 수 있습니다.

const foo = {
    name = 'kim',
    age = 30
}

foo.name = 'park'

...
{ name : 'park', age : 30 }	주소
...
foo (주소)
...

이렇게 객체타입은 변경하지 않고 그 안에 있는 값들에 접근하여 변경할 수 있습니다.