Skip to content

Commit

Permalink
Merge pull request #975 from Ryan-Dia/ryan-dia
Browse files Browse the repository at this point in the history
 23-3μž₯ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ - 강철원
  • Loading branch information
Ryan-Dia authored Dec 11, 2023
2 parents b7e2258 + 74986fe commit 27754ec
Showing 1 changed file with 114 additions and 0 deletions.
114 changes: 114 additions & 0 deletions docs/23_μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ/강철원B.md
Original file line number Diff line number Diff line change
Expand Up @@ -210,3 +210,117 @@ foo(); // 6
2. μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘° Outer Lexical Enviroment Reference

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

## 6. μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ 생성과 μ‹λ³„μž 검색 κ³Όμ •

```js
var x = 1;
const y = 2;

function foo(a){
var x = 3;
const y = 4;

function bar(b){
const z = 5;
console.log(a+b+x+y+z);
}
bar(10);
}

foo(20);
```

### 1) μ „μ—­ 객체 생성

μ „μ—­ κ°μ²΄λŠ” μ „μ—­ μ½”λ“œκ°€ ν‰κ°€λ˜κΈ° 이전에 μƒμ„±λœλ‹€.
μ΄λ•Œ μ „μ—­ κ°μ²΄μ—λŠ” 빌트인 μ „μ—­ ν”„λ‘œνΌν‹°μ™€ 빌트인 μ „μ—­ ν•¨μˆ˜, 그리고 ν‘œμ€€ 빌트인 객체가
μΆ”κ°€λ˜λ©° λ™μž‘ ν™˜κ²½(ν΄λΌμ΄μ–ΈνŠΈ μ‚¬μ΄λ“œ λ˜λŠ” μ„œλ²„ μ‚¬μ΄λ“œ) 에 따라
ν΄λΌμ΄μ–ΈνŠΈ μ‚¬μ΄λ“œ Web API λ˜λŠ” νŠΉμ •ν™˜κ²½μ„ μœ„ν•œ 호슀트 객체λ₯Ό ν¬ν•¨ν•œλ‹€.

μ „μ—­ 객체도 `Object.prototype`을 μƒμ†λ°›λŠ”λ‹€.
즉, μ „μ—­ 객체도 `ν”„λ‘œν† νƒ€μž… 체인의 일원`이닀.

```js
// Object.prototype.toString
window.toString(); // "[object Window]"

window.__proto__.__proto__.__proto__.__proto__ === Object.prototype; // true

```

### 2) μ „μ—­ μ½”λ“œ 평가

πŸ‘ μ „μ—­ μ½”λ“œ 평가 진행 μˆœμ„œ

μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ 생성

μ „μ—­ λ ‰μ‹œμ»¬ ν™˜κ²½ 생성

2.1 μ „μ—­ ν™˜κ²½ λ ˆμ½”λ“œ 생성

2.1.1 객체 ν™˜κ²½ λ ˆμ½”λ“œ 생성

2.1.2 선언적 ν™˜κ²½ λ ˆμ½”λ“œ 생성

2.2 this 바인딩

2.3 μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘° κ²°μ •

### 3) μ „μ—­ μ½”λ“œ μ‹€ν–‰

이제 μ „μ—­ μ½”λ“œκ°€ 순차적으둜 μ‹€ν–‰λ©λ‹ˆλ‹€. λ³€μˆ˜ 할당문이 μ‹€ν–‰λ˜μ–΄ μ „μ—­ λ³€μˆ˜ x, y에 값이 ν• λ‹Ήλ˜κ³ foo ν•¨μˆ˜κ°€ ν˜ΈμΆœλ©λ‹ˆλ‹€.

λ³€μˆ˜ ν• λ‹Ήλ¬Έ, ν•¨μˆ˜ ν˜ΈμΆœλ¬Έμ„ μ‹€ν–‰ν•˜λ €λ©΄ λ¨Όμ € μ„ μ–Έλœ μ‹λ³„μžμΈμ§€ ν™•μΈν•©λ‹ˆλ‹€. λ˜ν•œ λ™μΌν•œ μ΄λ¦„μ˜ μ‹λ³„μžκ°€ λ‹€λ₯Έ μŠ€μ½”ν”„μ— μ‘΄μž¬ν•œλ‹€λ©΄ μ–΄λŠ μŠ€μ½”ν”„μ˜ μ‹λ³„μžλ₯Ό 참쑰할지 κ²°μ •ν•˜λŠ”λ° 이λ₯Ό μ‹λ³„μž κ²°μ •(identifier resolution)이라 ν•©λ‹ˆλ‹€.

