[모던 자바스크립트 Deep Dive] - 4장 정리

데이터와 변수

아무리 복잡한 앱도 결국 하는 일은 단순하다.
데이터를 받아서 → 처리하고 → 다시 내보내는 것.
여기서 가장 핵심이 되는 게 바로 변수다.

컴퓨터는 기본적으로 두 가지를 한다.

• CPU로 연산
• 메모리에 저장

메모리는 쉽게 말하면 데이터를 저장하는 창고다.
이 창고는 아주 작은 칸들로 나뉘어 있는데, 이걸 메모리 셀이라고 한다.

각 셀은 다음 특징을 가진다.

• 1바이트 단위로 읽고 씀
• 고유한 주소를 가짐
• 모든 데이터는 결국 2진수로 저장됨

예를 들어 4GB 메모리라면
0부터 시작해서 수십억 개의 주소가 존재한다.

여기서 중요한 포인트가 하나 나온다.

→ 모든 값(숫자, 문자, 연산 결과)은 어딘가 메모리에 저장된다

---

변수는 왜 필요한가

그럼 이런 생각이 들 수 있다.

“그냥 메모리 주소로 접근하면 되는 거 아닌가?”

예를 들어 이런 식으로:

0x1234 주소에 있는 값 가져오기

이건 현실적으로 불가능하다. 이유는 두 가지다.

 

첫 번째
코드 실행 전에 메모리 주소를 알 수 없다.
값이 어디에 저장될지는 실행 시점에 결정된다.

 

두 번째
운영체제가 메모리를 관리하는데, 개발자가 직접 건드리면 위험하다.

 

그래서 등장한 게 변수다.

변수는 단순하다.

→ 값이 저장된 메모리 공간을 가리키는 이름

var score = 80;

이 코드는 사실 이렇게 해석된다.

• 메모리 어딘가에 80 저장
• 그 주소를 score라는 이름으로 부름

---

식별자란 무엇인가

여기서 중요한 개념이 하나 더 나온다.

→ 식별자

 

식별자는

“어떤 값을 구별하기 위해 붙인 이름” 이다.

즉

• 변수 이름
• 함수 이름
• 클래스 이름

전부 식별자다.

→ 식별자는 값을 기억하는 게 아니라 메모리 주소를 기억한다

 

변수에 저장된 값은 어디 있는 거야?

→ 메모리에 있음
→ 변수는 그 위치를 가리키는 이름일 뿐

---

변수 선언이란

변수 선언은 단순히 이름 만드는 게 아니다.

두 가지 작업이 동시에 일어난다.

• 메모리 공간 확보
• 변수 이름과 메모리 연결

var score;

이 코드가 하는 일:

• 메모리 확보
• score라는 이름 등록
• 값은 undefined로 초기화

---

undefined가 자동으로 들어가는 이유

이건 굉장히 중요한 포인트다.

변수를 선언하면 값이 없는데 왜 undefined가 들어갈까?

 

이유는 쓰레기 값 방지

 

만약 초기화 안 하면, 이전에 쓰던 값이 남아있을 수 있음

그래서 JS는 안전하게

→ undefined로 초기화

---

실행 컨텍스트

이게 뭘까?

 

쉽게 말하면

→ 자바스크립트가 변수들을 관리하는 공간

예를 들어

var a = 10;

이건 내부적으로

{
  a: 10
}

이런 형태로 저장된다.

즉

• 변수 이름 = key
• 값 = value

이걸 관리하는 곳이 실행 컨텍스트

---

변수 선언 과정 (2단계)

자바스크립트는 변수 선언을 이렇게 나눠서 처리한다.

1. 선언 단계
   → 변수 이름 등록
2. 초기화 단계
   → undefined 할당

---

호이스팅 

이게 가장 많이 헷갈리는 부분이다.

코드를 보자.

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

결과:

undefined

왜?

자바스크립트는 이렇게 실행한다.

1. 코드 실행 전에 선언 먼저 처리
2. 그 다음 한 줄씩 실행

즉 실제로는 이렇게 된다.

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

이걸

→ 호이스팅이라고 한다

 

let은 왜 에러남?

 

console.log(score);
let score = 80;

→ ReferenceError

 

이유는

→ let은 호이스팅은 되지만 접근 금지 구간(TDZ)이 있음

 

자세한 내용은 아래 참고

https://its-kaya.tistory.com/67

---

변수 선언 vs 값 할당

var score = 80;

이건 한 줄처럼 보이지만

실제로는 두 단계다.

• 선언 → 먼저 실행됨
• 할당 → 나중에 실행됨

그래서

var score = 80;

내부적으로는 다음과 같이 실행되는 것이다.

var score;
score = 80;

---

값 할당 시 메모리 동작

var score = 80;
score = 90;

이게 이렇게 되는 줄 알기 쉬움

→ 기존 공간에 90 덮어쓰기

하지만 실제는 다름

• 80 저장된 공간 그대로 둠
• 새로운 공간에 90 저장
• score는 새 주소 가리킴

---

그럼 기존 값은?

→ 아무도 참조 안 하면

→ 가비지 콜렉터가 제거

---

가비지 콜렉터

정의:

→ 더 이상 사용되지 않는 메모리를 자동으로 제거하는 시스템

 

조건:

→ 어떤 변수도 참조하지 않는 메모리

---

매니지드 vs 언매니지드

자바스크립트는

→ 매니지드 언어

• 메모리 자동 관리
• 개발자가 관여 못함

C는

→ 언매니지드 언어

• 직접 메모리 관리
• 대신 오류 위험 높음

---

var / let / const 차이

var 특징:

• 함수 스코프
• 블록 스코프 없음
• 전역 변수 남발 위험

let / const:

• 블록 스코프
• 안전함

---

const 특징

• 재할당 불가
• 값 변경 불가

---

const는 완전 불변이야?

 

const obj = { a: 1 };
obj.a = 2;

→ 가능

 

이유:

→ 객체 내부 변경은 허용

---

식별자 네이밍 규칙

가능:

• 문자
• 숫자
• _
• $

불가능:

• 숫자로 시작
• 예약어 사용

예시 (잘못된)

var 1name; // 불가
var var;   // 불가

 

예약어 예시:

• var
• let
• const
• function
• if
• for
• return

---

네이밍 컨벤션

좋은 이름은 코드 이해도를 올린다.

 

권장 방식:

카멜 케이스

var userName;

 

파스칼 케이스

class UserName {}

 

스네이크 케이스

user_name

---

자바스크립트 규칙

• 변수, 함수 → 카멜 케이스
• 클래스, 생성자 → 파스칼 케이스

참고 자료

모던 자바스크립트 Deep Dive — 이웅모

ECMAScript Specification — https://tc39.es/ecma262/

MDN Web Docs — https://developer.mozilla.org/