4장 변수

📂4장 변수

변수?

변수의 정의

• 하나의 값을 저장하기 위해 확보한 메모리 공간 자체
• 그 메모리 공간을 식별하기 위해 붙인 이름

🔎 용어 정리

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

변수의 필요성

• 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수 사용

---

식별자

• 식별자 : 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름
• 식별자는 메모리 주소를 기억 (값을 기억하는 것이 아님.)

---

변수 선언

var age; // 변수 선언

• 💻 var 키워드 변수 선언시 자바스크립트 엔진이 하는 일
  • 1. 선언 : 변수 이름 등록해서 자바스크립트 엔진에 변수의 존재를 알림.
    2. 초기화 : 값을 저장하기 위한 메모리 공간 확보, 암묵적으로 undefined를 할당해 초기화함.

• 만약 2.초기화를 거치지 않는다면?
  • 확보된 메모리 공간에 이전에 사용했던 값이 있을 가능성이 있음.
  • 이러한 값을 쓰레기 값(garbage value)라함.

var 키워드는 암묵적으로 초기화를 수행하므로 이러한 위험으로부터 안전.

⏳ const와 let 키워드로 선언시 자바스크립트 엔진은 어떤 일을 할까?

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

console.log(B)
const B;
// Uncaught SyntaxError: Missing initializer in const declaration

console.log(C)
let C;
// Uncaught ReferenceError: C is not defined

---

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

console.log(A) // undefined
var A; // 변수 선언

• 원칙 : 자바스크립트는 한 줄씩 순차적으로 실행 (console.log(A) 후 var A 변수 선언)
• 예외 : 모든 선언문(변수 선언문, 함수 선언문 등) 먼저 실행함. => 변수 호이스팅

🔎 용어 정리

• 런타임 : 소스코드가 한 줄씩 순차적으로 실행되는 시점
• 변수 호이스팅 : 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 것

---

값의 할당

👩‍💻 사람이 코드를 쓸 때

var age = 15; // 변수 선언과 값의 할당

💻 자바스크립트 엔진

var age; // 변수 선언
age = 15; // 값의 할당

• 자바스크립트 엔진은 변수 선언과 값의 할당을 동시에 해도 2개의 문으로 나누어 각각 실행함.
• 변수 선언은 변수 호이스팅에 의해 먼저 실행, 값의 할당은 런타임에 실행

값의 할당

• 변수 선언시 초기값인 undefined가 저장되었던 메모리 공간을 지우고 그 자리에 새롭게 값(15)을 할당 하는 것이 아님
• 새로운 메모리 공간을 확보하고 그곳에 할당 값(15)을 저장함.

📋 예제로 알아보기

👩‍💻 사람이 코드를 쓸 때

console.log(score); // undefined
var score = 100; // 변수 선언과 값의 할당
console.log(score) //100

💻 자바스크립트 엔진

var score; // 변수 선언
console.log(score); // undefined
score = 100; // 값의 할당
console.log(score) // 100

📋 책 예제로 풀어보기

• [예제 04-10]

  console.log(score); 
  score = 80; 
  var score;
  console.log(score) // ??

• 내가 생각한 단계

  var score; // 변수 호이스팅에 의해 변수 선언 먼저 실행 
  // 변수 선언 외의 코드들은 런타임대로 실행 
  console.log(score); // undefined
  score = 80; // 값의 할당 
  console.log(score) // 80

• Ask the Computer

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

---

값의 재할당

var age = 15; // 변수 선언 및 값의 할당
age = 20; // 값의 재할당

💻 자바스크립트 엔진

• 새로운 메모리 공간을 확보하고 그 공간에 재할당 값(20)을 저장
• 이전 값(15)이 저장됐던 메모리 공간을 지우고 그 공간에 재할당 값(20)을 저장하는 것이 아님.
• 이전 값(15)은 식별자와도 연결되어 있지 않으므로 가비지 콜렉터에 의해 메모리에서 자동 해제됨.
• 하지만 메모리에서 언제 해체될지는 예측할 수 없다.

🔎 용어 정리

• 가비지 콜렉터 : 할당한 메모리 공간을 주기적으로 검사하여 사용되지 않는 메로리를 해제하는 기능, 메모리 누수를 방지

상수

• 값을 재할당할 수 없는 변수
• const 키워드 사용

참고 : ⏳ 해결하지 못한 궁금점 (이후 학습에서 해결되면 업데이트할 부분)

---

[모던 자바스크립트 Deep Dive, ⌜이웅모 ⌟, 위키북스, 20210103]를 읽고 정리한 글입니다.