μ‹λ³„μž 결정을 μœ„ν•΄ μ‹λ³„μžλ₯Ό 검색할 λ•ŒλŠ” μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ—μ„œ μ‹λ³„μžλ₯Ό κ²€μƒ‰ν•˜κΈ° μ‹œμž‘ν•©λ‹ˆλ‹€. λ§Œμ•½ ν•΄λ‹Ή μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ—μ„œ μ‹λ³„μžλ₯Ό 검색할 수 μ—†μœΌλ©΄ μƒμœ„ μŠ€μ½”ν”„λ‘œ μ΄λ™ν•˜μ—¬ μ‹λ³„μžλ₯Ό κ²€μƒ‰ν•©λ‹ˆλ‹€.

β‡’ 이것이 μŠ€μ½”ν”„ 체인의 λ™μž‘ 원리
μ „μ—­ λ ‰μ‹œμ»¬ ν™˜κ²½μ€ μŠ€μ½”ν”„ 체인의 μ’…μ μ΄λ―€λ‘œ μ „μ—­ λ ‰μ‹œμ»¬ ν™˜κ²½μ—μ„œ 검색할 수 μ—†λŠ” μ‹λ³„μžλŠ” μ°Έμ‘° μ—λŸ¬(ReferenceError)λ₯Ό λ°œμƒμ‹œν‚΅λ‹ˆλ‹€.

### 4) foo ν•¨μˆ˜ μ½”λ“œ 평가

foo ν•¨μˆ˜κ°€ 호좜되면 μ „μ—­ μ½”λ“œμ˜ 싀행을 μΌμ‹œ μ€‘λ‹¨ν•˜κ³  foo ν•¨μˆ˜ λ‚΄λΆ€λ‘œ μ½”λ“œμ˜ μ œμ–΄κΆŒμ΄ μ΄λ™ν•©λ‹ˆλ‹€.

그리고 ν•¨μˆ˜ μ½”λ“œλ₯Ό λ‹€μŒ μˆœμ„œλ‘œ ν‰κ°€ν•©λ‹ˆλ‹€.

1. ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ 생성
2. ν•¨μˆ˜ λ ‰μ‹œμ»¬ ν™˜κ²½ 생성
2.1 ν•¨μˆ˜ ν™˜κ²½ λ ˆμ½”λ“œ 생성
2.2 this 바인딩
2.3 μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘° κ²°μ •

### 5) foo ν•¨μˆ˜ μ½”λ“œ μ‹€ν–‰

이제 λŸ°νƒ€μž„μ΄ μ‹œμž‘λ˜μ–΄ `foo` ν•¨μˆ˜ μ½”λ“œκ°€ 순차적으둜 μ‹€ν–‰λ©λ‹ˆλ‹€. λ§€κ°œλ³€μˆ˜μ— μΈμˆ˜κ°€ ν• λ‹Ήλ˜κ³ , λ³€μˆ˜ 할당문이 μ‹€ν–‰λ˜μ–΄ 지역 λ³€μˆ˜ x,y에 값이 ν• λ‹Ήλ©λ‹ˆλ‹€. 그리고 ν•¨μˆ˜ `bar`κ°€ ν˜ΈμΆœλ©λ‹ˆλ‹€.

μ΄λ•Œ μ‹λ³„μž 결정을 μœ„ν•΄ μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ—μ„œ μ‹λ³„μžλ₯Ό κ²€μƒ‰ν•˜κΈ° μ‹œμž‘ν•©λ‹ˆλ‹€. ν˜„μž¬ μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” foo ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ΄λ―€λ‘œ foo ν•¨μˆ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ—μ„œ μ‹λ³„μž `x`, `y`λ₯Ό κ²€μƒ‰ν•΄μ„œ κ²€μƒ‰λœ μ‹λ³„μžμ— 값을 λ°”μΈλ”©λ©λ‹ˆλ‹€. λ§Œμ•½ μ‹λ³„μžκ°€ μ—†μœΌλ©΄ μƒμœ„ λ ‰μ‹œμ»¬ ν™˜κ²½μœΌλ‘œ μ΄λ™ν•˜μ—¬ μ‹λ³„μžλ₯Ό κ²€μƒ‰ν•©λ‹ˆλ‹€.

### 6) bar ν•¨μˆ˜ μ½”λ“œ 평가

`bar` ν•¨μˆ˜κ°€ 호좜되면 `bar` ν•¨μˆ˜ λ‚΄λΆ€λ‘œ μ½”λ“œμ˜ μ œμ–΄κΆŒμ΄ μ΄λ™ν•˜μ—¬ bar ν•¨μˆ˜ μ½”λ“œλ₯Ό ν‰κ°€ν•˜κΈ° μ‹œμž‘ν•©λ‹ˆλ‹€. μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ™€ λ ‰μ‹œμ»¬ ν™˜κ²½μ˜ 생성 과정은 foo ν•¨μˆ˜ μ½”λ“œ 평가와 λ™μΌν•©λ‹ˆλ‹€.

### 7) bar ν•¨μˆ˜ μ½”λ“œ μ‹€ν–‰

