[자바스크립트] 데이터 타입 - 메모리와 데이터

minidoo·2020년 10월 28일
0

자바스크립트 / NodeJS

목록 보기
15/27
post-thumbnail

데이터 타입의 종류

  • 기본형(원시 타입, Primitive Type)
    숫자(Number), 문자열(String), 불리언(Boolean), null, undefined, 심볼(Symbol)
  • 참조형(Reference Type) : 객체(Object)
    배열(Array), 함수(Function), 날짜(Date), 정규표현식(RegExp), Map, WeakMap, Set, WeakSet

데이터 타입

메모리와 데이터

1바이트는 8개의 비트로 구성되어 있다.
1비트는 0과 1 두 가지 숫자로 표현되며, 1바이트는 256(2^8)개의 값을 표현할 수 있다.

자바스크립트는 다른 언어에 비해 상대적으로 메모리 관리에 대한 압박에서 자유로워졌다.
모든 데이터는 메모리 주솟값을 통해 서로 구분하고 연결할 수 있다.

식별자와 변수

변수변할 수 있는 무언가를 말한다. 여기서 '무언가'는 데이터이다.
식별자 는 어떤 데이터를 식별하는데 사용하는 이름, 즉 변수명이다.

변수 선언과 데이터 할당

var a;

변수를 선언하는 방법이다.
변할 수 있는 데이터를 만들며, 예시에서 식별자는 a 이다.

즉, 변수는 변경 가능한 데이터가 담길 수 있는 공간을 의미한다.

var a;			// 변수 a 선언
a = 'abc';		// 변수 a에 데이터 할당

var a = 'abc';		// 변수 선언과 할당을 동시에 표현

데이터는 성질에 따라 변수 영역데이터 영역으로 구분한다.
변수 영역에 값을 직접 대입하지 않는 이유는 데이터 변환을 자유롭게 할 수 있고, 메모리를 더욱 효율적으로 관리하기 위함이다.

1. 변수 영역에서 빈 공간 @1003을 확보한다.
2. 확보한 공간의 식별자(이름)을 a로 지정한다.
3. 데이터 영역의 빈 공간 @5004에 문자열 'abc'를 저장한다.
4. 변수 영역에서 a 식별자를 검색한다.
5. 저장한 문자열의 주소 @5004를 @1003의 공간에 대입한다.

var a;
a = 'abc';
a += 'def';

만약 이미 데이터가 할당된 변수에 새로운 값을 추가하면,
@5004의 값이 'abcdef'가 되는 것이 아니라 'abcdef'라는 문자열을 새로 만들어 별도의 공간(@5003)에 저장한다. 그리고 변수 영역의 값은 @5003을 바라보게 되는 것이다.

기본형 데이터와 참조형 데이터

불변값

변수(variable)와 상수(constant)를 구분하는 성질은 '변경 가능성'이다.
바꿀 수 있으면 변수, 바꿀 수 없다면 상수이다.
변수와 상수를 구분 짓는 변경 가능성의 대상은 변수 영역 메모리이다.
한 번 데이터 할당이 이뤄진 변수 공간에 다른 데이터를 재 할당할 수 있는지 여부가 관건이다.

반면, 불변성 여부를 구분할 때의 변경 가능성 대상은 데이터 영역 메모리이다.
기본형 데이터인 숫자, 문자열, boolean, null, undefined, Symbol은 불변값이다.

위의 예제에서 언급했듯이 'abc'와 'abcdef'는 같은 데이터 영역이 아닌 다른 영역에 존재한다.
식별자가 가리키는 데이터 영역이 바뀌었을 뿐, 데이터 영역 자체의 값은 변하지 않았다.

가변값

그렇다면 참조형 데이터는 모두 가변값일까?
기본적인 성질은 가변값인 경우가 많지만 설정에 따라 변경 불가능한 경우도 있고, 아예 불변값으로 활용하기도 한다.

var obj1 = {
    a: 1,
    b: 'b'
};

기본형 데이터와의 차이는 객체의 변수 영역이 별도로 존재한다는 것이다.
데이터 영역에 저장된 값들은 모두 불변값이지만, 변수 영역의 값에는 다른 값을 대입할 수 있다.
따라서 참조형 데이터는 불변하지 않다(가변값이다)라고 한다.

var obj1 = {
    a: 1,
    b: 'b'
};
obj1.a = 2;

console.log(obj1);		// { a: 2, b: 'b'}

객체 안의 식별자 a에 새로운 값을 할당하는 예제를 살펴보자.
데이터 영역은 불변한다. 따라서 @5003에 2가 대입되는 것이 아니라, 새로운 주소 @5005에 2가 저장된다.
그리고 @7103의 값은 @5005을 가리키게 되는 것이다.

즉, '새로운 객체'가 만들어진 것이 아니라 기존의 객체 내부의 값만 바뀐 것이다.

변수 복사 비교

1. 변수 복사 후, 객체 프로퍼티 변경 시

var a = 10;
var b = a;

var obj1 = { c: 10, d: 'ddd' };
var obj2 = obj1;

b = 15;
obj2.c = 20;

첫 번째 사진은 변수를 복사했을 때, 두 번째 사진은 객체 프로퍼티를 변경했을 때이다.
기본형의 경우 변수 영역이 바라보는 데이터 영역 자체가 달라진다. 따라서 a != b가 된다.
참조형의 경우 데이터 영역 @5002은 불변하고 변수 영역 @7103이 가리키는 데이터 영역이 바뀌었기 때문에 변수 영역 @1003과 @1004가 가리키는 데이터 영역은 @5002으로 변하지 않는다. 따라서 obj1 == obj2가 된다.

즉, 기본형은 주솟값을 복사하는 과정이 한 번만 이뤄지고, 참조형은 한 단계를 더 거치게 된다는 차이가 있다.

2. 변수 복사 후, 객체 자체를 변경

var a = 10;
var b = a;
var obj1 = { c: 10, d: 'ddd' };
var obj2 = obj1;

b = 15;
obj2 = { c: 20, d: 'ddd' }

객체 자체를 변경하면 변수 영역이 가리키는 데이터 영역 자체가 바뀐다.
또한 데이터 영역에 따라 객체의 변수 영역도 다른 곳을 바라본다.

따라서, 객체 복사 후 복사된 내부 프로퍼티만 변경하고 싶다면 객제 자체를 변경해야 한다.

참고 서적

코어 자바스크립트(Core JavaScript)
https://book.naver.com/bookdb/book_detail.nhn?bid=15433261

0개의 댓글