javascript 원시타입 참조타입에 따른 메모리 할당

원시타입, 참조타입 설명이 앞서 이 문제를 다루는 이유에 대해 말하자면 다음과 같다.

 

let arr = [1,2,3]

arr === [1,2,3]
//false

arr 변수에 배열 1,2,3을 담은 후,

변수 arr과 배열 [1,2,3]을 비교하면 false가 결과값으로 나온다.

분명 타입도 같고 배열 값도 같은데 왜 false인가.

 

이는 메모리의 주소값에 따른 차이다.

자세히 알아보겠다.

 

원시타입 (primitive type)과 참조타입(Reference type)

자바스크립트에 원시타입의 종류는 아래와 같다.

1. String

2. Number

3. Boolean

4. Bigint

5. undefined

6. Symbol

7. Null

 

그외에 모든 타입은 참조타입으로 봐도 무방하다.

 

 

원시타입의 특징은 아래를 보면 이해할 수 있다.

let og = 'hi'
let copy = og;
og = 'bye'

console.log(copy)
// 'hi'

og 변수에 'hi'를 담고 다시 copy 변수에 담는다.

그리고 다시 og 변수에 'bye'를 넣고 copy를 출력하면 결과값은 'hi'가 출력된다.

og 변수값을 재할당했는데 copy 변수는 변화가 없다.

 

그 이유는 그림으로 보면 이해가 쉽다.

코드캠프 강의

변수를 선언하게 되면 임시 메모리에 저장이 되는데 이 임시 메모리는 주소값을 가지고 있다.

위 그림에서 num 변수에 숫자 '12'는 202이라는 주소값에 담겨졌다. 참고로 12는 숫자이기 때문에 Number라는 원시타입에 속한다.

이때 copy 변수에 num을 담으면 '12'라는 숫자값을 복사하는 것이 아닌 202라는 메모리 주소값을 복사하게 된다.

 

 

 

 

코드캠프 강의

여기서 num 변수에 새로운 숫자 '15'을 대입하면 202 주소값에 덮어씌워지는 것이 아닌, 201이라는 새로운 주소값에 메모리가 할당된다. 그러면 copy는 202 주소값에 머무르게 되고 '12'라는 값을 가지고 있는다. 이는 원시타입의 불변성 때문이다. 

 

 

참조타입의 경우 아래와 같다.

참조 타입의 경우 임시 메모리의 원본 주소값을 한번 더 참조하여 담기 때문에 560이라는 새로운 주소값에 담기게 된다.

이것을 copy 변수에 origin을 담으면 201을 참조하는 560의 주소값을 복사하게 된다.

그리고 origin 변수에 변화가 생겨도 201 주소값이 변하지 않고 참조 주소값만 변경되기 때문에 copy와 origin 모두 같은 변화가 일어난다.

이는 참조타입에는 불변성이 없기 때문이다.

 

 

복잡한 개념이다 ㅠㅠ 강의를 여러번 반복해서 들으며 겨우 가닥을 잡았지만 정리하려고 하니까 너무 어렵다.

정리해두고 나중에 꺼내 봐야겠다.