What is the variable?
프로그래밍의 시작은 무엇일까요. 코드를 작성 할 때 가장 먼저 하는 일은 '변수'를 선언 하는 것입니다.
가장 먼저 하는 일인 만큼 변수는 코딩에서 아주 중요한 존재입니다.
하지만 변수 없이 코딩이 가능한가라고 묻는다면, 답은 'YES'입니다.
이 이유에 대한 증명은 변수와 메모리가 어떤 관계가 있는지 알 수 있습니다.
var variable = 10;지금은 거의 사용하지 않지만 과거 자바스크립트에서 쓰던 변수 선언입니다.
변수를 선언하고, 값을 할당 하면 변수와 그 값은 컴퓨터 어디에 있을까요?
정답은 메모리 입니다.
Memory?
구체적으로, 변수 뿐만 아니라 프로그래밍에 대한 모든 것은 메모리를 사용합니다.
메모리는 1바이트로 이뤄진 셀의 집합체이고, 각 셀은 고유 주소값을 가집니다.
메모리 주소는 해당 공간의 위치를 담고 있는 정보라고 생각하시면 됩니다. 주소들은 우리가 알기 쉽게 0부터 메모리 크기만큼 정수로 표현이 됩니다.
[ex]
예를 들어 4GB 메모리라면 0x00000000 ~ 0xffffffff으로 표현 됩니다.
위에 선언한 변수의 값이 0x0000 메모리에 저장 됐다고 생각해보겠습니다.
variable에 새로운 값을 대입 할 때마다 0x0000의 값은 변할 것입니다.
변수는 어떤 메모리 주소에 값을 저장하기 위해 각 메모리 주소를 식별하기 위해 부르는 명칭입니다.
사실 자바스크립트는 같은 메모리에 값을 대입하지 않습니다... 새 값을 대입 하면 새로운 메모리에 variable의 값이 들어가고 기존에 있던 메모리는 가비지 컬렉터가 메모리를 해제합니다. 신기한 자바스크립트?
다시 첫 물음으로 돌아가, 변수 없이 코딩이 가능한가에 답을 정리 하겠습니다.
변수는 사람이 메모리 주소를 식별하기 위해 부르는 명칭이므로 없어도 됩니다.
하지만 절대 변수 없이 코딩을 하면 안됩니다. 사람은 메모리에 정확히 어떤 값들이 들어있는지 전부 파악 할 수 없기 때문입니다.
메모리는 os에 필요한 데이터가 들어 있고, 시스템에서 사용되는 우리가 알지 못하는 데이터들이 무수히 많습니다.
이런 정글같은 메모리 세계에서 길을 잃지 않고 코딩을 할 수 있는게 변수입니다.
그래서 이 책에서도 변수를 가장 먼저 독자들에게 알려주고 싶었나 봅니다.
Declaration & allocate
'선언'은 변수를 생성한 것입니다. 메모리와 연관지어 설명 한다면, 변수의 이름과 해당 메모리 주소 공간을 연결해서 값을 저장할 수 있게 준비하는 것을 의미 합니다.
당연한 이야기지만 변수를 사용하려면 선언을 해야합니다.
그런데 자바스크립트는 이상한 언어입니다.
선언을 먼저 하지 않아도 변수를 사용할 수 있습니다.
console.log(check) --- 1
var check = 10 --- 2
console.log(check) --- 31번과 3 번은 어떤 값을 출력 하는지 찍어보세요. 놀라운 결과가 도출됩니다.
답을 말씀드리면, 1번은 undefined, 2번은 10이 출력 됩니다.
이유는 소스코드 평가 과정과 호이스팅 현상 입니다.
소스코드 평가 & 호이스팅
자바스크립트 코드를 실행 하면 자바스크립트 엔진은 우리의 소스코드를 한 줄씩 실행 하기 전, 소스코드 평가 과정을 거칩니다.
이 때 자바스크립트 내부에 어떤 위치에 있던간에 모든 선언문들을 먼저 실행해 변수를 선언합니다.
이후에 순서대로 코드를 실행하며, 초기화 단계를 거쳐 변수에 값을 할당합니다.
이처럼 자바스크립트 내 선언문이 코드의 가장 위로 올라온 것처럼 동작하는 개념을 호이스팅 이라 합니다.
소스코드 평가와 자바스크립트 엔진에 대해서는 23장에서 더 자세하게 다루겠습니다.
선언
지금까지 var을 이용해 변수를 선언했습니다.
하지만 var는 es6 이후부터는 거의 사용하지 않습니다.
일단 var는 쓰레기 입니다.
- 아무곳이나 변수를 선언해도 전부 선언 가능
- 변수명 똑같이 선언 가능
- 은닉성 제로
var는 scope를 무시 하기 때문에 인간의 실수를 유도하는 선언 방식입니다.
다행스럽게 es6부터는 const, let을 이용하기 때문에 var가 가진 단점들을 처리할 수 있게 됐습니다.
할당
소스코드 평가 과정을 통해 변수들을 미리 선언 했습니다.
선언을 했으면 할당을 해야겠지요? 하지만 자바스크립트에서는 자바스크립트 엔진이 변수를 선언하면 다른 곳에서 볼 수 없는 특이한 데이터를 할당합니다.
undefined
1번에서 보였던 undefined 입니다.
undefined을 표현하는 데이터는 undefined만 존재합니다.
즉, undefined !== 0 || !== null 전부 일치하지 않습니다.
undefined를 직역하면 밝혀지지 않았다고 해석할 수 있습니다.
다시 말해, undefined은 변수가 선언되고, 사용자에 의해 아무 값도 할당 받지 않았을 때 자바스크립트가 기본적으로 할당 한 값입니다.
이걸 착하다고 해야할지, 악하다고 해야할지...
장단점은 많이 써봐야 아는 법
많이 써보자.. undefined를 새로운 값으로 덮어보겠습니다.
변수 선언을 통해 0x0000에 변수가 연결되었다고 가정했습니다.
아직 어떤 값도 할당 하지 않았기 때문에 undefined가 저장되었습니다.
variable = 90
값을 대입하면, 자바스크립트는 신기한 동작을 보여줍니다.
c언어는 그 메모리에 값을 덮어 씌우는 형식이지만 자바스크립트는 c언어 비해 욕심쟁이 입니다.
자바스크립트는 변수를 선언 할 때와 할당 할 때 다른 메모리 주소를 사용합니다.
처음에 0x0000에 변수를 선언했다면, 할당은 0x0008에 저장합니다.
what the hell?
하지만
친절한 자바스크립트는 가비지 컬렉터가 0x0000의 메모리를 자동으로 해제합니다.
이는 값을 할당 할 때마다 계속 발생합니다.
variable = 100;
0x0008 -> 0x000f에 값을 저장하고 0x0008은 가비지 컬렉터에 의해 메모리가 해제됩니다.
위 내용을 통해 우리는 하나를 알 수 있습니다.
const는 한번 할당한 값이 변하지 않기 때문에 메모리 주소가 변하지 않는 일관성 있는 친구이구나!
