오늘 자바스크립트 Deep Dive라는 책을 읽었다.
너무 재미있고 상세한 책이었다.
우리가 늘 쓰던 변수가 이런 일을 하고 있었다니.
단순히 코드를 치는 것을 넘어
개념을 상세하게 설명해주니 좋다.
이는 꼭 기억해야 하니 기록으로 남기려고 한다.
변수
자바스크립트를 처음 배우는 사람이라면 가장 먼저 배우는 것이 ‘변수’다.
하지만 대부분 초보자를 위해 ‘변수’를 아주 쉽게 설명하려고 한다.
나도 멘토를 할 때 그랬었다.
그냥 ‘데이터를 담는 공간, 상자’라고 설명을 해줬다.
물론 틀린 말은 아니다.
쉽게 이해할 수 있으니까.
하지만 그 이후 변수에 대해 더 알아보지 않는 이상
변수가 어떻게 작동되고 있는지는 모른다.
왜냐하면 너무 간단하고 쉬우니까 다 안다고 넘어가기 때문이다.
변수란 무엇인가
우리가 사용하는 어플리케이션은 데이터를 입력 받고 출력하는 것이 기본 바탕이다.
변수는 이런 데이터를 관리하는 녀석이다.
여기 간단한 식이 있다.
10 + 20
우리는 사람이고, 공부를 했기에 각 숫자와 +기호의 의미를 알고 있다.
그래서 10, +, 20을 기억하고, 연산 결과인 30도 머릿속에 저장한다.
자바스크립트도 마찬가지로, 10, +, 20의 의미를 알고 있으며 이를 해석할 수도 있다.
우선 연산을 위해 피연산자인 10, 20을 기억하고, 해당 결과 값인 30을 메모리에 넣어 기억한다.
여기서 메모리는 데이터를 저장할 수 있는 메모리 셀(Memory Cell)의 집합체이다.
우리의 엑셀의 한 공간을 생각하면 된다.
셀 하나의 크기는 1바이트이다.
이해를 위한 사진이다.
초록색 공간이 하나의 셀이고,
저기 안에 데이터를 입력하면
해당 셀의 주소값인 A2에 데이터가 저장되는 것이다.
각 셀은 고유의 “메모리 주소(Memory Address)”를 갖고 있다.
이는 셀의 위치를 나타내고 있다.
만약 당신의 메모리 공간이 4GB라면 4,294,967,295개를 갖고 있는 것이다!
그 주소는 0x00000000 ~0xFFFFFFFF까지다.
우리가 할당하는 모든 데이터는
2진수로 처리된다. 숫자, 텍스트, 이미지, 동영상 등.
이 모든 것들이 2진수로 처리된다니 놀랍구려
자 컴퓨터는 연산을 끝내고 30을 저장했다.
하지만 우리는 이것을 재사용할 수 없다.
왜냐하면 어느 메모리 주소에 저장되어 있는지 모르기 때문이다.
30이 0x1236f1237에 있는지 0x27261764에 있는지 모르기 떄문에
해당 데이터에 우리는 접근할 수가 없다 ㅠㅠ
우리가 강제로 위와 같은 메모리 주소에 접근하면 매우 위험하다.
해당 메모리에 실제로 어떤 값이 할당되어 있는지 모르기 때문이다.
지구상에서 Aden이라는 사람의 집을 찾기 위해
이 집 저 집 쑤시고 다니는 것과 같다.
해당 집이 만약 대통령 집이라면 우리는 감옥에 갈 것이다.
그래서 위와 같은 행동은 자바스크립트에서 허용하지 않는다.
또한 우리의 코드 실행 결과는 매번
다른 메모리 주소에 할당이 되기 때문에
접근을 허용한다고 해도 숨박꼭질이 될 것이다.
그러기 위해 사용하는 것이 바로 “변수”이다 !
“변수”가 이렇게 놀라운 일을 하는 녀석이다!
“변수”는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체,
해당 메모리 공간을 식별하기 위핸 “이름”이다.
메모리 셀의 위치를 가르키는 상징적인 이름인 것이다.
우리는 이 변수를 통해 0x1231236와 같은 거지같은 곳을 찾아가 데이터를 확인할 수 있는 것이다.
1
let result = 10 + 20;
이렇게해서 30이라는 결과는 result라는 메모리 공간에 저장이 되고,
우리는 result라는 이름을 통해 해당 메모리 공간에 접근할 수 있게 된다.
변수란 무엇인가2
위에서 우리는 변수에 대해 깊게 배웠다.
잠시 물 한 잔 마시고 오자.
위에 있는 reuslt라는 변수는 실제로 30을 기억하는 것이 아니다.
메모리 주소를 기억하고 있는 것이다.
0x1376fF12와 같은 이름의 메모리 주소 말이다.
이 주소를 기억하고
해당 주소로 들어가서
해당 셀에 있는 30이라는 값에 접근하는 것이다.
우리는 지금까지 result가 30을 기억하는 줄 알았을 것이다.
이런 변수는 함수, 클래스에도 모두 포함된다.
변수 선언
아마 변수 선언하는 방식을 모르는 사람은 없을 것이다.
하지만 선언이 어떻게 이루어져 있는지는 모를 것이다.
우리가 변수를 선언해서 메모리 공간을 ‘확보’하고 ‘연결’하면
해당 메모리 공간은 ‘해제’되기 전까지 사용할 수 없도록 보호된다.
당신이 선언하고 있는 변수에 ‘확보’, ‘연결’, ‘해제’되는 과정이 있는 줄 몰랐죠?
우리는 var, let, const를 사용하는데
가장 먼저 var에 대해 알아보자.
1
var score;
우리가 변수를 선언하자마자
해당 메모리 공간에는 undefined라는 값이 암묵적으로 할당된다.
이렇게 undefined를 할당하는 이유는 기존 데이터를 초기화하는 과정이다.
이는 자바스크립트의 독특한 특징이다.
변수 선언은 아래의 2가지 행동을 거친다.
- 선언을 통해 자바스크립트 엔진에 변수를 등록한다.
- 해당 메모리 공간을 확보하고, undefined를 할당해서 초기화한다.
var 키워드는 위의 과정이 한 번에 진행된다.
let, const는 조금 다르니 나중에 알아보자.
초기화를 하는 이유는
기존에 다른 곳에서 사용했던 값이 남아 있을 수 있기 때문에
초기화를 하지 않으면 다른 값이 튀어나올 수 있기 때문이다.
변수 선언과 호이스팅
1
2
console.log(score);
var scroe
우리는 호이스팅에 대해 알고있다.
var, 함수 선언문과 같은 아이들은 자바스크립트 코드 최상단에 위치하는 것이다.
우리는 자바스크립트 코드가 한 줄씩 실행된다고 알고 있는데
어떻게 얘네들은 호이스팅이 되는 것일까?
우선 자바스크립트가 코드를 실행은 2가지 과정이 있다.
- 런타임
- 소스코드 평가 과정
런타임은 우리가 아는 한 줄씩 실행하는 것이고
평가 과정은 런타임 이전에 모든 선언문을 찾아 먼저 실행하는 것이다.
그 이후 런타임이 진행된다.
값의 할당
1
2
3
4
var score = 80;
var scroe;
score = 80;
위에처럼 선언과 할당을 동시에 해도
실제 자바스크립트는 아래처럼 두 번의 단계로 나눠서 실행한다.
이 말은 선언과 할당이 동시에 이루어지는 것이 아니라는 점.
선언은 소스코드 평가 과정에서 실행이 되고
할당은 런타임 때 실행이 된다.
그러면 위에서 배웠듯이 선언을 하는 순간 undefined로 할당이 되고
다시 80이라는 값으로 재할당이 되는 것이다.
그런데 여기서 80이라는 재할당은
undefined가 위치한 곳에 들어가는 것이 아니라
아이에 새로운 메모리 공간을 확보하고 그 값에 80을 저장한다.
우리가 재할당을 할 떄마다
새로운 메모리 공간을 차지하게 된다.
그러면 이전에 저장됐던 곳에 있는 데이터는 더이상 사용하지 않게 된다.
이런 쓸모 없는 값들은 가바지 콜렉터에 의해 메모리에서 자동 해제된다.
여기까지 변수에 대해 알아보았다.
우리가 매일 쓰는 변수이지만
이런 놀라운 과정들을 통해 우리의 데이터가 저장이 된다는 점.
이렇게 또 지식이 늘었다.
굳!!