[Deep Dive] 04장 변수
1. 변수
컴퓨터는 CPU를 통해 연산하고 메모리를 사용해 데이터를 기억한다.
* 메모리
- 데이터를 저장할 수 있는 데이터 셀의 집합.
- 메모리 셀 하나의 크기는 1바이트(8비트).
- 1바이트 단위로 저장하고 읽음.
- 각 셀은 고유한 메모리 주소를 가진다.
- 저장되는 모든 값은 이진수로 저장된다.
메모리 주소를 통해 값에 접근하는 것은 치명적일 수 있다. 따라서 자바스크립트는 직접적인 메모리 제어를 허용하지 않음.
프로그래밍 언어는 기억할 값을 메모리에 저장하고, 저장된 값을 읽고 재사용하기 위해 변수라는 것을 사용함.
* 변수의 정의
하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.
→ 변수란 값의 위치를 가르킴
| 변수이름 | 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름 |
| 변수 값 | 변수에 저장된 값 |
| 변수 할당 | 변수에 값을 저장하는 것 |
| 변수 참조 | 변수에 저장된 값을 읽어들이는 것 |
2. 식별자
변수의 이름은 식별자라고 부르기도 함.
* 식별자
어떤 값을 구별해서 식별할 수 있는 고유한 이름.
식별자는 값을 저장하는 것이 아니라 메모리 주소를 기억하고 있다.
3. 변수 선언
값을 저장하기 위한 메모리 공간을 확보 → 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있도록 함.
자바스크립트에서는 변수를 선언할 때 `var`, `let`, `const` 를 사용한다.
변수를 선언하면 가장 먼저 메모리가 확보되는데 자바스크립트 엔진에 의해 `undefined` 라는 값이 암묵적으로 할당되어 초기화된다.
| 자바스크립트 엔진의 변수 선언 2단계 | |
| 선언단계 | 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알림 |
| 초기화 단계 | 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화 |
* 실행 컨텍스트
- 모든 변수 이름(식별자)는 실행 컨텍스트에 등록된다.
- 실행 컨텍스트는 엔진이 소스코드를 평가하고 실행하기 위한 환경을 제공 및 실행 결과를 관리하는 영역.
- 자바스크립트는 실행 컨텍스트를 통해 식별자와 스코프를 관리한다.
4. 호이스팅
변수의 선언은 위에서 아래로 순차적으로 진행되는 순서를 따르지 않고 그 이전 단계에서 실행이 된다.
자바스크립트 엔진은 코드를 실행하기 앞서 소스코드 평과 과정을 진행한다. 이때 변수 선언 및 모든 선언문(변수, 함수 등)을 먼저 실행한다.
consoloe.log(jongbin);
// 에러가 발생하지 않음
var jongbin = "hello";
var의 경우 에러가 발생하지 않지만, const, let은 에러가 발생
var는 되는데 왜 const, let는 안되는지 찾아보니 TDZ(Temporal Dead Zone)라는 개념이 있었다.
TDZ(Temporal Dead Zone)
변수선언 전에 변수에 접근하면 TDZ에 의해 ReferenceError가 발생하게 된다.
블로그를 찾다보니 TDZ 구간에 있는 변수는
선언은 되어있지만 아직 초기화가 되지않아 변수에 담길 값을 위한 공간이 메모리에 할당되지 않은 상태
라고 말하시기도 한다. const, let도 호이스팅은 되지만 TDZ에 들어있어 참조에러가 난다.
스코프 내용을 같이 하면 좋겠지만 책 뒤쪽에 나온다.
스코프는 간단히 변수에 접근할 수 있는 범위라고도 한다.
5. 값의 할당
//값의 할당은 선언과 함께 하나의 문으로 할 수 있다.
const jongbin = "hello";
//선언과 할당을 따로 할 수 있다.
const jongbin;
jongbin = "hello";
변수 할당은 소스코드가 순차적으로 실행되는 런타임에 실행된다.
* 이해하기 어려웠던 부분!
변수를 선언하면 undefined라는 값이 할당이 되는데 이후 변수에 할당을 하게되면 해당 변수가 가르키는 메로리주소값에 있는 undefined값이 수정값으로 수정되는것이 아니고 새로운 메모리에 수정값을 넣고 주소를 바꿔준다.
이렇게 하면 괜히 번거로운게 아닌가 생각을 하는데 왜 값을 직접 변경하지 않는지 모르겠다…(찾고 추가해서 수정하자!)
6. 값의 재할당
값의 재할당도 할당과 마찬가지로 직접 값을 수정하지 않고 새로운 메모리를 확보하고 값을 넣고 변수에 주소를 다시 맵핑해준다.
이렇게 되면 undefined값이나 전에 값들이 메모리에 남아있을텐데 이게 메모리 누수로 이어지지는 않을까 생각했지만!
이렇게 불필요한 값들은 **가비지 콜렉터**에 의해 메모리에서 자동 해제된다!
7. 식별자 네이밍 규칙
- 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.
- 식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)로 시작해야 한다. (숫자로 시작 X)
- 예약어는 식별자로 사용할 수 없다.
변수 이름은 목적을 위해 의미를 명확히 표현하는게 좋다.
#. 네이밍 컨벤션
- 카멜 케이스 (jongbinHome)
- 스네이크 케이스 (jongbin_home)
- 파스칼 케이스 (JongbinHome)
- 헝가리언 케이스 (strJongbinHome) → (type + 식별자이름)
| 자바스크립트에서는 일반적으로 | |
| 변수, 함수 | 카멜케이스 |
| 생성자 함수, 클래스 | 파스칼케이스 |
이웅모 선생님의 모던 자바스크립트 Deep Dive를 공부하기 위해 정리한 글입니다.
혹시나 보시다가 고칠 부분이나 마음에 안드시는 부분이 있다면 말씀해주시면 감사하겠습니다!