이제 λŸ°νƒ€μž„μ΄ μ‹œμž‘λ˜μ–΄ bar ν•¨μˆ˜ μ½”λ“œκ°€ 순차적으둜 μ‹€ν–‰λ©λ‹ˆλ‹€. λ§€κ°œλ³€μˆ˜μ— μΈμˆ˜κ°€ ν• λ‹Ήλ˜κ³ , λ³€μˆ˜ 할당문이 μ‹€ν–‰λ˜μ–΄ 지역 λ³€μˆ˜ `z`에 값이 ν• λ‹Ήλ©λ‹ˆλ‹€. 그리고 `console.log(a+b+x+y+z)`κ°€ μ‹€ν–‰λ©λ‹ˆλ‹€.

### 8) bar ν•¨μˆ˜ μ½”λ“œ μ‹€ν–‰ μ’…λ£Œ

`console.log` λ©”μ„œλ“œκ°€ 호좜되고 μ’…λ£Œν•˜λ©΄ λ”λŠ” μ‹€ν–‰ν•  μ½”λ“œκ°€ μ—†μœΌλ―€λ‘œ bar ν•¨μˆ˜ μ½”λ“œμ˜ 싀행이 μ’…λ£Œλ©λ‹ˆλ‹€. μ΄λ•Œ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ—μ„œ `bar` ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ `pop`λ˜μ–΄ 제거되고 μŠ€νƒμ— λ‚¨μ•„μžˆλŠ” `foo` ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ 싀행쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ λ©λ‹ˆλ‹€.

`bar` ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μ œκ±°λ˜μ—ˆλ‹€κ³  ν•΄μ„œ bar ν•¨μˆ˜ λ ‰μ‹œμ»¬ ν™˜κ²½κΉŒμ§€ μ¦‰μ‹œ μ†Œλ©Έν•˜λŠ”κ²ƒμ€ μ•„λ‹™λ‹ˆλ‹€. 객체λ₯Ό ν¬ν•¨ν•œ λͺ¨λ“  값은 λˆ„κ΅°κ°€μ— μ˜ν•΄ μ°Έμ‘°λ˜μ§€ μ•Šμ„λ•Œ λΉ„λ‘œμ†Œ 가비지 컬렉터에 μ˜ν•΄ λ©”λͺ¨λ¦¬ κ³΅κ°„μ˜ 확보가 ν•΄μ œλ˜μ–΄ μ†Œλ©Έν•©λ‹ˆλ‹€.

λ ‰μ‹œμ»¬ ν™˜κ²½μ€ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ— μ˜ν•΄ μ°Έμ‘°λ˜κΈ°λŠ” ν•˜μ§€λ§Œ 독립적인 κ°μ²΄μž…λ‹ˆλ‹€. 객체λ₯Ό ν¬ν•¨ν•œ λͺ¨λ“  값은 λˆ„κ΅°κ°€μ— μ˜ν•΄ μ°Έμ‘°λ˜μ§€ μ•Šμ„ λ•Œ λΉ„μ†Œλ‘œ 가비지 컬렉터에 μ˜ν•΄ λ©”λͺ¨λ¦¬ κ³΅κ°„μ˜ 확보가 ν•΄μ œλ˜μ–΄ μ†Œλ©Έν•©λ‹ˆλ‹€.

`bar` ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μ†Œλ©Έλ˜μ—ˆλ‹€ ν•˜λ”λΌλ„ `bar` ν•¨μˆ˜ λ ‰μ‹œμ»¬μ„ λˆ„κ΅°κ°€ μ°Έμ‘°ν•˜κ³  μžˆλ‹€λ©΄ `bar` ν•¨μˆ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ€ μ†Œλ©Έν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

### 9) foo ν•¨μˆ˜ μ½”λ“œ μ‹€ν–‰ μ’…λ£Œ

`foo` ν•¨μˆ˜λ„ 더 이상 μ‹€ν–‰ν•  μ½”λ“œκ°€ λ‚¨μ•„μžˆμ§€ μ•ŠμœΌλ―€λ‘œ foo ν•¨μˆ˜ μ½”λ“œμ˜ 싀행이 μ’…λ£Œλ©λ‹ˆλ‹€. μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ—μ„œ `foo` ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ `pop`λ˜μ–΄ 제거되고 μ „μ—­ μ»¨ν…μŠ€νŠΈκ°€ 길생쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ λ©λ‹ˆλ‹€.

### 10) μ „μ—­ μ½”λ“œ μ‹€ν–‰ μ’…λ£Œ

`foo` ν•¨μˆ˜κ°€ μ’…λ£Œλ˜λ©΄ λ”λŠ” μ‹€ν–‰ν•  μ „μ—­ μ½”λ“œκ°€ μ—†μœΌλ―€λ‘œ μ „μ—­ μ½”λ“œμ˜ 싀행이 μ’…λ£Œλ˜κ³  μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ„ μŠ€νƒμ—μ„œ `pop` λ˜μ–΄ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ—λŠ” 아무것도 λ‚¨μ•„μžˆμ§€ μ•Šκ²Œ λ©λ‹ˆλ‹€.



0 comments on commit 27754ec

Please sign in to comment.