Skip to content

Commit

Permalink
Merge pull request #963 from Ryan-Dia/ryan-dia
Browse files Browse the repository at this point in the history
23-2μž₯ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ - 강철원
  • Loading branch information
Ryan-Dia authored Dec 11, 2023
2 parents 1f4e37e + 449d7f4 commit 82179b8
Showing 1 changed file with 137 additions and 1 deletion.
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
**TIL(Today I learn) 기둝일** : 2023.12.09
**TIL(Today I learn) 기둝일** : 2023.12.09 / 2023.12.10

# πŸ“š 23μž₯ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ

Expand Down Expand Up @@ -74,3 +74,139 @@ x = 1;
1. `x = 1` 만 μ‹€ν–‰λœλ‹€. (λ³€μˆ˜ 선언문은 μ†ŒμŠ€μ½”λ“œ 평가 κ³Όμ • μ—μ„œ 이미 싀행이 μ™„λ£Œλ˜μ—ˆλ‹€)
2. μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ κ΄€λ¦¬ν•˜λŠ” μŠ€μ½”ν”„μ— `x` λ³€μˆ˜κ°€ λ“±λ‘λ˜μ–΄μžˆλŠ”μ§€ 확인
3. λ“±λ‘λ˜μ–΄ μžˆλ‹€λ©΄ 값을 ν• λ‹Ήν•˜μ—¬ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ— λ“±λ‘ν•˜μ—¬ 관리

## 3. μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ μ—­ν• 

>λ‹€μŒμ˜ 예제λ₯Ό 보고 μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진이 이 예쩨λ₯Ό μ–΄λ–»κ²Œ ν‰κ°€ν•˜κ³  μ‹€ν–‰ν•˜λŠ”μ§€ μ•Œμ•„λ΄…μ‹œλ‹€
```js
// μ „μ—­ λ³€μˆ˜ μ„ μ–Έ
const x = 1;
const y = 2;

// ν•¨μˆ˜ μ •μ˜
function foo(a) {
// 지역 λ³€μˆ˜ μ„ μ–Έ
const x = 10;
const y = 20;

// λ©”μ„œλ“œ 호좜
console.log(a + x + y); // 130
}

// ν•¨μˆ˜ 호좜
foo(100);

// λ©”μ„œλ“œ 호좜
console.log(x + y); // 3
```

### 1️⃣ μ „μ—­ μ½”λ“œ 평가

μ „μ—­ μ½”λ“œλ₯Ό μ‹€ν–‰ν•˜κΈ°μ— μ•žμ„œ λ¨Όμ € μ—°μ—­ μ½”λ“œ 평가 과정을 거치며 μ „μ—­ μ½”λ“œλ₯Ό μ‹€ν–‰ν•˜κΈ° μœ„ν•œ μ€€λΉ„λ₯Ό ν•©λ‹ˆλ‹€.
**μ†ŒμŠ€μ½”λ“œ 평가 κ³Όμ •μ—μ„œλŠ” μ„ μ–Έλ¬Έλ§Œ λ¨Όμ € μ‹€ν–‰ν•©λ‹ˆλ‹€.** λ”°λΌμ„œ μ „μ—­ μ½”λ“œμ˜ λ³€μˆ˜ μ„ μ–Έλ¬Έκ³Ό ν•¨μˆ˜ 선언문이 λ¨Όμ € μ‹€ν–‰λ˜κ³ ,
κ·Έ κ²°κ³Ό μƒμ„±λœ μ „μ—­ λ³€μˆ˜μ™€ μ „μ—­ ν•¨μˆ˜κ°€ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ κ΄€λ¦¬ν•˜λŠ” μ „μ—­ μŠ€μ½”ν”„μ— λ“±λ‘λ©λ‹ˆλ‹€.
μ΄λ•Œ `var`ν‚€μ›Œλ“œλ‘œ μ„ μ–Έλœ μ „μ—­ λ³€μˆ˜μ™€ ν•¨μˆ˜ μ„ μ–Έλ¬ΈμœΌλ‘œ μ •μ˜λœ μ „μ—­ ν•¨μˆ˜λŠ” μ „μ—­ 객체의 ν”„λ‘œνΌν‹°μ™€ λ©”μ„œλ“œκ°€ λ©λ‹ˆλ‹€.

### 2️⃣ μ „μ—­ μ½”λ“œ μ‹€ν–‰

