Skip to content

Commit

Permalink
Merge pull request #977 from nincoding/nincoding
Browse files Browse the repository at this point in the history
23-3μž₯ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ - ν•œμˆ˜μ§€
  • Loading branch information
Ryan-Dia authored Dec 11, 2023
2 parents 4499d68 + 70765d1 commit 714733c
Showing 1 changed file with 131 additions and 0 deletions.
131 changes: 131 additions & 0 deletions docs/23_μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ/ν•œμˆ˜μ§€.md
Original file line number Diff line number Diff line change
Expand Up @@ -214,3 +214,134 @@ function foo() {
- ν˜„μž¬ λ³€μˆ˜ ν™˜κ²½μ΄ μ€‘μ²©λœ μŠ€μ½”ν”„λ₯Ό 가지고 μžˆμ„ λ•Œ, μ™ΈλΆ€(μƒμœ„) μŠ€μ½”ν”„μ— λŒ€ν•œ μ°Έμ‘°λ₯Ό λ‚˜νƒ€λƒ„.

---

### πŸ“Œ 23-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); // 42
```

πŸ”Ž μœ„ 예제 μ½”λ“œλ₯Ό 톡해 <br>
`μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ 생성, μ½”λ“œ μ‹€ν–‰ 결과의 관리, μ‹λ³„μž 검색` 과정듀을 μ•Œμ•„λ³΄μž.

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

> **μ „μ—­ κ°μ²΄λŠ” μ „μ—­ μ½”λ“œκ°€ ν‰κ°€λ˜κΈ° 이전에 생성**λœλ‹€.
**μ „μ—­ 객체도 ν”„λ‘œν† νƒ€μž… 체인의 일원**이기에 `Object.prototype`을 μƒμ†λ°›λŠ”λ‹€.

<br>

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

> **μ†ŒμŠ€μ½”λ“œκ°€ λ‘œλ“œ**되면 **μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 μ „μ—­ μ½”λ“œλ₯Ό 평가**ν•œλ‹€.
**μ „μ—­ μ½”λ“œ ν‰κ°€μ˜ μˆœμ„œ**

- 1. μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ 생성
- 2. μ „μ—­ λ ‰μ‹œμ»¬ ν™˜κ²½ 생성
- 2-1. μ „μ—­ ν™˜κ²½ λ ˆμ½”λ“œ 생성
- 객체 ν™˜κ²½ λ ˆμ½”λ“œ 생성
- 선언적 ν™˜κ²½ λ ˆμ½”λ“œ 생성
- 2-2. this 바인딩
- 2-3. μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘° κ²°μ •

μœ„μ™€ 같은 과정을 걸쳐 μƒμ„±λœ μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ™€ λ ‰μ‹œμ»¬ ν™˜κ²½μ€ μ•„λž˜μ™€ κ°™λ‹€.

![](https://velog.velcdn.com/images/ninto_2/post/e4a3e5d9-0a5d-4a13-8faf-3f0cb7af8866/image.png)

<br>

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

μ „μ—­ μ½”λ“œκ°€ 순차적으둜 μ‹€ν–‰λ˜κΈ° μ‹œμž‘ν•˜λ©΄, **λ³€μˆ˜ 할당문이 μ‹€ν–‰λ˜μ–΄ μ „μ—­ λ³€μˆ˜μ— 값이 ν• λ‹Ή**λœλ‹€.

μ‹λ³„μž 결정을 μœ„ν•΄ μ‹λ³„μžλ₯Ό 검색할 λ•ŒλŠ” **μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ—μ„œ μ‹λ³„μžλ₯Ό κ²€μƒ‰ν•˜κΈ° μ‹œμž‘**ν•œλ‹€.

- μ‹λ³„μž κ²°μ •: μ–΄λŠ μŠ€μ½”ν”„μ˜ μ‹λ³„μžλ₯Ό μ°Έμ‘°ν•˜λ©΄ λ˜λŠ”μ§€ κ²°μ •ν•˜λŠ” 것.

**μ„ μ–Έλœ μ‹λ³„μžλŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ˜ ν™˜κ²½ λ ˆμ½”λ“œμ— 등둝**λ˜μ–΄μžˆλ‹€.

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

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

그리고 **ν•¨μˆ˜ μ½”λ“œλ₯Ό ν‰κ°€ν•˜κΈ° μ‹œμž‘**ν•œλ‹€.

**ν•¨μˆ˜ μ½”λ“œμ˜ 평가 μˆœμ„œ**

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

<br>

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

**λŸ°νƒ€μž„μ΄ μ‹œμž‘**λ˜μ–΄ foo ν•¨μˆ˜μ˜ **μ†ŒμŠ€μ½”λ“œκ°€ 순차적으둜 μ‹€ν–‰λ˜κΈ° μ‹œμž‘**ν•œλ‹€.

μ΄λ•Œ **μ‹λ³„μž 결정을 μœ„ν•΄ μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ—μ„œ μ‹λ³„μžλ₯Ό κ²€μƒ‰ν•˜κΈ° μ‹œμž‘**ν•œλ‹€.

<br>

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

bar ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜κΈ° 직전 μƒν™©μ—μ„œ,
bar ν•¨μˆ˜κ°€ 호좜되면 bar ν•¨μˆ˜ λ‚΄λΆ€λ‘œ **μ½”λ“œμ˜ μ œμ–΄κΆŒμ΄ 이동**λœλ‹€.

그리고 bar ν•¨μˆ˜ μ½”λ“œλ₯Ό ν‰κ°€ν•˜κΈ° μ‹œμž‘ν•œλ‹€.

<br>

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

**λŸ°νƒ€μž„μ΄ μ‹œμž‘**λ˜μ–΄ bar ν•¨μˆ˜μ˜ **μ†ŒμŠ€μ½”λ“œκ°€ 순차적으둜 μ‹€ν–‰λ˜κΈ° μ‹œμž‘**ν•œλ‹€.

- 1. console μ‹λ³„μž 검색
- 2. log λ©”μ„œλ“œ 검색
- 3. ν‘œν˜„μ‹ a + b + x + y + z의 평가

<br>

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

bar ν•¨μˆ˜ μ½”λ“œμ˜ 싀행이 μ’…λ£Œλ˜λ©΄, μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ—μ„œ bar ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ popλ˜μ–΄ μ œκ±°λœλ‹€.

κ·Έ λ’€, foo μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ 싀행쀑인 μ»¨ν…μŠ€νŠΈκ°€ λœλ‹€.

bar ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μ œκ±°λ˜μ—ˆλ‹€κ³  bar ν•¨μˆ˜ λ ‰μ‹œμ»¬ ν™˜κ²½λ„ μ¦‰μ‹œ μ†Œλ©Έλ˜λŠ” 것은 μ•„λ‹ˆλ‹€.

`λ ‰μ‹œμ»¬ ν™˜κ²½μ€ 독립적인 객체`이기 λ•Œλ¬Έμ— bar ν•¨μˆ˜μ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μ†Œλ©Έλ˜μ—ˆλ‹€ ν•˜λ”λΌλ„ **λˆ„κ΅°κ°€ μ°Έμ‘°ν•˜κ³  μžˆμ§€ μ•Šμ„ λ•Œ λΉ„λ‘œμ†Œ 가비지 μ»¬λ ‰ν„°μ˜ λŒ€μƒμ΄ λœλ‹€.**

<br>

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

barν•¨μˆ˜κ°€ μ’…λ£Œν•˜λ©΄ 더 이상 μ‹€ν–‰ν•  μ½”λ“œκ°€ μ—†μœΌλ―€λ‘œ foo ν•¨μˆ˜ μ½”λ“œμ˜ 싀행이 μ’…λ£Œλœλ‹€.

μ΄λ•Œ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ—μ„œ foo ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ popλ˜μ–΄ 제거되고, <br>
μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ λœλ‹€.

<br>

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

fooν•¨μˆ˜κ°€ μ’…λ£Œλ˜λ©΄ λ”λŠ” μ‹€ν–‰ν•  μ „μ—­ μ½”λ“œκ°€ μ—†λ‹€.

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

0 comments on commit 714733c

Please sign in to comment.