[자바스크립트] 원시 값과 객체 값

박지원·2023년 3월 16일

1차 스터디

목록 보기
4/13

▷ 원시타입과 객체타입

이전 포스트에서 자바스크립트는 무슨 타입 언어인지, 그리고 자바스크립트에서 제공하는 데이터 타입 중에서 원시타입으로 정의된 타입 몇 개를 소개했다. 그거 말고는 자세히 설명한 부분이 없어서 조금 추가해 본다.

자바스크립트 데이터 타입은 원시 타입객체 타입으로 나눌 수 있다. 먼저 원시 타입은 숫자, 문자열, 불리언, 널, 언디파인드, 심벌까지 6개의 타입으로 이루어져 있고, 객체타입에는 객체, 함수, 배열이 있다.

이어서 타입을 원시 타입과 객체 타입으로 나눈 이유를 표로 정리해 보았다.


▷ 값의 변경, 그리고 할당 시 참조 값이란?

여기서 원시 타입인 값을 원시 값, 객체 타입인 값을 객체 값이라고 부른다.

< 원시 값과 객체 값의 비교 표 >

값의 변경할당 시 변수가 가리키는 메모리에 저장되는거복사 시 전달되는거
원시 값블가능원시 값원시 값
객체 값가능참조 값(객체가 저장된 메모리의 주소값)참조 값(객체가 저장된 메모리의 주소값)

1. 원시 값

위의 표에서 원시 값을 예로 들었을때, 값을 변경할 수 없다는 뜻이 무엇일까?
먼저 var키워드를 사용한 변수가 10으로 초기화되는 과정을 머릿속에 그려보자.

var키워드를 사용한 변수는 런타임 이전에 메모리 중 임의의 공간에서 undefined로 초기화되고, 런타임시에 10undefined다른 공간에 다른 주소값으로 저장되어진다.

이는 결국 undefined에서 10으로의 재할당을 의미한다.

이 얘기를 적은 이유는 원시 값의 변경은 오직 재할당으로 밖에 할 수 없다는 뜻이다. 같은 주소를 가진채로 undefined에서 10만 바뀌지는 않는다는 말이다.

따라서 원시 값의 변경은 재할당이 불가피하고, 결국 재할당 시 변수가 참조하는 원시 값은 재할당 전의 원시 값과는 별개의 값이기 때문에 불가능한 것이다.

	  변수의 입장에서는 값이 바뀐 것이 맞지만, 원시 값 입장에서는 자기 자신이 바뀐게 아님

2. 객체 값

반면에 객체 값은 변경할 수 있다.

위의 표에서 객체 할당시 메모리에 저장되는 것참조 값이라고 했는데 참조 값은 무엇일까?

이번에는 위의 'var키워드 초기화 예시' 에서 10을 객체 값으로 바꿔보자

그러면 해당 변수는 실제 객체 값이 저장되어져 있는 메모리 공간의 주소값이 저장된 메모리 공간의 주소를 가리키게 된다.

변수가 직접 10이 저장된 메모리 공간의 주소를 가리키는 원시 값의 경우와는 다른 결과이다.

다시 정리하면 변수가 직접 가리키는 메모리 공간에, 객체 값이 저장된 메모리의 주소가 저장된다는 뜻이다.

이제 우리는 '객체 값이 저장된 메모리의 주소''객체를 참조하는 주소 값' 으로 해석하고, 이를 참조 값 이라고 부르면 된다.

따라서 객체 값의 변경은 재할당이 필요 없기 때문에 객체를 할당한 변수의 참조 값이 변경되지 않아서 가능한 것이다.

					    객체 값은 원래 메모리 공간 유지하고 값만 바뀜

▷ 값의 복사

1. 객체 값

새로운 변수에 객체 값이 할당된 변수를 할당하는 상황이다.

이 경우에는 참조 값이 복사되어 새로운 변수에 할당되고, 복사된 참조 값 역시 기존의 동일한 객체 값을 참조한다.

따라서 두 개의 변수가 하나의 객체를 공유하게되고, 두 변수 중 하나에서 해당 객체의 프러퍼티 값을 수정하더라도 동시에 적용된다.

이를 얕은 복사라고 한다.

반대 개념인 깊은 복사는 n개의 변수만큼 n개의 객체가 복사되는 거라서 객체를 수정하는 경우에 복사된 모든 객체들이 동시에 적용되지 않는다.

깊은 복사와 얕은 복사는 나중에 따로 자세히 다뤄볼 예정이다.

얕은 복사 : 객체 할당된 변수를 할당
깊은 복사 : 스프레드 문법으로 할당 (1뎁스 한정)


▷ 새롭게안거

문자열도 원시 타입이다. 하지만 이런 개념을 알기 전에 코딩테스트 문제를 풀면서 궁금했지만 그냥 넘어갔던 상황이 있었다. 문자열도 배열처럼 .length 프러퍼티를 쓸 수 있고, str.[0]과 같이 인덱스 접근이 가능한데 str.[0] 값을 직접 변경할 수 없던 점이었다. 이제는 문자열이 원시 값이라서 변경할 수 없다는 사실을 알았기 때문에 이런 의미없는 짓은 더욱 안할 것 같다.

profile
NodeJS 백엔드

0개의 댓글