μ „μ—­ μ½”λ“œ 평가 과정이 λλ‚˜λ©΄ λŸ°νƒ€μž„μ΄ μ‹œμž‘λ˜μ–΄ μ „μ—­ μ½”λ“œκ°€ 순차적으둜 μ‹€ν–‰λ˜κΈ° μ‹œμž‘ν•©λ‹ˆλ‹€.
μ΄λ•Œ μ „μ—­ λ³€μˆ˜μ— 값이 ν• λ‹Ήλ˜κ³  ν•¨μˆ˜κ°€ ν˜ΈμΆœλ©λ‹ˆλ‹€. ν•¨μˆ˜κ°€ 호좜되면 순차적으둜 μ‹€ν–‰λ˜λ˜ μ „μ—­ μ½”λ“œμ˜ 싀행을 μΌμ‹œ μ€‘λ‹¨ν•˜κ³  μ½”λ“œ μ‹€ν–‰ μˆœμ„œλ₯Ό λ³€κ²½ν•˜μ—¬ ν•¨μˆ˜ λ‚΄λΆ€λ‘œ μ§„μž…ν•©λ‹ˆλ‹€.

### 3️⃣ ν•¨μˆ˜ μ½”λ“œ 평가

ν•¨μˆ˜ ν˜ΈμΆœμ— μ˜ν•΄ μ½”λ“œ μ‹€ν–‰ μˆœμ„œκ°€ λ³€κ²½λ˜μ–΄ ν•¨μˆ˜ λ‚΄λΆ€λ‘œ μ§„μž…ν•˜λ©΄ ν•¨μˆ˜ λ‚΄λΆ€μ˜ 문듀을 μ‹€ν–‰ν•˜κΈ° μ•žμ„œ ν•¨μˆ˜ μ½”λ“œ 평가 과정을 거치며 ν•¨μˆ˜ μ½”λ“œλ₯Ό μ‹€ν–‰ν•˜κΈ° μœ„ν•œ μ€€λΉ„λ₯Ό ν•©λ‹ˆλ‹€. μ΄λ•Œ λ§€κ°œλ³€μˆ˜μ™€ 지역 λ³€μˆ˜ 선언문이 λ¨Όμ € μ‹€ν–‰λ˜κ³ , κ·Έ κ²°κ³Ό μƒμ„±λœ λ§€κ°œλ³€μˆ˜μ™€ 지역 λ³€μˆ˜κ°€ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ κ΄€λ¦¬ν•˜λŠ” 지역 μŠ€μ½”ν”„μ— λ“±λ‘λ©λ‹ˆλ‹€. λ˜ν•œ ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ 지역 λ³€μˆ˜μ²˜λŸΌ μ‚¬μš©ν•  수 μžˆλŠ” `arguments`객체가 μƒμ„±λ˜μ–΄ 지역 μŠ€μ½”ν”„μ— λ“±λ‘λ˜κ³  `this`바인딩도 κ²°μ •λ©λ‹ˆλ‹€.

### 4️⃣ ν•¨μˆ˜ μ½”λ“œ μ‹€ν–‰

ν•¨μˆ˜ μ½”λ“œ 평가 과정이 λλ‚˜λ©΄ λŸ°νƒ€μž„ μ‹œμž‘λ˜μ–΄ ν•¨μˆ˜ μ½”λ“œκ°€ 순차적으둜 μ‹€ν–‰λ˜κΈ° μ‹œμž‘ν•©λ‹ˆλ‹€. μ΄λ•Œ λ§€κ°œλ³€μˆ˜μ™€ μ§€μ—­λ³€μˆ˜μ— 값이 ν• λ‹Ήλ˜κ³  `console.log`λ©”μ„œλ“œκ°€ ν˜ΈμΆœλ©λ‹ˆλ‹€.

