아무리 복잡한 어플리케이션이라 할지라도 데이터를 입력 받아 처리하고 결과를 출력 하는 것이 전부이다.
4. 변수
사람은 계산과 기억을 모두 두뇌에서 한다. 반면 컴퓨터는 CPU를 통해 연산하고, 메모리를 통해 데이터를 기억한다.
4.1. 변수란 무엇인가? 왜 필요한가?
메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체다. 메모리 셀 하나의 크기는 1바이트 (8비트)이며, 컴퓨터는 메모리 셀의 크기, 즉 1바이트 단위로 데이터를 저장하고 읽어들인다.
또한 각 셀은 고유의 메모리 주소를 갖는데 이는 메모리 공간의 위치이다. 0부터 메모리의 크기만큼 정수로 표현되는데 예를들어 4GB 메모리는 0부터 4,294,967,296 (0x00000000 ~ 0xFFFFFFFF)까지의 주소를 갖고 데이터 종류와 상관없이 모든 데이터는 2진수로 저장된다.
//예제
10 + 20위와 같은 연산이 실행되면 10과 20은 메모리 상의 임의의 위치에 저장되고 CPU는 이 값을 읽어 연산을 한다. 연산의 결과로 생성된 숫자 값 30 또한 메모리 상의 임의의 위치에 저장된다. 하지만 문제는 여기서 시작한다. 연산 결과 값 30이 저장된 메모리 공간에 직접 접근하지 않는다면 이 값 30은 재사용할 수 없다는 문제가 있고 메모리 주소를 통해 값에 직접 접근하는 것 또한 치명적 오류를 발생시킬 가능성이 높은 매우 위험한 일이다. 이 때문에 자바스크립트에서는 직접적인 메모리 제어를 허용하지 않는 매니지드 언어이다.
자바스크립트가 직접적인 메모리 제어를 허용하지 않는 이유는 값이 저장될 메모리 주소가 매번 임의로 결정되기 때문이다. 코드가 실행될 때 메모리의 상황에 따라 메모리 주소가 임의로 결정되는 메커니즘으로 인해 동일한 컴퓨터에서 동일한 코드를 살행해도 메모리 주소는 변경된다. 즉 코드가 실행되기 이전에는 값이 저장된 메모리 주소를 알 방법이 없기 때문에 직접 접근하는 방법은 올바르지 못하다.
따라서 값을 저장하고 읽어 들여 재사용하기 위해 변수라는 메커니즘을 제공하는데 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙힌 이름을 말한다.
즉 변수는 값을 저장하고 참조하는 메커니즘으로, 값의 위치를 가리키는 상징적인 이름이다. 이 상징적인 이름은 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행된다. 따라서 자바스크립트는 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요없이 변수를 통해 안전하게 값에 접근할 수 있게 한다.
메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름을 변수명이라하고 그 변수에 저장된 값을 변수 값이라고 한다. 또한 변수에 값을 저장하는 것을 할당이라 하고, 저장된 값을 읽어 들이는 것을 참조라 한다.
즉 변수명은 사람을 위해 사람이 이해하기 쉬운 언어로 주소값에 별칭(상징적인 이름)을 지어주는 것이다. 변수명을 사용해 참조를 요청하면 자바스크립트 엔진은 변수 이름과 매핑된 메모리 주소를 통해 메모리에 접근하여 저장된 값을 반환한다.
코드는 컴퓨터에게 내리는 명령이지만 개발자를 위한 문서이기도 하다. 따라서 개발자의 의도를 나타내는 명확한 네이밍은 코드를 이해하기 쉽게 만들기 때문에 첫아이 이름을 짓듯이 심사숙고해서 지어야 한다.
4.2. 식별자
변수뿐만 아니라 모든 식별자를 사용하기 위해선 선언이 필요하다.
식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름으로 사람을 이름으로 구별해서 식별하듯 값도 식별자로 구별하여 식별할 수 있다.
또한 식별자라는 용어는 변시 이름에만 사용되지 않고 함수, 클래스 등의 이름 모두 식별자로서 선언에 의해 자바스크립트 엔진에 식별자의 존재를 알린다.
4.3. 변수 선언
값을 할당하기 위한 준비
변수 선언을 통해 메모리 공간상 저장될 값의 공간을 확보하고 공간의 주소와 변수명을 연결하여 값을 저장 (할당) 할 수 있게 준비하는 것이다. 이렇게 확보된 메모리 공간은 해제되기 전까지는 누구도 확보된 메모리 공간을 사용할 수 없도록 보호된다.
변수를 사용하려면 반드시 var, let, const 키워드를 사용한 선언이 필요하다.
키워드는 자바스크립트 코드를 해석하고 실행하는 자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어다. 자바스크립트 엔진은 키워드를 만나면 자신이 수행해야 할 약속된 동작을 수행한다. 예를 들어, var 키워드를 만나면 자바스크립트 엔진은 뒤에 오는 변수 이름으로 새로운 변수를 선언한다.
//예제
var score;위 변수 선언문은 변수 이름을 등록하고 저장할 메모리 공간을 확보한다.
값이 할당되어 있지 않다고 하더라도 선언으로 인해 확보된 메모리 공간은 비어있지 않고 자바스크립트 엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화된다.
이는 자바스크립트의 독특한 특징으로 다음과 같은 2단계에 거쳐 변수 선언을 수행한다.
- 선언 단계: 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다. (변수를 실행 컨텍스트의 변수 객체에 등록하는 단계)
- 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.
초기화란 변수가 언언된 이후 최초로 값을 할당하는 것으로 var 키워드로 선언한 변수는 undefined로 암묵적으로 최기화가 자동 수행된다. 따라서 키워드로 선언했지만 할당되지 않은 변수는 undefined라는 값을 갖는다. 이 초기화 단계를 거치는 이유는 확보된 메모리 공간에는 이전에 다른 어플리케이션이 사용했던 값이 남아 있는 수 있기 때문이다. 이러한 값을 쓰레기 값이라고 하는데 메모리 공간 확보 후 초기화 단계를 통해 쓰레기 값이 참조되는 것을 예방할 수 있다.
4.4. 변수 선언의 실행 시점과 변수 호이스팅
자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행된다. 호이스팅된 변수 선언은 빼고
//예제
console.log(score)
var score위 예제에서 console.log(score)가 실행되면 참조 에러가 발생할 것 같지만 실은 undefined가 출력된다.
그 이유는 변수 선언이 런타임이 아니라 그 이전단계에서 먼저 실행되기 때문이다.
자바스크립트 엔진은 소스코드를 실행하기에 앞서 평과 과정을 거치며 소스코드 실행을 위한 준비를 하는데 이때 엔진은 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행한다.
이러한 과정이 포함된 평과 과정이 끝나면 모든 선언문을 제외한 소스코드를 한 줄씩 순차적으로 실행한다.
이렇게 변수 선언문이 마치 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트의 고유의 특징을 변수 호이스팅이라고 한다.
추가로 var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅된다.
+TDZ 리서치 후 추가 필요(var, let, const 선언의 라이프 사이클)
let, const선언 변수는 호이스팅되지 않는 것이 아니다. 스코프에 진입할 때 변수가 만들어지고 TDZ(Temporal Dead Zone)가 생성되지만, 코드 실행이 변수가 실제 있는 위치에 도달할 때까지 액세스할 수 없는 것이다. let/const변수가 선언된 시점에서 제어흐름은 TDZ를 떠난 상태가 되며, 변수를 사용할 수 있게 된다.
4.5. 값의 할당
값의 할당은 런타임에 실행된다.
할당 연산자 =를 사용하여 변수에 값을 할당한다.
//변수 선언과 값의 할당이 나누어져서 이뤄지는 케이스
var score;
score=80;
// 변수 선언과 갑의 할당이 하나의 문으로 실행
var score = 80;위 예제의 2개의 코드 라인은 정확히 동일하게 동작한다.
하나의 문으로 단축 표현해도 선언과 할당을 2개의 문으로 나누어 각각 실행한다.
따라서 변수 선언과 값의 할당의 실행 시점이 다르다.
변수선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되고
값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.
재미있는 부분은 초기화 단계에서 변수 (메모리 공간)에 undefined가 할당된 후 변수에 값을 할당할 때는 이전 값이 저장되어 있던 메모리 공간을 지우고 그 공간에 값을 새롭게 저장하는 것이 아닌
새로운 공간을 확보하고 그곳에 값을 할당한다.
4.6. 값의 재할당
이미 값이 할당된 변수에 새로운 값을 또다시 할당해보자. 단, const는 빼고
var score = 80;
score = 90;var 키워드로 선언한 변수는 값을 재할당할 수 있다.
엄밀히 따지고보면 var키워드로 선언한 변수는 선언과 동시에 undefined로 초기화 되기 때문에 변수에 처음 값을 할당하는 것도 사실은 재할당이다.
어찌되었든 변수에 값을 재할당을 하게되면 이전 값이 저장되어 있던 메모리 공간을 지우고 재할당값을 새롭게 저장하는 것이 아니라 새로운 메모리 공간을 확보하고 그 메모리 공간에 재할당 값을 저장한다.
그 결과로 변수의 이전값들은 어떤 변수도 값으로 갖고 있지 않는다. 즉 어떤 식별자와도 연결되어 있지 않다.
이러한 불필요한 값들은 가비지 콜렉터에 의해 메모리에서 자동 해제된다. 단 언제인지는 예측 불가이다.
4.7. 마무리
어플리케이션의 근본은 데이터를 다루는 소프트웨어다. 아무리 복잡한 기능의 어플리케이션이라도 핵심은 데이터를 입력받아 처리하고 그 결과를 출력하는 것이다. 이런 어플리케이션은 프로그래밍 언어로 만들어지고 그 언어에서 변수는 데이터를 관리하기 위한 핵심 개념이다.
이 중요한 변수는 식별자로도 불리며 값을 지닌 듯 보이지만 사실 메모리 주소를 기억(참조)하고 있는, 인간이 프로그래밍을 함에 있어서 도움을 주기위한 메모리 주소값에 대한 인간 언어로 된 별명 정도이다. 따라서 프로그래밍적뿐만 아니라 현실 혹은 실전에서도 변수는 중요하다. 프로그래밍은 절대 혼자서 행해지지 않고 같이 협업을 통해 이뤄지기 때문이다. 즉 네이밍 규칙을 잘 협의하고 준수해야한다. 이는 함께 프로그래밍을 하는 사람들간 서로의 커뮤니케이션을 원할하게 도와준다. 명확한 커뮤니케이션은 변수의 존재 목적을 쉽게 이해할 수 있도록 의미를 명확하게 표현하고 일관성을 지킴으로 인해 높아진 가독성이 큰 도움이 되기 때문이다.
