[모던자바스크립트 딥다이브] CH 4 변수

1. 변수의 정의와 필요성

모든 애플리케이션은 데이터를 입력받아 처리하고, 그 결과를 출력하며 작동한다. 이 때, 데이터를 관리하기 위한 핵심 개념으로 변수가 사용된다.

🌸 JS코드 실행 내부 동작

result = 10 + 20

1. 10, 20 [literal]과 +[operator]의 의미 파악

2. 10 + 20 [expression]의 의미 해석[parsing]

3. 10, 20 [operand] 기억, 연산 결과(30) 기억

연산 결과는 메모리에 저장된다. 하지만 메모리 주소로 직접 접근하는 것 외에는 연산결과를 재사용할 수 있는 방법 X

⇒ JS는 개발자의 직접적인 메모리 제어를 허용하지 않음. 따라서 재사용이 매우 어려움

⇒ 변수를 사용해 메모리 공간에 접근 가능 !!!

 

메모리를 사용해 데이터 기억

• 메모리 셀 : 하나의 크기는 1 바이트. 메모리 셀의 크기를 단위로 데이터를 저장/읽기
  • nGB 메모리의 주소 범위 : 0 ~ n * 2^10(KB)^3(GB)
  저장 형식 : 메모리에 저장되는 모든 값은 2진수로 저장
• 메모리 주소 : 각 메모리셀마다 가지는 주소. 메모리 공간의 위치
• 메모리 : 데이터를 저장할 수 있는 메모리 셀의 집합체

4. 코드 계산(evaluation)

🌸 변수와 식별자

변수

• 하나의 값을 저장하기 위해 확보한 메모리 공간 그리고 메모리 공간을 식별하기 위해 붙인 이름
• 할당 : 변수에 값을 저장하는 것
• 참조 : 변수에 저장된 값을 읽어 들이는 것

식별자

• 변수 이름과 동일. 어떤 값을 구별해서 식별할 수 있는 고유한 이름
• 값이 아니라 메모리 주소를 기억
• 변수 뿐만이 아니라, 클래스, 함수 등 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름을 모두 식별자라고 부름
• 선언을 통해 자바스크립트 엔진에 식별자의 존재를 알림

2. 변수 선언

🌸 변수 선언

var score; // 변수 선언문

• 변수 선언 : 변수를 생성하는 것
  • 값을 저장하기 위한 메모리 공간을 확보하고, 변수 이름과 확보된 메모리 공간의 주소를 연결해 값을 저장할 수 있게 준비하는 것

🌸 JS엔진의 변수 선언

1. 선언 단계
   • 변수 이름을 등록해 JS 엔진에 변수의 존재를 알림
   • 선언하지 않은 식별자에 접근 → ReferenceError 발생
2. 초기화 단계
   • 값을 저장하기 위한 메모리공간 확보. 암묵적으로 undefined를 할당해 초기화
     • undefined
       • JS에서 제공하는 원시 타입의 값
       • 값이 할당되지 않았음을 의미
   • 초기화 단계를 거치지 않으면 쓰레기 값이 할당되는 위험

🌸 var 키워드

• 함수 레벨 스코프 지원 : 의도치 않은 전역변수 선언이 되는 부작용 → let, const 권고
• 키워드 : JS코드를 해석하고 실행하는 JS 엔진이 수행할 동작을 규정한 일종의 명령어
• 선언 단계 & 초기화 단계 동시 진행 (undefined로)
• 재할당 가능

🌸 JS엔진의 코드실행 과정과 호이스팅

console.log(score) // undefined (값의 할당 전)

var score; // 변수 선언
score = 80; // 값의 할당
// 위와 동일 var score = 80

console.log(score) // 80 (값의 할당 후)

1. 소스코드의 평가
   • 선언문(var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자) 먼저 실행 ⇒ 변수 호이스팅
2. 소스코드의 순차적 실행 (런타임)
   • 선언문을 제외한 소스코드를 한줄 씩 순차적으로 실행
   • 값의 할당

🌸 재할당

• 원래 주소에 있던 값을 변경하는게 아니라, 새로운 주소를 확보하고 그 메모리공간에 새 값 저장