`console.log`λ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν•˜κΈ° μœ„ν•΄ λ¨Όμ € μ‹λ³„μžμΈ `console.log`을 μŠ€μ½”ν”„ 체인을 톡해 κ²€μƒ‰ν•©λ‹ˆλ‹€. 이λ₯Ό μœ„ν•΄ ν•¨μˆ˜ μ½”λ“œμ˜ 지역 μŠ€μ½”ν”„λŠ” μƒμœ„ μŠ€μ½”ν”„μΈ μ „μ—­ μŠ€μ½”ν”„μ™€ μ—°κ²°λ˜μ–΄μ•Ό ν•©λ‹ˆλ‹€. ν•˜μ§€λ§Œ `console.log`μ‹λ³„μžλŠ” μŠ€μ½”ν”„μ²΄μΈμ— λ“±λ‘λ˜μ–΄ μžˆμ§€ μ•Šκ³  μ „μ—­ 객체에 ν”„λ‘œνΌν‹°λ‘œ μ‘΄μž¬ν•©λ‹ˆλ‹€. μ΄λŠ” μ „μ—­ 객체의 ν”„λ‘œνΌν‹°κ°€ 마치 μ „μ—­ λ³€μˆ˜μ²˜λŸΌ μ „μ—­ μŠ€μ½”ν”„λ₯Ό 톡해 검색 κ°€λŠ₯ν•΄μ•Ό ν•œλ‹€λŠ” 것을 μ˜λ―Έν•©λ‹ˆλ‹€.

λ‹€μŒμ€ `log`ν”„λ‘œνΌν‹°λ₯Ό `console`객체의 ν”„λ‘œν† νƒ€μž… 체인을 톡해 κ²€μƒ‰ν•©λ‹ˆλ‹€. κ·Έν›„ `console.log`λ©”μ„œλ“œμ— 인수둜 μ „λ‹¬λœ ν‘œν˜„μ‹ `a+x+y`κ°€ ν‰κ°€λ©λ‹ˆλ‹€. `a`,`x`,`y` μ‹λ³„μžλŠ” μŠ€μ½”ν”„λŠ” μŠ€μ½”ν”„ 체인을 톡해 κ²€μƒ‰ν•©λ‹ˆλ‹€. `console.log`λ©”μ„œλ“œμ˜ 싀행이 μ’…λ£Œλ˜λ©΄ ν•¨μˆ˜ μ½”λ“œ μ‹€ν–‰ 과정이 μ’…λ£Œλ˜κ³  ν•¨μˆ˜ 호좜 μ΄μ „μœΌλ‘œ λ˜λŒμ•„κ°€ μ „μ—­ μ½”λ“œ 싀행을 κ³„μ†ν•©λ‹ˆλ‹€.

이처럼 μ½”λ“œκ°€ μ‹€ν–‰λ˜λ €λ©΄ μŠ€μ½”ν”„λ₯Ό κ΅¬λΆ„ν•˜μ—¬ μ‹λ³„μžμ™€ λ°”μΈλ”©λœ 값이 κ΄€λ¦¬λ˜μ–΄μ•Ό ν•©λ‹ˆλ‹€. 그리고 쀑첩 관계에 μ˜ν•΄ μŠ€μ½”ν”„ 체인을 ν˜•μ„±ν•˜μ—¬ μ‹λ³„μžλ₯Ό 검색할 수 μžˆμ–΄μ•Ό ν•˜κ³ , μ „μ—­ 객체의 ν”„λ‘œνΌν‹°λ„ μ „μ—­ λ³€μˆ˜μ²˜λŸΌ 검색할 수 μžˆμ–΄μ•Ό ν•©λ‹ˆλ‹€. λ˜ν•œ ν•¨μˆ˜ 호좜이 μ’…λ£Œλ˜λ©΄ ν•¨μˆ˜ 호좜 μ΄μ „μœΌλ‘œ λ˜λŒμ•„κ°€κΈ° μœ„ν•΄ ν˜„μž¬ 싀행쀑인 μ½”λ“œμ™€ 이전에 μ‹€ν–‰ν•˜λ˜ μ½”λ“œλ₯Ό κ΅¬λΆ„ν•˜μ—¬ κ΄€λ¦¬ν•΄μ•Όν•©λ‹ˆλ‹€. **이처럼 μ½”λ“œκ°€ μ‹€ν–‰λ˜λ €λ©΄ λ‹€μŒκ³Ό 같이 μŠ€μ½”ν”„, μ‹λ³„μž, μ½”λ“œ μ‹€ν–‰ μˆœμ„œ λ“±μ˜ 관리가 ν•„μš”ν•©λ‹ˆλ‹€.**

