코어 자바스크립트
책의 1장 데이터 타입 내용을 정리한 글이다.
여기서는 변수를 선언하는 방법이 아닌, 동작 원리를 알아보고자 한다. 우선 기본적인 변수 선언식을 예로 들어 살펴보자.
var a;
위의 코드를 말로 풀어쓰면 "변할 수 있는 데이터를 만든다. 이 데이터의 식별자는 a로 한다"가 된다. 변할 수 있는 데이터이니 선언할 때는 undefined이더라도 나중에 다른 값으로 바꾸면 된다. 이렇게 보면 변수란 결국 변경 가능한 데이터가 담길 수 있는 공간이라고 할 수 있다.
이를 바탕으로 컴퓨터가 위의 명령을 받아 메모리 영역에서 어떤 작업을 수행하는지를 표현하면 다음과 같다.
주소 ··· 1002 1003 1004 1005 ··· 데이터 이름: a
값:
위의 명령을 받은 컴퓨터는 메모리에서 비어있는 공간 하나를 확보한다. 임의로 1003번의 주소값에 저장되었다고 하면, 이 공간의 이름(식별자)을 a라고 지정한다. 여기까지가 변수 선언 과정이다.
이후에 사용자가 a에 접근하고자 하면 컴퓨터는 메모리에서 a라는 이름을 가진 주소를 검색해 해당 공간에 담긴 데이터를 반환할 것이다.
var a;
a = 'abc';
var a = 'abc';
선언과 할당을 두 문장으로 나누어 명령하든 한 문장으로 명령하든, 자바스크립트 엔진은 결국 같은 동작을 수행한다. 메모리에서 비어있는 공간을 확보하고 그 공간의 이름을 설정하는 선언 과정은 앞서 살펴본 것과 같다. 이어서 할당 과정을 살펴보자.
a라는 이름을 가진 주소를 검색해 그곳에 문자열 abc
를 할당하면 될 것 같지만, 실제로는 해당 위치에 문자열을 직접 저장하지는 않는다. 데이터를 저장하기 위한 별도의 메모리 공간을 다시 확보해서 문자열 abc
를 저장하고, 그 주소를 변수 영역에 저장하는 식으로 이루어진다. 이제부터 데이터 성질에 따라 변수 영역
, 데이터 영역
으로 구분지어 설명하겠다. (정식 명칭은 아니다)
변수 영역
주소 ··· 1002 1003 1004 1005 ··· 데이터 이름: a
값:@5004데이터 영역
주소 ··· 5002 5003 5004 5005 ··· 데이터 'abc'
왜 변수 영역에 값을 직접 대입하지 않고 굳이 번거롭게 한 단계를 더 거치는 걸까? 이는 데이터 변환을 자유롭게 할 수 있게 함과 동시에 메모리를 더욱 효율적으로 관리하기 위함이다.
만약 미리 확보한 공간 내에서만 데이터 변환을 할 수 있다면 변환한 데이터를 다시 저장하기 위해서는 확보된 공간을 변환된 데이터 크키에 맞게 늘리는 작업
이 선행돼야 할 것이다. 해당 공간이 메모리 상의 가장 마지막에 있었다면 뒤쪽으로 늘리기만 하면 되니까 어렵지 않지만 중간에 있는 데이터를 늘려야 하는 상황이라면? 해당 공간보다 뒤에 저장된 데이터들을 전부 뒤로 옮기고, 이동시킨 주소를 각 식별자에 다시 연결하는 작업을 해야한다. 결국 효율적으로 문자열 데이터의 변환을 처리하려면 변수와 데이터를 별도의 공간에 나누어 저장하는 것이 최적이다.
변수 영역
주소 ··· 1002 1003 1004 1005 ··· 데이터 이름: a
값:@5005데이터 영역
주소 ··· 5002 5003 5004 5005 ··· 데이터 'abc' 'abcdef'
문자열 'abc'의 마지막에 'def'를 추가하라고 하면 컴퓨터는 앞서 'abc'가 저장된 공간에 'abcdef'를 할당하는 대신 'abcdef'라는 문자열을 새로 만들어 별도의 공간(@5005)에 저장하고 그 주소를 변수 공간(@1003)에 연결한다. 반대로 'abc'의 마지막 'c'를 제거하라고 해도 새로 만든다.
기존 문자열에 어떤 변환을 가하든 상관 없이 무조건 새로 만들어 별도의 공간에 저장한다.