3. 변수 선언과 데이터 할당
변수 선언의 동작 원리
변수란 뭘까?
지난 시간에 잠깐 언급했듯, 변할 수 있는 데이터를 의미한다.
즉, 변경 가능한 데이터가 담길 수 있는 그릇이라고 생각하면 된다.
이 그릇에 숫자를 담았다가 문자열을 담는 등의 행동을 하면 되는 것이다.
자바스크립트에서 변수는 다음과 같이 선언한다.
var a;
위의 코드는 "변할 수 있는 데이터를 만들 것인데, 이 데이터의 식별자는 a로 합니다." 라는 의미이다.
변할 수 있는 데이터이기 때문에, 선언시에 undefined 이더라도 나중에 다른 값으로 바꾸면 된다.
그럼 컴퓨터는 자바스크립트에서 선언된 명령을 어떻게 수행할까? 컴퓨터의 변수 선언 과정을 살펴보자.
주소 | 1002 | 1003 | 1004 | .... |
데이터 | 이름: a 값: |
명령을 받은 컴퓨터는 메모리에서 비어있는 공간 하나를 확보한다.
임의로 1003이라는 주소에 할당되었다고 하자. 이 공간의 이름(식별자)을 a라고 지정한다.
이후에 사용자가 a에 접근하고자 하면, 컴퓨터는 메모리에서 a라는 이름을 가진 주소를 검색해 해당 공간에 담긴 데이터를 반환한다.
데이터 할당
위에서 선언을 알아보았다.
그러면 할당은 무엇일까?
할당은 a라는 이름으르 가진 주소를 검색해서 그곳에 문자열 'abc'를 주는 과정이다.
var a; //변수 a선언
a = 'abc'; //변수 a에 데이터 할당
var a = 'abc'; //변수 선언과 할당을 한 문장으로 표현
선언과 할당을 1,2번째 줄과 같이 두 문장으로 나누어 명령하는 것과
4번째 줄과 같이 한 문장으로 명령하는 것 모두
어처피 자바스크립트 엔진에서 같은 동작으로 수행한다.
사실 해당 위치에 문자열 'abc'를 직접 저장하지는 않고,
데이터를 저장하기 위한 별도의 메모리 공간을 다시 확보해 문자열 'abc'를 저장하고, 그 주소를 변수 영역에 저장하는 방식으로 이루어진다.
그 흐름은 다음과 같다.
변수 영역 | 주소 | 1002 | 1003 | 1004 | ... |
데이터 | 이름: a 값: @5004 |
||||
데이터 영역 | 주소 | 5002 | 5003 | 5004 | .... |
데이터 | 'abc' |
- 변수 영역에서 빈 공간 @1003을 확보한다.
- 확보한 공간의 식별자를 a로 지정한다.
- 데이터 영역의 빈 공간(@5004)에 문자열 'abc'를 저장한다.
- 변수 영역에서 a라는 식별자를 검색한다(@1003)
- 앞서 저장한 문자열의 주소(@5004)를 @1003의 공간에 대입한다.
그러면 왜 이렇게 번거로운 단계를 거치는 것일까? 바로 대입하면 더 쉽지 않나?
이는 데이터 변환을 자유롭게 할 수 있게 함과 동시에 메모리를 더욱 효과적으로 관리하기 위함이다.
자바스크립트에서는 각 데이터에 가변적으로 메모리 용량을 확보한다.
숫자형 데이터에 64비트(8바이트)의 공간을 확보하고, 영어는 1바이트, 한글은 2바이트 이런 식으로.
만약 미리 확보한 공간 안에서만 데이터 변환을 한다면,
변환된 데이터를 다시 저장하기 위해서는 확보된 공간을 변환된 데이터 크기에 맞게 늘리는 작업이 필요하다.
중간에 있는 데이터를 늘려야 한다면, 그 뒤에 저장된 데이터들은 모두 뒤로 옮겨지고,
이동시킨 주소를 각 식별자에 다시 연결하는 비효율적인 작업이 진행되어야 한다.
따라서 효율적인 문자열 데이터 변환을 처리하기 위해서는,
변수와 데이터를 별도의 공간에 나누어 저장하는 것이 최적의 선택이었던 것이다.
문자열 'abc'의 마지막에 'def'를 추가하려고 하면, 컴퓨터는 앞서 'abc'가 저장된 공간에 'abcdef'를 할당하는 대신, 'abcdef'라는 문자열을 새로 만들어 별도의 공간에 저장한다.
(반대로 'abc'에서 'c'를 제거하라고 하더라도 새로 만든다.)
변수 영역 | 주소 | 1002 | 1003 | 1004 | ... |
데이터 | 이름: a 값: @5005(변경됨) |
||||
데이터 영역 | 주소 | 5002 | 5003 | 5004 | 5005 |
데이터 | 'abc' | 'abcdef' |
'자바스크립트 공부하기' 카테고리의 다른 글
[코어자바스크립트] 1단원 정리 (0) | 2021.05.11 |
---|---|
[코어자바스크립트] 6.undefined와 null (0) | 2021.05.11 |
[코어자바스크립트] 5.불변 객체 (0) | 2021.05.11 |
[코어자바스크립트] 4.기본형 데이터와 참조형 데이터 (0) | 2021.05.11 |
[코어 자바스크립트] 1-1 데이터 타입의 종류 (0) | 2021.05.08 |