JavaScript 데이터 타입 3편

김예진·2021년 2월 11일
0

Core JavaScript

목록 보기
3/7
post-thumbnail

코어 자바스크립트 책의 1장 데이터 타입 내용을 정리한 글이다.

변수 선언과 데이터 할당

변수 선언

여기서는 변수를 선언하는 방법이 아닌, 동작 원리를 알아보고자 한다. 우선 기본적인 변수 선언식을 예로 들어 살펴보자.

var a;

위의 코드를 말로 풀어쓰면 "변할 수 있는 데이터를 만든다. 이 데이터의 식별자는 a로 한다"가 된다. 변할 수 있는 데이터이니 선언할 때는 undefined이더라도 나중에 다른 값으로 바꾸면 된다. 이렇게 보면 변수란 결국 변경 가능한 데이터가 담길 수 있는 공간이라고 할 수 있다.

이를 바탕으로 컴퓨터가 위의 명령을 받아 메모리 영역에서 어떤 작업을 수행하는지를 표현하면 다음과 같다.

주소···1002100310041005···
데이터이름: a
값:

위의 명령을 받은 컴퓨터는 메모리에서 비어있는 공간 하나를 확보한다. 임의로 1003번의 주소값에 저장되었다고 하면, 이 공간의 이름(식별자)을 a라고 지정한다. 여기까지가 변수 선언 과정이다.
이후에 사용자가 a에 접근하고자 하면 컴퓨터는 메모리에서 a라는 이름을 가진 주소를 검색해 해당 공간에 담긴 데이터를 반환할 것이다.

데이터 할당

var a;
a = 'abc';

var a = 'abc';

선언과 할당을 두 문장으로 나누어 명령하든 한 문장으로 명령하든, 자바스크립트 엔진은 결국 같은 동작을 수행한다. 메모리에서 비어있는 공간을 확보하고 그 공간의 이름을 설정하는 선언 과정은 앞서 살펴본 것과 같다. 이어서 할당 과정을 살펴보자.

a라는 이름을 가진 주소를 검색해 그곳에 문자열 abc를 할당하면 될 것 같지만, 실제로는 해당 위치에 문자열을 직접 저장하지는 않는다. 데이터를 저장하기 위한 별도의 메모리 공간을 다시 확보해서 문자열 abc를 저장하고, 그 주소를 변수 영역에 저장하는 식으로 이루어진다. 이제부터 데이터 성질에 따라 변수 영역, 데이터 영역으로 구분지어 설명하겠다. (정식 명칭은 아니다)

변수 영역

주소···1002100310041005···
데이터이름: a
값:@5004

데이터 영역

주소···5002500350045005···
데이터'abc'

데이터 할당의 전체적인 흐름은 다음과 같다.
  1. 변수 영역에서 빈 공간(@1003)을 확보한다.
  2. 확보한 공간의 식별자를 a로 지정한다.
  3. 데이터 영역의 빈 공간(@5004)에 문자열 'abc'를 저장한다.
  4. 변수 영역에서 a라는 식별자(@1003)를 검색한다.
  5. 앞서 저장한 문자열의 주소(@5004)를 @1003의 공간에 대입한다.

왜 변수 영역에 값을 직접 대입하지 않고 굳이 번거롭게 한 단계를 더 거치는 걸까? 이는 데이터 변환을 자유롭게 할 수 있게 함과 동시에 메모리를 더욱 효율적으로 관리하기 위함이다.

만약 미리 확보한 공간 내에서만 데이터 변환을 할 수 있다면 변환한 데이터를 다시 저장하기 위해서는 확보된 공간을 변환된 데이터 크키에 맞게 늘리는 작업이 선행돼야 할 것이다. 해당 공간이 메모리 상의 가장 마지막에 있었다면 뒤쪽으로 늘리기만 하면 되니까 어렵지 않지만 중간에 있는 데이터를 늘려야 하는 상황이라면? 해당 공간보다 뒤에 저장된 데이터들을 전부 뒤로 옮기고, 이동시킨 주소를 각 식별자에 다시 연결하는 작업을 해야한다. 결국 효율적으로 문자열 데이터의 변환을 처리하려면 변수와 데이터를 별도의 공간에 나누어 저장하는 것이 최적이다.

변수 영역

주소···1002100310041005···
데이터이름: a
값:@5005

데이터 영역

주소···5002500350045005···
데이터'abc''abcdef'

문자열 'abc'의 마지막에 'def'를 추가하라고 하면 컴퓨터는 앞서 'abc'가 저장된 공간에 'abcdef'를 할당하는 대신 'abcdef'라는 문자열을 새로 만들어 별도의 공간(@5005)에 저장하고 그 주소를 변수 공간(@1003)에 연결한다. 반대로 'abc'의 마지막 'c'를 제거하라고 해도 새로 만든다.
기존 문자열에 어떤 변환을 가하든 상관 없이 무조건 새로 만들어 별도의 공간에 저장한다.



이번 편에서는 JavaScript에서 변수를 선언하고 할당하는 경우 메모리에서 어떻게 동작하는지 살펴봤다. 다음 편에서는 불변성을 주제로 기본형 데이터와 참조형 데이터에 대해 알아볼 것이다.

0개의 댓글

관련 채용 정보