- ❓ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ
- 선언에 μ˜ν•΄ μƒμ„±λœ λͺ¨λ“  μ‹λ³„μžλ₯Ό μŠ€μ½”ν”„λ₯Ό κ΅¬λΆ„ν•˜μ—¬ λ“±λ‘ν•˜κ³  μƒνƒœ λ³€ν™”(μ‹λ³„μžμ— λ°”μΈλ­λœ κ°’μ˜ λ³€ν™”)λ₯Ό μ§€μ†μ μœΌλ‘œ 관리할 수 μžˆμ–΄μ•Ό ν•©λ‹ˆλ‹€.
- μŠ€μ½”ν”„λŠ” 쀑첩 관계에 μ˜ν•΄ μŠ€μ½”ν”„ 체인을 ν˜•μ„±ν•΄μ•Ό ν•©λ‹ˆλ‹€.
- ν˜„μž¬ μ‹€ν–‰ 쀑인 μ½”λ“œμ˜ μ‹€ν–‰ μˆœμ„œλ₯Ό λ³€κ²½(예λ₯Ό λ“€μ–΄, ν•¨μˆ˜ ν˜ΈμΆœμ— μ˜ν•΄ μ‹€ν–‰ μˆœμ„œ λ³€κ²½)ν•  수 μžˆμ–΄μ•Ό ν•˜λ©° λ‹€μ‹œ λ˜λŒμ•„κ°ˆ μˆ˜λ„ μžˆμ–΄μ•Ό ν•©λ‹ˆλ‹€.)

이처럼 **μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” μ†ŒμŠ€μ½”λ“œλ₯Ό μ‹€ν–‰ν•˜λŠ” 데 ν•„μš”ν•œ ν™˜κ²½μ„ μ œκ³΅ν•˜κ³  μ½”λ“œμ˜ μ‹€ν–‰ κ²°κ³Όλ₯Ό μ‹€μ œλ‘œ κ΄€λ¦¬ν•˜λŠ” μ˜μ—­μž…λ‹ˆλ‹€.**
μ‰½κ²Œ 말해 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” μ‹λ³„μž(λ³€μˆ˜, ν•¨μˆ˜, 클래슀 λ“±μ˜ 이름)λ₯Ό λ“±λ‘ν•˜κ³  κ΄€λ¦¬ν•˜λŠ” μŠ€μ½”ν”„μ™€ μ½”λ“œ μ‹€ν–‰ μˆœμ„œ 관리λ₯Ό κ΅¬ν˜„ν•œ λ‚΄λΆ€ λ©”μ»€λ‹ˆμ¦˜μœΌλ‘œ, λͺ¨λ“  μ½”λ“œλŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό 톡해 μ‹€ν–‰λ˜κ³  κ΄€λ¦¬λ©λ‹ˆλ‹€.


⭐️ μ‹λ³„μžμ™€ μŠ€μ½”ν”„λŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ `λ ‰μ‹œμ»¬ ν™˜κ²½`으둜 κ΄€λ¦¬ν•˜κ³  μ½”λ“œ μ‹€ν–‰ μˆœμ„œλŠ” `μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒ`으둜 κ΄€λ¦¬ν•©λ‹ˆλ‹€.

## 4. μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒ

```js
const x = 1;

function foo () {
const y = 2;

function bar () {
const z = 3;
console.log(x + y + z);
}
bar();
}

foo(); // 6
```

⬆️ μœ„ μ˜ˆμ œλŠ” μ†ŒμŠ€μ½”λ“œμ˜ νƒ€μž…μœΌλ‘œ λΆ„λ₯˜ν•  λ•Œ μ „μ—­ μ½”λ“œμ™€ ν•¨μˆ˜ μ½”λ“œλ‘œ 이루어져 μžˆμŠ΅λ‹ˆλ‹€.
μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 λ¨Όμ € μ „μ—­ μ½”λ“œλ₯Ό ν‰κ°€ν•˜μ—¬ μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μƒμ„±ν•©λ‹ˆλ‹€. 그리고 ν•¨μˆ˜κ°€ 호좜되면 ν•¨μˆ˜ μ½”λ“œλ₯Ό ν‰κ°€ν•˜μ—¬ ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μƒμ„±ν•©λ‹ˆλ‹€. μ΄λ•Œ μƒμ„±λœ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” `μŠ€νƒ`자료ꡬ쑰둜 κ΄€λ¦¬λ©λ‹ˆλ‹€. 이λ₯Ό `μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒ`이라고 λΆ€λ¦…λ‹ˆλ‹€. μœ„ μ½”λ“œλ₯Ό μ‹€ν–‰ν•˜λ©΄ μ½”λ“œκ°€ μ‹€ν–‰λ˜λŠ” μ‹œκ°„μ˜ 흐름에 따라 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ—λŠ” λ‹€μŒκ³Ό 같이 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μΆ”κ°€λ˜κ³  μ œκ±°λ©λ‹ˆλ‹€.

