04장 변수 - 모던 자바스크립트 Deep Dive

4-1. 변수란 무엇인가? 왜 필요한가?

✅ 변수란 무엇인가?

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

여러 개의 값을 저장하려면 여러 개의 변수를 사용해야 하는데, 배열이나 객체 같은 자료구조를 사용하면 관련이 있는 여러 개의 앖을 그룹화해서 하나의 값처럼 사용할 수 있다.

✅ 변수는 왜 필요한가?

변수에는 메모리 주소가 저장되는데, 이를 통해 안전하게 값에 접근할 수 있을 뿐더러, 메모리 공간에 저장된 값을 다시 불러들여 재사용할 수 있기 때문이다.

✅ 할당? 참조?

할당 : 변수에 값을 저장하는 것 (대입, 저장)
참고 : 변수에 저장된 값을 읽어 들이는 것

4.2 식별자

1. 식별자란 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다.
2. 식별자는 값이 아니라 메모리 주소를 기억하고 있다.
3. 식별자는 '선언'에 의해 자바스크립트 엔진에 식별자의 존재를 알린다.

4.3 변수 선언

✅ 자바스크립트 엔진의 변수 선언 2단계

1. 선언 단계 : 변수 이름을 등록하여 JS 엔진에 변수의 존재를 알린다.
2. 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고, 암묵적으로 undefined를 할당해 초기화 한다.

✅ 변수 이름은 어디에 등록되는가?

변수를 포함한 모든 식별자는 실행 컨텍스트에 등록된다. 실행 컨텍스트는 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고, 코드의 실행 결과를 실제로 관리하는 영역이다. 실행 컨텍스트를 통해 식별자와 스코프를 관리한다.
변수명과 변수값은 실행 컨텍스트 내에 키/값 형식인 객체로 등록되어 관리된다.

⛔️ Reference Error?
선언하지 않은 식별자에 접근하면 Reference Error(참조 에러)가 발생한다. 식별자를 통해 값을 참조하려 했지만 자바스크립트 엔진이 등록된 식별자를 찾을 수 없을 때 발생하는 에러이다.

4.4 변수 선언의 실행 시점과 변수 호이스팅

⭐️ 호이스팅이란?

변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징이다.
호이스팅이 일어나는 이유는, 변수 선언이 런타임 이전 단계에서 먼저 실행되기 때문이다.

✅ 변수 선언이 일어나는 시점?

아래 코드에서 위에서부터 순차적으로 읽어보면, score라는 변수는 아직 선언되지 않았으므로 콘솔에 찍어보면 참조 에러가 날 것 같지만, undefined가 들어가 있는데, 이는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계인 평가과정에서 먼저 실행되기 때문이다.

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

정리하자면,
1. 자바스크립트 엔진은 소스코드의 평가과정을 거치며, 평가과정 시 자바스크립트 엔진은 변수 선언을 포함한 모든 선언문(변수 선언문, 함수 선언문 등)을 소스코드에서 찾아내 먼저 실행한다.
2. 그 이후 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 진행한다.

4.5 값의 할당

✅ 변수 선언과 할당은 동시에 실행되는가?

아니다. 변수 선언은 런타임 이전에 실행되지만 값의 할당은 런타임에 실행된다. 즉,var score; score=80;과 var score = 80은 같다. 자바스크립트 엔진은 하나의 단축문으로 표현해도, 변수 선언과 값의 할당을 2개의 문으로 나누어 각각 실행하기 때문이다.

console.log(score); // undefined

var score = 80; // 변수 선언은 런타임 이전에, 할당은 런타임때 실행됨

console.log(score); // 80

위와 아래는 같다.

console.log(score); // undefined

score = 80; // 값의 할당
var score; // 값의 선언

console.log(score); // 80

4.6 값의 재할당

✅ 재할당이란?

변수에 새로운 값을 저장하는 것을 의미한다. var키워드로 선언한 변수는 선언과 동시에 undefined로 초기화되기 때문에, 변수에 처음으로 값을 할당하는 것도 엄밀히 말하면 재할당이다.

값을 재할당할 수 없어서 변수에 지정된 값을 변경할 수 없다면 변수가 아닌 '상수'이다. const로 선언한 변수는 재할당이 금지되기에, 상수를 표현할 수 있다. const foo = 10; foo=100이라고 값을 재할당하면 TypeError가 발생한다.

값이 재할당 되면, 어떤 식별자와도 연결되지 않은 메모리들은 불필요하게 된다. 이런 불필요한 값들은 가비지 콜렉터에 의해 메모리에서 자동 해제되는데, 언제 해제될지는 예측할 수 없다.

✅ 가비지 콜렉터란?

애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더 이상 사용되지 않는 메모리, 즉 어떤 식별자도 참조하지 않는 메모리를 해제하는 기능이다.
자바스크립트는 가비지 콜렉터를 내장하고 있는 매니지드 언어로서 가비지 콜렉터를 통해 메모리 누수를 방지한다.

4.7 식별자 네이밍 규칙

규칙 1. 특수문자를 제외한 문자, 숫자, 언더스코어, $를 포함 가능
규칙 2. 숫자로 시작하는 것은 허용하지 않음
규칙 3. 예약어는 식별자로 사용할 수 없다.

아래 식별자는 위의 네이밍 규칙에 위배되므로 사용할 수 없다.

var first-name; // - 는 사용할 수 없다. 대신 _ 사용가능
var 1st; // 숫자로 시작할 수 없다.
var this; //  예약어는 사용하면 안된다.

자바스크립트는 대소문자를 구별하므로 다음은 각각 별개의 변수다.

var firstname;
var firstName;
var FIRSTNAME;

변수명은 존재 목적을 이해하기 쉽도록 작성해야 한다.

var x = 3; // 무엇을 의미하는지 알기 힘들다.
var score = 100; // 이해하기 쉽게 작성한다.

네이밍 컨벤션은 아래 네 가지가 있는데, JS에서는 일반적으로 카멜 케이스와 파스칼 케이스가 가장 많이 사용된다.

// 카멜 케이스 - 변수명 지을 때 사용됨.
var firstName;

// 파스칼 케이스 - 주로 클래스 이름, 생성자 함수 이름으로 사용됨.
var FirstName

// 스네이크 케이스
var first_name;

// 헝가리언 케이스
var strFirstName // type + identifier