🦴 JS 타입 종류 (원시 타입, 참조 타입?)

오늘은 정말 널리 알려져있고 중요한 Javascript의 타입 종류를 알아보겠습니다.

let arr = [1, 2, 3, 4, 5];
let arr2 = arr;
arr[0] = 10;

console.log(arr2);

 

위 console.log의 값은 뭘까요? 정답은 [1, 2, 3, 4, 5]입니다.

혹시라도 [10, 2, 3, 4, 5] 일 수 있지 않나?라는 생각이 든다면

이번 글 잘 읽어주세요!

 

❓ 원시 타입?

원시? 저는 처음 들을 때 뭔가 고대적인 느낌이 났는데요..ㅎ JS의 원시 타입이란

실제 데이터 값을 저장하고 저장된 값을 변수가 직접적으로 가리키는 형태의  타입입니다.

종류로는 string, number, boolean 등 JS의 기본 데이터 타입들이 원시 타입에 해당합니다.

또한 원시 타입은 불변성이란 특성을 가지고 있습니다.

 

그래서 원시 타입으로 선언한 변수에 재할당이 이루어졌을 때 새로운 메모리에 재할당한 값이

저장되고 변수가 가리키는 메모리만 달라진다는 것입니다!

 

저장된 메모리에 값이 변하는 것이라고 착각할 수 있습니다. 저도 새로운 메모리 공간을

만든다는 것을 얼마 전까진 몰랐습니다..

 

글로는 이해가 안 되실 수 있습니다! 그림으로 봐볼까요?

 

a라는 변수에 재할당이 일어났을 때 상황입니다. 저장된 메모리의 값을 변경시키지 않고

새로운 공간을 만들고 값을 저장하죠? 그러면 다음 코드의 결과는 어떨지 확인 해 보겠습니다.

let a = 100;
let b = a;
a = 50;

console.log(b);

 

이때 b의 값은 100입니다. 왜냐하면 원시 타입이기 때문에 변수 b는 새로운 메모리에

저장된 값을 가리킵니다. 그래서 변수 a에 재할당이 이루어져도 b에는 절대로!

영향을 끼칠 수 없습니다.

 

그림으로 보니 이해가 더 잘 되는 것 같습니다!

 

그럼 다음 참조 타입은 예상되시나요?

 

❓ 참조 타입?

참조 타입 참조 타입의 종류는 원시 타입의 종류를 제외한 함수, 배열, 객체가

참조 타입에 해당합니다. 원시 타입과 차이점은 변수의 크기가 동적으로 변한다는 것입니다.

동적으로 변하기에 참조 타입은 stack에 값을 직접 저장하지 않고 주소를 저장하며 실제 값은

Heap이라는 메모리 공간에 저장됩니다. 그래서 원시 타입과 달리 변수가 가지고 있는

메모리 주소를 통해 변수의 실제 값에 접근합니다.

 

 

위 내용을 보니 맨 처음 보여드린 코드의 결과가 이해되시나요? 다시 봐보겠습니다.

let arr = [1, 2, 3, 4, 5];
let arr2 = arr;
arr[0] = 10;

console.log(arr2); // [10, 2, 3, 4, 5]

 

arr이라는 변수는 값이 아닌 자신의 주소를 저장합니다. arr2란 변수는 arr의 주소를

가지고 있구요. 그러니 arr의 값을 바꾸면 같은 주소를 바라보고 있는 arr2의 값도 자연스레

바뀌죠. 만약 arr2의 값을 바꾸고 arr을 확인하면 똑같이 바껴있을 겁니다!

 

🚨 const 

위에서는 제가 let을 이용해 배열 변수를 선언했습니다. 근데 사실 저 코드는 const를 사용해도 동작합니다!

만약 참조 타입에 대한 지식이 없었으면 저희는 이런 의문을 가질 것입니다.

 

"const는 변하지 않는 상수를 선언할 때 사용하는데?"

 

아래 코드를 살펴볼까요?

const arr = [1, 2, 3, 4, 5];
arr.push(6);

console.log(arr); // [1, 2, 3, 4, 5, 6]

 

위 의문을 가지더라도 코드는 문제 없이 동작합니다!

 

Array.push() 메서드가 작동하는 이유는 const로 선언된 배열이 가리키는 주소 값은 고정이기에

push로 배열의 길이를 늘리든 index로 접근해서 내부 요소를 변경시키든 배열 내부의 요소를

변경시키는 것은 가능하기 때문입니다.

 

그렇다고 이것도 될까요? ㅎ..

const arr = [1, 2, 3, 4, 5];
arr = [6, 7, 8];

 

이건 배열 내부를 변경시키는 것이 아닌 아예 새로운 메모리 주소를 할당시키는 작업이기 때문에

여기선 오류가 발생합니다.

📖 마무리

원시 타입과 참조 타입의 개념도 몇 달전에는 알지 못 했습니다. 그래서 처음 코드에서

저의 답변은 오답이었죠..ㅎ 역시 어떤 언어를 하든 기본부터 자세히 알아야 개발에서

빛을 발하는 것 같습니다.

 

🔗 Ref

https://velog.io/@nomadhash/Java-Script-%EA%B9%8A%EC%9D%80-%EB%B3%B5%EC%82%AC%EC%99%80-%EC%96%95%EC%9D%80-%EB%B3%B5%EC%82%AC

https://velog.io/@gillog/%EC%9B%90%EC%8B%9C%ED%83%80%EC%9E%85-%EC%B0%B8%EC%A1%B0%ED%83%80%EC%9E%85Primitive-Type-Reference-Type