![image](https://github.com/Ryan-Dia/Javascript-Deep-Dive-Study/assets/76567238/26d8b3a3-d5ee-438d-8cd9-8eaec3e75306)


### 1️⃣ μ „μ—­ μ½”λ“œμ˜ 평가와 μ‹€ν–‰

μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 λ¨Όμ € μ „μ—­ μ½”λ“œλ₯Ό ν‰κ°€ν•˜μ—¬ μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μƒμ„±ν•˜κ³  μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μƒμ„±ν•˜κ³  μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ— ν‘Έμ‹œν•©λ‹ˆλ‹€. μ΄λ•Œ μ „μ—­ λ³€μˆ˜ `x`와 μ „μ—­ ν•¨μˆ˜ `foo`λŠ” μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ— λ“±λ‘λ©λ‹ˆλ‹€. 이후 μ „μ—­ μ½”λ“œκ°€ μ‹€ν–‰λ˜κΈ° μ‹œμž‘ν•˜μ—¬ μ „μ—­ λ³€μˆ˜ `x`에 값이 ν• λ‹Ήλ˜κ³  μ „μ—­ ν•¨μˆ˜ `foo`κ°€ ν˜ΈμΆœλ©λ‹ˆλ‹€.
### 2️⃣ foo ν•¨μˆ˜ μ½”λ“œμ˜ 평가와 μ‹€ν–‰

μ „μ—­ ν•¨μˆ˜ `foo`κ°€ 호좜되면 μ „μ—­ μ½”λ“œμ˜ 싀행은 μΌμ‹œ μ€‘λ‹¨λ˜κ³  μ½”λ“œμ˜ μ œμ–΄κΆŒμ΄ `foo`ν•¨μˆ˜ λ‚΄λΆ€λ‘œ μ΄λ™ν•©λ‹ˆλ‹€. μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 `foo`ν•¨μˆ˜ λ‚΄λΆ€μ˜ ν•¨μˆ˜ μ½”λ“œλ₯Ό ν‰κ°€ν•˜μ—¬ `foo`ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μƒμ„±ν•˜κ³  μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ— ν‘Έμ‹œν•©λ‹ˆλ‹€. μ΄λ•Œ `foo`ν•¨μˆ˜μ˜ 지역 λ³€μˆ˜μ™€ `y`와 쀑첩 ν•¨μˆ˜ `bar`κ°€ `foo`ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ— λ“±λ‘λ©λ‹ˆλ‹€. 이후 `foo`ν•¨μˆ˜ μ½”λ“œκ°€ μ‹€ν–‰λ˜κΈ° μ‹œμž‘ν•˜μ—¬ 지역 λ³€μˆ˜ `y`에 값이 ν• λ‹Ήλ˜κ³  쀑첩 ν•¨μˆ˜ `bar`κ°€ ν˜ΈμΆœλ©λ‹ˆλ‹€.

### 3️⃣ bar ν•¨μˆ˜ μ½”λ“œμ˜ 평가와 μ‹€ν–‰

쀑첩 ν•¨μˆ˜ `bar`κ°€ 호좜되면 `foo`ν•¨μˆ˜ μ½”λ“œμ˜ 싀행은 μΌμ‹œ μ€‘λ‹¨λ˜κ³  μ½”λ“œμ˜ μ œμ–΄κΆŒμ΄ `bar`ν•¨μˆ˜ λ‚΄λΆ€λ‘œ μ΄λ™ν•©λ‹ˆλ‹€. μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 `bar`ν•¨μˆ˜ λ‚΄λΆ€μ˜ ν•¨μˆ˜ μ½”λ“œλ₯Ό ν‰κ°€ν•˜μ—¬ `bar`ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μƒμ„±ν•˜κ³  μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ— ν‘Έμ‹œν•©λ‹ˆλ‹€. μ΄λ•Œ `bar`ν•¨μˆ˜μ˜ 지역 λ³€μˆ˜ `z`κ°€ `bar`ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ— λ“±λ‘λ©λ‹ˆλ‹€. 이후, `bar`ν•¨μˆ˜ μ½”λ“œκ°€ μ‹€ν–‰λ˜κΈ° μ‹œμž‘ν•˜μ—¬ 지역 λ³€μˆ˜ `z`에 값이 ν• λ‹Ήλ˜κ³  `console.log`λ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν•œ 이후, `bar`ν•¨μˆ˜λŠ” μ’…λ£Œλ©λ‹ˆλ‹€.

### 4️⃣ foo ν•¨μˆ˜ μ½”λ“œλ‘œ 볡귀

`bar`ν•¨μˆ˜κ°€ μ’…λ£Œλ˜λ©΄ μ½”λ“œμ˜ μ œμ–΄κΆŒμ€ λ‹€μ‹œ `foo`ν•¨μˆ˜λ‘œ μ΄λ™ν•©λ‹ˆλ‹€. μ΄λ•Œ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 `bar`ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ—μ„œ νŒν•˜μ—¬ μ œκ±°ν•©λ‹ˆλ‹€. 그리고 `foo`ν•¨μˆ˜λŠ” 더 이상 μ‹€ν–‰ν•  μ½”λ“œκ°€ μ—†μœΌλ―€λ‘œ μ’…λ£Œλ©λ‹ˆλ‹€.

### 5️⃣ μ „μ—­ μ½”λ“œλ‘œ 볡귀

`foo`ν•¨μˆ˜κ°€ μ’…λ£Œλ˜λ©΄ μ½”λ“œμ˜ μ œμ–΄κΆŒμ€ λ‹€μ‹œ μ „μ—­ μ½”λ“œλ‘œ μ΄λ™ν•©λ‹ˆλ‹€. μ΄λ•Œ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 `foo`ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ—μ„œ νŒν•˜μ—¬ μ œκ±°ν•©λ‹ˆλ‹€. 그리고 더 이상 μ‹€ν–‰ν•  μ½”λ“œκ°€ 남아 μžˆμ§€ μ•ŠμœΌλ―€λ‘œ μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ„ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ—μ„œ νŒλ˜μ–΄ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ—λŠ” 아무것도 λ‚¨μ•„μžˆμ§€ μ•Šκ²Œλ©λ‹ˆλ‹€.

이처럼 **μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ€ μ½”λ“œμ˜ μ‹€ν–‰ μˆœμ„œλ₯Ό κ΄€λ¦¬ν•©λ‹ˆλ‹€.**
μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ˜ μ΅œμƒμœ„μ— μ‘΄μž¬ν•˜λŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό **μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ**라 λΆ€λ¦…λ‹ˆλ‹€.

<br>

## 5. λ ‰μ‹œμ»¬ ν™˜κ²½

`λ ‰μ‹œμ»¬ ν™˜κ²½`은 μ‹λ³„μžμ™€ μ‹λ³„μžμ— λ°”μΈλ”©λœ κ°’, 그리고 μƒμœ„ μŠ€μ½”ν”„μ— λŒ€ν•œ μ°Έμ‘°λ₯Ό κΈ°λ‘ν•˜λŠ” 자료ꡬ쑰둜 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό κ΅¬μ„±ν•˜λŠ” μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€. μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ΄ μ½”λ“œμ˜ μ‹€ν–‰ μˆœμ„œλ₯Ό κ΄€λ¦¬ν•œλ‹€λ©΄ λ ‰μ‹œμ»¬ ν™˜κ²½μ€ μŠ€μ½”ν”„μ™€ μ‹λ³„μžλ₯Ό κ΄€λ¦¬ν•©λ‹ˆλ‹€.

![image](https://github.com/Ryan-Dia/Javascript-Deep-Dive-Study/assets/76567238/c8a37bc5-aef4-46c9-9e14-2dab1759aa36)

λ ‰μ‹œμ»¬ ν™˜κ²½μ€ 킀와 값을 κ°–λŠ” 객체 ν˜•νƒœμ˜ μŠ€μ½”ν”„(μ „μ—­, ν•¨μˆ˜, 블둝 μŠ€μ½”ν”„)λ₯Ό μƒμ„±ν•˜μ—¬ μ‹λ³„μžλ₯Ό ν‚€λ‘œ λ“±λ‘ν•˜κ³  μ‹λ³„μžμ— λ°”μΈλ”©λœ 값을 κ΄€λ¦¬ν•©λ‹ˆλ‹€. 즉, λ ‰μ‹œμ»¬ ν™˜κ²½μ€ μŠ€μ½”ν”„λ₯Ό κ΅¬λΆ„ν•˜μ—¬ μ‹λ³„μžλ₯Ό λ“±λ‘ν•˜κ³  κ΄€λ¦¬ν•˜λŠ” μ €μž₯μ†Œ 역할을 ν•˜λŠ” λ ‰μ‹œμ»¬ μŠ€μ½”ν”„μ˜ μ‹€μ²΄μž…λ‹ˆλ‹€.

μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” `LexicalEnvironment`μ»΄ν¬λ„ŒνŠΈμ™€ `VariableEnvironment`μ»΄ν¬λ„ŒνŠΈλ‘œ κ΅¬μ„±λ©λ‹ˆλ‹€. 생성 초기의 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ™€ λ ‰μ‹œμ»¬ ν™˜κ²½μ„ 그림으둜 ν‘œν˜„ν•˜λ©΄ λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

![image](https://github.com/Ryan-Dia/Javascript-Deep-Dive-Study/assets/76567238/80215aaf-2c11-44df-a055-f146b58403f3)

생성 μ΄ˆκΈ°μ— `LexicalEnvironment` μ»΄ν¬λ„ŒνŠΈμ™€ `VariableEnvironment` μ»΄ν¬λ„ŒνŠΈλŠ” ν•˜λ‚˜μ˜ λ™μΌν•œ λ ‰μ‹œμ»¬ ν™˜κ²½μ„ μ°Έμ‘°ν•©λ‹ˆλ‹€. 이후 λͺ‡ 가지 상황을 λ§Œλ‚˜λ©΄ `VariableEnvironment` μ»΄ν¬λ„ŒνŠΈλ₯Ό μœ„ν•œ μƒˆλ‘œμš΄ λ ‰μ‹œμ»¬ ν™˜κ²½μ„ μƒμ„±ν•˜μ—¬ μƒμ„±ν•˜κ³ , μ΄λ•ŒλΆ€ν„° `VariableEnvrionment` μ»΄ν¬λ„ŒνŠΈμ™€ `LexicalEnvironment` μ»΄ν¬λ„ŒνŠΈλŠ” λ‚΄μš©μ΄ λ‹¬λΌμ§€λŠ” κ²½μš°λ„ μžˆμŠ΅λ‹ˆλ‹€.

λ ‰μ‹œμ»¬ ν™˜κ²½μ€ λ‹€μŒκ³Ό 같이 두 개의 μ»΄ν¬λ„ŒνŠΈλ‘œ κ΅¬μ„±λ©λ‹ˆλ‹€.

![image](https://github.com/Ryan-Dia/Javascript-Deep-Dive-Study/assets/76567238/8f0d75b2-39ee-48b7-9349-9509321f579a)

1. ν™˜κ²½ λ ˆμ½”λ“œ Enviroment Record

μŠ€μ½”ν”„μ— ν¬ν•¨λœ μ‹λ³„μžλ₯Ό λ“±λ‘ν•˜κ³  λ“±λ‘λœ μ‹λ³„μžμ— λ°”μΈλ”©λœ 값을 κ΄€λ¦¬ν•˜λŠ” μ €μž₯μ†Œμž…λ‹ˆλ‹€. ν™˜κ²½ λ ˆμ½”λ“œλŠ” μ†ŒμŠ€μ½”λ“œμ˜ νƒ€μž…μ— 따라 κ΄€λ¦¬ν•˜λŠ” λ‚΄μš©μ— 차이가 μžˆμŠ΅λ‹ˆλ‹€.

2. μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘° Outer Lexical Enviroment Reference

μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘°λŠ” μƒμœ„ μŠ€μ½”ν”„λ₯Ό κ°€λ¦¬ν‚΅λ‹ˆλ‹€. μ΄λ•Œ μƒμœ„ μŠ€μ½”ν”„λž€ μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½, 즉 ν•΄λ‹Ή μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μƒμ„±ν•œ μ†ŒμŠ€μ½”λ“œλ₯Ό ν¬ν•¨ν•˜λŠ” μƒμœ„ μ½”λ“œμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ„ λ§ν•©λ‹ˆλ‹€. μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘°λ₯Ό 톡해 단방ν–₯ λ§ν¬λ“œ 리슀트인 μŠ€μ½”ν”„ 체인을 κ΅¬ν˜„ν•©λ‹ˆλ‹€.

0 comments on commit 82179b8

Please sign in to comment.