diff --git "a/docs/24_\355\201\264\353\241\234\354\240\200/\354\235\264\353\202\230\353\246\260.md" "b/docs/24_\355\201\264\353\241\234\354\240\200/\354\235\264\353\202\230\353\246\260.md" new file mode 100644 index 00000000..d3588a8c --- /dev/null +++ "b/docs/24_\355\201\264\353\241\234\354\240\200/\354\235\264\353\202\230\353\246\260.md" @@ -0,0 +1,120 @@ +# 🎯 24 ν΄λ‘œμ € + +[24.1 λ ‰μ‹œμ»¬ μŠ€μ½”ν”„](#1-λ ‰μ‹œμ»¬-μŠ€μ½”ν”„) +[24.2 ν•¨μˆ˜ 객체의 λ‚΄λΆ€ 슬둯 [[Environment]]](#2-ν•¨μˆ˜-객체의-λ‚΄λΆ€-슬둯-environment) +[24.3 ν΄λ‘œμ €μ™€ λ ‰μ‹œμ»¬ ν™˜κ²½](#3-ν΄λ‘œμ €μ™€-λ ‰μ‹œμ»¬-ν™˜κ²½) + +## 0. ν΄λ‘œμ € + +`ν΄λ‘œμ €λŠ” ν•¨μˆ˜μ™€ κ·Έ ν•¨μˆ˜κ°€ μ„ μ–Έλœ λ ‰μ‹œμ»¬ ν™˜κ²½κ³Όμ˜ 쑰합이닀.` + +```javascript +const x = 1; + +function outerFunc() { + const x = 10; + function innerFunc() { + console.log(x); // 10 + } + + innerFunc(); +} + +outerFunc(); +``` + +μœ„ μ˜ˆμ œμ—μ„œ outerFunc ν•¨μˆ˜μ—μ„œ 쀑첩 ν•¨μˆ˜ innerFuncκ°€ μ •μ˜ 및 ν˜ΈμΆœλ˜μ—ˆλ‹€. +μ΄λ•Œ 쀑첩 ν•¨μˆ˜ innerFunc의 μƒμœ„ μŠ€μ½”ν”„λŠ” μ™ΈλΆ€ ν•¨μˆ˜ outerFunc의 μŠ€μ½”ν”„λ‹€. λ”°λΌμ„œ 쀑첩 ν•¨μˆ˜ innerFunc λ‚΄λΆ€μ—μ„œ μžμ‹ μ„ ν¬ν•¨ν•˜κ³  μžˆλŠ” μ™ΈλΆ€ ν•¨μˆ˜ outerFunc의 x λ³€μˆ˜μ— μ ‘κ·Όν•  수 μžˆλ‹€. + +λ§Œμ•½ innerFunc ν•¨μˆ˜κ°€ outerFunc ν•¨μˆ˜μ˜ λ‚΄λΆ€μ—μ„œ μ •μ˜λœ 쀑첩 ν•¨μˆ˜κ°€ μ•„λ‹ˆλΌλ©΄ innerFunc ν•¨μˆ˜λ₯Ό outerFunc ν•¨μˆ˜μ˜ λ‚΄λΆ€μ—μ„œ ν˜ΈμΆœν•œλ‹€ ν•˜λ”λΌλ„ outerFunc ν•¨μˆ˜μ˜ λ³€μˆ˜μ— μ ‘κ·Όν•  수 μ—†λ‹€. + +```javascript +const x = 1; + +function outerFunc() { + const x = 10; + innerFunc(); +} + +function innerFunc() { + console.log(x); // 1 +} + +outerFunc(); +``` + +πŸ‘‰πŸ» 이런 ν˜„μƒμ΄ λ‚˜νƒ€λ‚˜λŠ” μ΄μœ λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈκ°€ **λ ‰μ‹œμ»¬ μŠ€μ½”ν”„**λ₯Ό λ”°λ₯΄κΈ° λ•Œλ¬Έμ΄λ‹€. + +## 1. λ ‰μ‹œμ»¬ μŠ€μ½”ν”„ + +κ°€μž₯ μ€‘μš”ν•œ 것은 ν•¨μˆ˜λ₯Ό μ–΄λ””μ„œ ν˜ΈμΆœν–ˆλŠ”μ§€κ°€ μ•„λ‹ˆλΌ ν•¨μˆ˜λ₯Ό **어디에 μ •μ˜**ν–ˆλŠ”μ§€μ— 따라 μƒμœ„ μŠ€μ½”ν”„λ₯Ό κ²°μ •ν•œλ‹€λŠ” 것이며, 이λ₯Ό λ ‰μ‹œμ»¬ μŠ€μ½”ν”„λΌ ν•œλ‹€. + +μŠ€μ½”ν”„μ˜ μ‹€μ²΄λŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ΄λ‹€. 이 λ ‰μ‹œμ»¬ ν™˜κ²½μ€ μžμ‹ μ˜ μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘°λ₯Ό 톡해 μƒμœ„ λ ‰μ‹œμ»¬ ν™˜κ²½κ³Ό μ—°κ²°λœλ‹€. 이것이 λ°”λ‘œ μŠ€μ½”ν”„ 체인이닀. + +λ ‰μ‹œμ»¬ ν™˜κ²½μ˜ μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ 참쑰에 μ €μž₯ν•  μ°Έμ‘°κ°’ = μƒμœ„ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ 참쑰이며, 이것이 μƒμœ„ μŠ€μ½”ν”„μ΄λ‹€. + +λ ‰μ‹œμ»¬ μŠ€μ½”ν”„λ₯Ό λ‹€μŒκ³Ό 같이 μ •μ˜ν•˜μž. + +**λ ‰μ‹œμ»¬ ν™˜κ²½μ˜ μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ 참쑰에 μ €μž₯ν•  μ°Έμ‘°κ°’, 즉 μƒμœ„ μŠ€μ½”ν”„μ— λŒ€ν•œ μ°Έμ‘°λŠ” ν•¨μˆ˜ μ •μ˜κ°€ ν‰κ°€λ˜λŠ” μ‹œμ μ— ν•¨μˆ˜κ°€ μ •μ˜λœ ν™˜κ²½μ— μ˜ν•΄ κ²°μ •λœλ‹€.** + +## 2. ν•¨μˆ˜ 객체의 λ‚΄λΆ€ 슬둯 [[Environment]] + +ν•¨μˆ˜κ°€ μ •μ˜λœ μœ„μΉ˜μ™€ ν˜ΈμΆœλ˜λŠ” μœ„μΉ˜λŠ” λ‹€λ₯Ό 수 μžˆκΈ°μ—, λ ‰μ‹œμ»¬ μŠ€μ½”ν”„κ°€ κ°€λŠ₯ν•˜λ €λ©΄ ν•¨μˆ˜λŠ” μƒμœ„ μŠ€μ½”ν”„λ₯Ό 항상 κΈ°μ–΅ν•΄μ•Ό ν•œλ‹€. 이λ₯Ό μœ„ν•΄ ν•¨μˆ˜λŠ” μžμ‹ μ˜ λ‚΄λΆ€μŠ¬λ‘― [[Environment]]에 μžμ‹ μ΄ μ •μ˜λœ ν™˜κ²½μΈ μƒμœ„ μŠ€μ½”ν”„μ˜ μ°Έμ‘°λ₯Ό μ €μž₯ν•œλ‹€. +μ €μž₯된 μƒμœ„ μŠ€μ½”ν”„μ˜ μ°Έμ‘°λŠ” ν˜„μž¬ μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ„ 가리킨닀. + +예λ₯Ό λ“€μ–΄, μ „μ—­μ—μ„œ μ •μ˜λœ ν•¨μˆ˜ 선언문은 μ „μ—­ μ½”λ“œκ°€ ν‰κ°€λ˜λŠ” μ‹œμ μ— ν‰κ°€λ˜μ–΄ ν•¨μˆ˜ 객체λ₯Ό μƒμ„±ν•œλ‹€. μ΄λ•Œ μƒμ„±λœ ν•¨μˆ˜ 객체의 λ‚΄λΆ€ 슬둯 [[Environment]]μ—λŠ” ν•¨μˆ˜ μ •μ˜κ°€ ν‰κ°€λ˜λŠ” μ‹œμ , 즉 μ „μ—­ μ½”λ“œ 평가 μ‹œμ μ— μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μΈ μ „μ—­ λ ‰μ‹œμ»¬ ν™˜κ²½μ˜ μ°Έμ‘°κ°€ μ €μž₯λœλ‹€. + +**ν•¨μˆ˜ κ°μ²΄λŠ” λ‚΄λΆ€ 슬둯 [[Environment]]에 μ €μž₯ν•œ λ ‰μ‹œμ»¬ ν™˜κ²½μ˜ μ°Έμ‘°, 즉 μƒμœ„ μŠ€μ½”ν”„λ₯Ό μžμ‹ μ΄ μ‘΄μž¬ν•˜λŠ” ν•œ κΈ°μ–΅ν•œλ‹€.** + +## 3. ν΄λ‘œμ €μ™€ λ ‰μ‹œμ»¬ ν™˜κ²½ + +```javascript +const x = 1; + +function outer() { + const x = 10; + const inner = function () { + console.log(x); + }; + return inner; +} + +const innerFunc = outer(); +innerFunc(); +``` + +outer ν•¨μˆ˜ 호좜 β†’ outer ν•¨μˆ˜λŠ” 쀑첩 ν•¨μˆ˜ inner λ°˜ν™˜ β†’ 생λͺ… μ£ΌκΈ° 마감 β†’ outer ν•¨μˆ˜μ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μŠ€νƒμ—μ„œ 제거됨 β†’ outer ν•¨μˆ˜μ˜ 지역 λ³€μˆ˜ x 생λͺ… μ£ΌκΈ° 마감 β†’ x λ³€μˆ˜ μ ‘κ·Ό κ°€λŠ₯?? + +μœ„μ˜ μ½”λ“œ μ‹€ν–‰ κ²°κ³ΌλŠ” outer ν•¨μˆ˜μ˜ 지역 λ³€μˆ˜ x의 값인 10이닀. 이미 생λͺ… μ£ΌκΈ°κ°€ μ’…λ£Œλ˜μ–΄ 제거된 λ³€μˆ˜ xκ°€ λ‚˜μ˜¨ 것이닀. + +μ™ΈλΆ€ ν•¨μˆ˜λ³΄λ‹€ 쀑첩 ν•¨μˆ˜κ°€ 더 였래 μœ μ§€λ˜λŠ” 경우 쀑첩 ν•¨μˆ˜λŠ” 이미 생λͺ… μ£ΌκΈ°κ°€ μ’…λ£Œν•œ μ™ΈλΆ€ ν•¨μˆ˜μ˜ λ³€μˆ˜λ₯Ό μ°Έμ‘°ν•  수 μžˆλ‹€. μ΄λŸ¬ν•œ 쀑첩 ν•¨μˆ˜λ₯Ό **ν΄λ‘œμ €**라 λΆ€λ₯Έλ‹€. + +μœ„μ˜ 예제 μ½”λ“œλ₯Ό λ‹€μ‹œ μ‚΄νŽ΄λ³΄μž. + +1. outer ν•¨μˆ˜κ°€ ν‰κ°€λ˜μ–΄ ν•¨μˆ˜ 객체λ₯Ό 생성할 λ•Œ ν˜„μž¬ μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½, μ „μ—­ λ ‰μ‹œμ»¬ ν™˜κ²½μ„ outer ν•¨μˆ˜ 객체의 [[Environment]] λ‚΄λΆ€ μŠ¬λ‘―μ— μƒμœ„ μŠ€μ½”ν”„λ‘œμ„œ μ €μž₯ν•œλ‹€. + +2. outer ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜λ©΄ outer ν•¨μˆ˜μ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ΄ μƒμ„±λ˜κ³  μ•žμ„œ outer ν•¨μˆ˜ 객체의 [[Environment]] λ‚΄λΆ€ μŠ¬λ‘―μ— μ €μž₯된 μ „μ—­ λ ‰μ‹œμ»¬ ν™˜κ²½μ„ outer ν•¨μˆ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ˜ μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ 참쑰에 ν• λ‹Ήν•œλ‹€. + +3. 쀑첩 ν•¨μˆ˜ innerκ°€ ν‰κ°€λ˜λ©΄ 쀑첩 ν•¨μˆ˜ innerλŠ” μžμ‹ μ˜ [[Environment]] λ‚΄λΆ€ μŠ¬λ‘―μ— ν˜„μž¬ μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½, 즉 outer ν•¨μˆ˜μ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ„ μƒμœ„ μŠ€μ½”ν”„λ‘œμ„œ μ €μž₯ν•œλ‹€. + +4. outer ν•¨μˆ˜μ˜ 싀행이 μ’…λ£Œν•˜λ©΄ inner ν•¨μˆ˜λ₯Ό λ°˜ν™˜ν•˜λ©΄μ„œ outer ν•¨μˆ˜μ˜ 생λͺ… μ£ΌκΈ°κ°€ μ’…λ£Œλœλ‹€. μŠ€νƒμ—μ„œ 제거되면 outer ν•¨μˆ˜μ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” μŠ€νƒμ—μ„œ μ œκ±°λ˜μ§€λ§Œ **outer ν•¨μˆ˜μ˜ λ ‰μ‹œμ»¬ ν™˜κ²½κΉŒμ§€ μ†Œλ©Έν•˜λŠ” 것은 μ•„λ‹ˆλ‹€.** + outer ν•¨μˆ˜μ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ€ inner ν•¨μˆ˜μ˜ [[Environment]] λ‚΄λΆ€ μŠ¬λ‘―μ— μ˜ν•΄ 참쑰되고 있고 inner ν•¨μˆ˜λŠ” μ „μ—­ λ³€μˆ˜ innerFunc에 μ˜ν•΄ 참쑰되고 μžˆμœΌλ―€λ‘œ 가비지 μ»¬λ ‰μ…˜μ˜ λŒ€μƒμ΄ λ˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμ΄λ‹€. 가비지 μ»¬λ ‰ν„°λŠ” λˆ„κ΅°κ°€ μ°Έμ‘°ν•˜κ³  μžˆλŠ” λ©”λͺ¨λ¦¬ 곡간을 ν•¨λΆ€λ‘œ ν•΄μ œν•˜μ§€ μ•ŠλŠ”λ‹€. + +5. outer ν•¨μˆ˜κ°€ λ°˜ν™˜ν•œ inner ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜λ©΄ inner ν•¨μˆ˜μ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μƒμ„±λ˜κ³  μŠ€νƒμ— ν‘Έμ‹œλœλ‹€. λ ‰μ‹œμ»¬ ν™˜κ²½μ˜ μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘°μ—λŠ” inner ν•¨μˆ˜ 객체의 [[Environment]] λ‚΄λΆ€ μŠ¬λ‘―μ— μ €μž₯λ˜μ–΄ μžˆλŠ” 참쑰값이 ν• λ‹Ήλœλ‹€. + +쀑첩 ν•¨μˆ˜ innerλŠ” μ™ΈλΆ€ ν•¨μˆ˜ outer보닀 더 였래 μƒμ‘΄ν–ˆλ‹€. μ΄λ•Œ 쀑첩 ν•¨μˆ˜λŠ” μžμ‹ μ΄ μ •μ˜λœ μœ„μΉ˜μ— μ˜ν•΄ κ²°μ •λœ μƒμœ„ μŠ€μ½”ν”„λ₯Ό κΈ°μ–΅ν•œλ‹€. 쀑첩 ν•¨μˆ˜ inner의 λ‚΄λΆ€μ—μ„œλŠ” μƒμœ„ μŠ€μ½”ν”„λ₯Ό μ°Έμ‘°ν•  수 μžˆμœΌλ―€λ‘œ μƒμœ„ μŠ€μ½”ν”„μ˜ μ‹λ³„μžλ₯Ό μ°Έμ‘°ν•  수 있고 μ‹λ³„μžμ˜ 값을 λ³€κ²½ν•  μˆ˜λ„ μž‡λ‹€. + +μžλ°” 슀크립트의 λͺ¨λ“  ν•¨μˆ˜λŠ” μƒμœ„ μŠ€μ½”ν”„λ₯Ό κΈ°μ–΅ν•˜λ―€λ‘œ 이둠적으둜 λͺ¨λ“  ν•¨μˆ˜λŠ” ν΄λ‘œμ €μ΄μ§€λ§Œ, 일반적으둜 λͺ¨λ“  ν•¨μˆ˜λ₯Ό ν΄λ‘œμ €λΌκ³  ν•˜μ§€λŠ” μ•ŠλŠ”λ‹€. + +ν΄λ‘œμ €κ°€ μ•„λ‹Œ 경우 + +- **μ°Έμ‘°ν•˜μ§€ μ•ŠλŠ” μ‹λ³„μž**λ₯Ό κΈ°μ–΅ν•˜λŠ” 것은 λ©”λͺ¨λ¦¬ 낭비이기 λ•Œλ¬Έμ— λŒ€λΆ€λΆ„μ˜ λͺ¨λ˜ λΈŒλΌμš°μ €λŠ” μ΅œμ ν™”λ₯Ό 톡해 μƒμœ„ μŠ€μ½”ν”„λ₯Ό κΈ°μ–΅ν•˜μ§€ μ•ŠλŠ”λ‹€. +- 쀑첩 ν•¨μˆ˜κ°€ ν΄λ‘œμ €μ˜€μ§€λ§Œ μ™ΈλΆ€ ν•¨μˆ˜λ³΄λ‹€ 일찍 μ†Œλ©Έλ˜λ©΄ 생λͺ… μ£ΌκΈ°κ°€ μ’…λ£Œλœ μ™ΈλΆ€ ν•¨μˆ˜μ˜ μ‹λ³„μžλ₯Ό μ°Έμ‘°ν•  수 μžˆλ‹€λŠ” ν΄λ‘œμ €μ˜ λ³Έμ§ˆμ— λΆ€ν•©ν•˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμ—, 쀑첩 ν•¨μˆ˜λŠ” ν΄λ‘œμ €λΌ ν•˜μ§€ μ•ŠλŠ”λ‹€. + +ν΄λ‘œμ €μΈ 경우 + +- μ™ΈλΆ€ ν•¨μˆ˜λ³΄λ‹€ 쀑첩 ν•¨μˆ˜κ°€ 더 였래 μœ μ§€λ˜λŠ” 경우 쀑첩 ν•¨μˆ˜λŠ” 이미 생λͺ… μ£ΌκΈ°κ°€ μ’…λ£Œν•œ μ™ΈλΆ€ ν•¨μˆ˜μ˜ λ³€μˆ˜λ₯Ό μ°Έμ‘°ν•  수 μžˆλ‹€. μ΄λŸ¬ν•œ 쀑첩 ν•¨μˆ˜λ₯Ό ν΄λ‘œμ €λΌ λΆ€λ₯Έλ‹€. +- ν΄λ‘œμ €λŠ” 쀑첩 ν•¨μˆ˜κ°€ μƒμœ„ μŠ€μ½”ν”„μ˜ μ‹λ³„μžλ₯Ό μ°Έμ‘°ν•˜κ³  있고 쀑첩 ν•¨μˆ˜κ°€ μ™ΈλΆ€ ν•¨μˆ˜λ³΄λ‹€ 더 였래 μœ μ§€λ˜λŠ” κ²½μš°μ— ν•œμ •ν•˜λŠ” 것이 μΌλ°˜μ μ΄λ‹€. + +**✨ 자유 λ³€μˆ˜** +ν΄λ‘œμ €μ— μ˜ν•΄ μ°Έμ‘°λ˜λŠ” μƒμœ„ μŠ€μ½”ν”„μ˜ λ³€μˆ˜