[모던 Javascript DeepDive] 4. 변수

 

본 포스팅은 아주 오랜만에 AI를 쓰지 않고 필자의 뇌와 손으로만 쓴 글입니다 😁

 

 

처음 자바스크립트를 공부할때 본 책과 내용인데, 삼년만에 다시 보니 기초적인 것도 많이 잊고 있었다는 생각이 든다. 초심으로 돌아가 자바스크립트의 변수에 대해 공부한 내용을 정리해보자. 

 

변수는 왜 필요할까? 

컴퓨터가 연산을 하기 위해서는 연산의 대상이 되는 값들을 어딘가에 저장하고 있어야 한다. 

 

var total = 1 + 2

 

 

컴퓨터는 위의 코드를 실행할 때 메모리에 1과 2를 저장해놓고, CPU를 사용해서 1과 2라는 값을 더하는 연산을 실행한 후 그 결과값인 3을 메모리에 저장한다.  그런데 수많은 메모리 중 결과값 3이 저장되어있는 메모리를 찾으려면 해당 메모리의 주소를 알아야 한다. 자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않기 때문에 해당 메모리 주소를 식별할 수 있는 식별자를 사용해야 한다. 즉 total 이라는 변수명(또는 식별자)을 통해 3이라는 값을 참조할 수 있는 것이다. 

즉, 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다. 

 

 

변수 선언

변수를 선언한다는 것은 값을 저장하기 위한 메모리 공간을 확보하고, 변수 이름과 해당 메모리 공간의 주소를 연결(binding)해서 값을 저장할 수 있게 하는 것을 의미한다. 

 

var total;

 

위와 같이 var 키워드로 변수를 선언하면, total 이라는 변수 이름이 등록되고  이 변수와 연결된 메모리 주소의 메모리 공간이 확보된다. 이 공간은 undefined 라는 값으로 할당되어 초기화된다. 

 

변수를 선언하면 선언 (자바스크립트 엔진에 변수의 존재를 알림) 과 초기화 (메모리 공간 확보 및 암묵적으로 undefined 할당)  단계가 수행된다. 

 

따라서 아래와 같이 바로 변수를 선언하면서 값을 할당한다고 하더라도 변수 선언시에 이미 undefined로 암묵적 할당이 일어나기 때문에, 엄밀히 말하면 3은 초기값으로 할당되는 것이 아닌 재할당되는것이다. 

var total = 3;

 

즉 위의 코드는 total 이라는 변수 선언 (선언 + 초기화) 단계과 3이라는 값의 할당 이라는 두가지 단계를 의미한다.

주의) 변수에 값을 할당할때 이전 값(undefined)가 저장된 메모리 공간을 지우고 그 메모리 공간에 새 값(3)을 저장하는 것이 아니라, 새로운 메모리 공간을 확보하고 그 곳에 새 값(3) 을 저장한다

 

이때 변수 선언은 자바스크립트의 평가 단계에서 일어나고, 할당은 자바스크립트의 실행시점인 런타임에 발생한다. 즉, 선언은 자바스크립트가 실행되기 전에 이미 완료되는 것이다.  따라서 아래의 코드를 실행해도 이미 평가 과정에서 score 변수선언이 완료되었으므로 첫 줄의 console.log(score) 가 실행되었을 때 참조에러가 발생하지 않고 undefined 를 출력하는 것이다. 

console.log(score) // undefined
var score = 80;

 

이처럼 변수선언이 평가과정에서 먼저 실행되기 때문에 변수 선언문이 코드의 맨위로 끌어올려진 것처럼 동작하는 자바스크립트의 특징을 변수 호이스팅(hoisting) 이라고 한다. 

 

 

 

 

 

ES5부터는 식별자를 만들때 유니코드도 허용하기 때문에 한글 식별자도 사용할 수 있지만 바람직하지는 않다고 한다. 사실 이제 업무를 하면서 한글 변수나 한글 함수를 너무 잘 사용하고 있기 때문에 한글 식별자를 썼을때 왜 바람직하지 않을까에 대해서 궁금증이 생긴다... 요 것은 따로 좀 더 찾아봐야겠다..!