변수, 선언, 초기화, 할당 / 호이스팅

변수

애플리케이션 안에서는 다양한 종류의 데이터가 다뤄진다.

문자가 될 수도 있고, 숫자가 될 수도 있는 데이터는 개발 과정에서 필요한 값이다.

변수는 값을 저장하고 필요할 때 꺼내서 사용하기 위해 붙이는 이름이다.

 

값은 메모리를 구성하는 1바이트 크기의 셀에 저장된다.

이 때 저장된 위치를 말해주는 메모리 주소를 갖게 되는데, 같은 값이어도 메모리 주소는 상황에 따라 변하기도 한다.

메모리 주소를 통해 직접 값에 접근하는 것은 그 과정에서 오류를 발생시킬 수 있기 때문에 허용되지 않는다. 

변수는 값이 저장된 메모리 주소를 식별하기 위한 이름이며, 변수를 사용해 안전하게 값에 접근할 수 있다.

 

변수 선언

메모리 공간을 확보하고, 해당 주소를 변수 이름과 연결해 값을 저장할 수 있도록 준비하는 것이다.

변수를 사용하기 위해서는 반드시 선언이 필요한데 var, let, const 세 종류의 키워드를 사용한다.

(ES6 이후로는 let, const를 권장한다.)

 

자바스크립트 엔진은 변수 선언을 선언 단계, 초기화 단계로 나누어 수행한다. 

선언 단계에서는 변수 이름을 등록하고 자바스크립트 엔진에 변수가 있음을 알린다.

초기화 단계에서는 변수 값을 저장하기 위해 메모리 공간을 확보하고, 변수에 undefined를 할당한다.

선언에 사용하는 키워드에 따라 위의 두 단계가 수행되는 시점이 달라지는데, var는 선언과 초기화가 동시에 일어난다.

(ReferenceError: 변수와 같은 식별자를 선언하지 않은 상태에서 참조하려 할 때 자바스크립트 엔진이 등록된 식별자를 찾을 수 없어 발생하는 에러이다.)

 

호이스팅

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

호이스팅은 변수 선언과 관련한 자바스크립트 고유의 특징이다. 

인터프리터 언어인 자바스크립트의 특성 상, 작성된 소스코드는 위에서부터 한 줄씩 실행된다.

하지만 자바스크립트 엔진은 코드를 실행하기 전 코드를 평가하는 과정을 거치는데,

변수 선언은 이 평가 과정에서 우선적으로 실행된다. 

호이스팅은 이렇게 우선적으로 변수 선언이 실행되기 때문에, 소스코드 어디에 변수 선언문이 있든 가장 위로 끌어 올려진 것처럼 동작하는 현상을 의미한다.

 

위에서 score는 선언하기 전에 참조되었기 때문에 reference error가 발생할 것 같지만,

호이스팅에 의해 score가 먼저 선언되었기 때문에 에러가 발생하지 않는다.

또한 var 키워드로 선언된 변수는 선언과 초기화가 함께 이루어져 첫번째 score의 값으로 undefined가 출력된다.  

 

할당

변수에 값을 저장하는 것으로, 선언과 달리 소스코드가 위에서부터 실행되는 런타임에 실행된다.

위의 코드에서 score의 값이 달라지는 이유는 선언과 할당이 실행되는 시점이 다르기 때문이다.

var, let으로 선언한 변수는 값을 재할당 할 수 있다. 반면 const로 선언한 변수는 재할당이 금지된다. 

재할당하는 값은 새로운 메모리 공간을 확보해 다시 저장된다.

기존의 값은 식별자 없이 메모리에 불필요하게 남아 있게 되는데, 가비지 콜렉터가 이를 청소해 메모리 누수를 방지한다. 

 

식별자 명명 규칙

1. 특수문자를 제외한 문자, 숫자, _, $를 사용할 수 있다.

2. 숫자는 이름의 첫 글자로 올 수 없다.

3. 예약어는 사용할 수 없다.

4. 변수 이름이 변수의 의미를 반영할 수 있어야 한다. 

5. 네이밍 컨벤션: 가독성을 높이고 일관성을 유지하기 위한 명명 규칙으로, 카멜케이스와 파스칼 케이스가 많이 사용된다.

- 카멜케이스: firstName //변수 또는 함수의 이름으로 사용된다.

- 파스칼 케이스: FirstName //생성자 함수, 클래스 이름으로 사용된다.

- 스네이크 케이스: first_name

- 헝가리언 케이스: strFirstName // 변수 타입을 함께 표기하는 방법

 

---

값: 식이 평가되어 생성된 결과

변수: 하나의 값이 저장된 메모리 공간을 식별하기 위해 붙인 이름

할당: 변수에 값을 저장하는 것

참조: 할당된 값을 변수를 통해 읽어오는 것

식별자: 어떤 값을 식별할 수 있는 고유의 이름으로 변수, 함수, 클래스 등의 이름이 식별자에 해당된다.

호이스팅: 소스코드를 실행하는 런타임에 앞서 자바스크립트 엔진이 코드를 평가하는 과정에서 변수 선언을 실행하기 때문에 변수 선언문이 코드의 가장 위로 끌어 올려진 것 처럼 동작하는 현상.