πŸ”­ Closure & Lexical & Scope

0713vinΒ·2023λ…„ 1μ›” 13일
0

CS

λͺ©λ‘ 보기
1/1
post-thumbnail

πŸ”­ Closure & Lexical & Scope

μƒμ†Œν•˜μ§€λ§Œ, μ•Œκ³  보면 우리 κ°€κΉŒμ΄μ— 있던 클둜져.
μž‘λ™μ›λ¦¬λ₯Ό μ•Œμ•„λ³΄λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€.
πŸ’‘ ν΄λ‘œμ ΈλŠ” μŠ€μ½”ν”„, λ ‰μ‹œμ»¬μŠ€μ½”ν”„, λ ‰μ‹œμ»¬ ν™˜κ²½κ³Ό λ°€μ ‘ν•œ 관계λ₯Ό 가지고 μžˆμŠ΅λ‹ˆλ‹€.

πŸ”­ Scope | μŠ€μ½”ν”„

  • μœ νš¨λ²”μœ„
  • μ „μ—­μŠ€μ½”ν”„, μ§€μ—­μŠ€μ½”ν”„, μ „μ—­λ³€μˆ˜, μ§€μ—­λ³€μˆ˜ λ„€ κ°€μ§€λ‘œ ꡬ뢄
  • ν•¨μˆ˜κ°€ 싀행될 λ•Œ μƒμ„±λ˜λŠ” κ°’, ν‘œν˜„μ‹μ„ μ°Ύμ„λ•Œ μ°Έκ³ ν•˜λŠ” ν‘œμ™€ μœ μ‚¬
  • ν•˜μœ„ μŠ€μ½”ν”„ β†’ μƒμœ„ μŠ€μ½”ν”„λ‘œλ§Œ μ ‘κ·Ό κ°€λŠ₯
  • ν•˜λ‚˜ μ΄μƒμ˜ μŠ€μ½”ν”„κ°€ λͺ¨μΈ 것을 μŠ€μ½”ν”„ 체인이라 칭함
  • ν•¨μˆ˜κ°€ μ‹€ν–‰ λ˜λŠ” μ¦‰μ‹œ 생성
    • ν•¨μˆ˜ λ‹¨μœ„λ‘œ μŠ€μ½”ν”„ 생성
    • λͺ¨λ“  λ³€μˆ˜λŠ” μŠ€μ½”ν”„λ₯Ό 가짐


🌎 μ „μ—­μŠ€μ½”ν”„ & 🏠 μ§€μ—­μŠ€μ½”ν”„

🌎 μ „μ—­μŠ€μ½”ν”„ Global Scope🏠 μ§€μ—­μŠ€μ½”ν”„ Local Scope
μ„ μ–Έ μœ„μΉ˜λΈ”λ‘ { } λ°”κΉ₯ λ˜λŠ” ν•¨μˆ˜ λ°”κΉ₯μ—μ„œ μ„ μ–ΈλΈ”λ‘λ‚΄λΆ€μ—μ„œ μ„ μ–Έ
μ‚¬μš© κ°€λŠ₯ λ²”μœ„μ „μ—­λΈ”λ‘ λ‚΄λΆ€
λ³€μˆ˜πŸŒŽ μ „μ—­λ³€μˆ˜λ₯Ό 포함
Global Variable
🏠 μ§€μ—­λ³€μˆ˜λ₯Ό 포함
Local Variable

πŸ’‘ μ „μ—­ μŠ€μ½”ν”„λŠ” μ „μ—­ λ³€μˆ˜λ₯Ό 가지며 μ–΄λ””μ„œλ‚˜ μ ‘κ·Όν•  수 μžˆμŠ΅λ‹ˆλ‹€.
지역 μŠ€μ½”ν”„λŠ” 블둝 λ‚΄λΆ€μ—μ„œ μ„ μ–Έλ˜λ©° μ„ μ–Έ 된 λ‚΄λΆ€μ—μ„œλ§Œ μ ‘κ·Όν•  수 μžˆμŠ΅λ‹ˆλ‹€.


πŸ”­ μŠ€μ½”ν”„ 레벨 in JS

λΈ”λ‘λ ˆλ²¨ μŠ€μ½”ν”„ν•¨μˆ˜λ ˆλ²¨ μŠ€μ½”ν”„
{ } μ€‘κ΄„ν˜Έ, μ€‘κ΄„ν˜Έ 두 개 μ‚¬μ΄μ˜ λ²”μœ„μ—μ„œλ§Œ μ‘΄μž¬ν•¨μˆ˜λ ˆλ²¨μ—μ„œ 쑴재
let, constvar


πŸ”­ μƒμœ„ μŠ€μ½”ν”„μ˜ μ •μ˜ in JS ✨

이름정적 μŠ€μ½”ν”„λ™μ  μŠ€μ½”ν”„
κ²°μ • λ°©μ‹ν•¨μˆ˜κ°€ μ •μ˜(μ„ μ–Έ) λ˜λŠ” μ‹œμ ν•¨μˆ˜κ°€ ν˜ΈμΆœλ˜λŠ” μ‹œμ μ— κ²°μ •
EngLexical scope || Static scopeDynamic scope
  • ν•¨μˆ˜κ°€ μ •μ˜(μ„ μ–Έ) λ˜λŠ” μ‹œμ μ— μ •μ μŠ€μ½”ν”„ (λ ‰μ‹œμ»¬ μŠ€μ½”ν”„) λ˜λŠ” 동적 μŠ€μ½”ν”„λ‘œ μ •μ˜ λ©λ‹ˆλ‹€.



🌎 μ „μ—­μŠ€μ½”ν”„ & 🏠 μ§€μ—­μŠ€μ½”ν”„ [Code sample_Fruits]

<const x = 'Apple';  //πŸŒŽμ „μ—­μŠ€μ½”ν”„

function outer() { //πŸ μ§€μ—­μŠ€μ½”ν”„
  const x = 'kiwi'; //πŸ μ§€μ—­μŠ€μ½”ν”„
  function inner() //πŸ μ§€μ—­μŠ€μ½”ν”„
  {
    console.log(x); //πŸ μ§€μ—­μŠ€μ½”ν”„
  };
    return inner; //πŸ μ§€μ—­μŠ€μ½”ν”„
};
const fruits = outer(); //πŸŒŽμ „μ—­μŠ€μ½”ν”„
fruits(); //πŸŒŽμ „μ—­μŠ€μ½”ν”„  // 'kiwi'
fruits() // 'kiwi'

✨ μŠ€μ½”ν”„ μ°Έμ‘° λ°©ν–₯ : ν•˜μœ„β†’μƒμœ„ || λ‚΄λΆ€β†’μ™ΈλΆ€

λ°˜λŒ€μ˜ 경우 μ„±λ¦½ν•˜μ§€ μ•ŠμŒ (μƒμœ„ β†’ ν•˜μœ„ λΆˆκ°€)

[μƒμœ„] μ „μ—­ μŠ€μ½”ν”„
x'Apple'

↑ μ°Έμ‘°λ°©ν–₯

[ν•˜μœ„] 지역 μŠ€μ½”ν”„
x'Kiwi'

πŸ€” μ–΄λ–»κ²Œ 전역에 μ„ μ–Έλœ 🍎 'Apple' μ•„λ‹Œ πŸ₯ 'Kiwi' κ°€ λ‚˜μ™”μ„κΉŒμš”?
outer의 λ‚΄λΆ€ ν•¨μˆ˜μΈ innerκ°€ 전역에 μ„ μ–Έλœ x = 'Apple'이 μ•„λ‹Œ

ν•¨μˆ˜ 내뢀에 μ„ μ–Έλœ x = 'kiwi'값을 지역 μŠ€μ½”ν”„μ—μ„œ μ°Έμ‘°ν•˜μ˜€κΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€.

즉 λ‚΄λΆ€ ν•¨μˆ˜μ—μ„œ 값을 μ°Ύμ•˜κΈ°μ— μ „μ—­ ν•¨μˆ˜λ‘œ μ§„ν–‰ν•˜μ§€ μ•Šμ€ 것 μž…λ‹ˆλ‹€.

+ 🀫 μ „μ—­μ—μ„œ xλ₯Ό ν˜ΈμΆœν•˜λ©΄ 'Apple'μ΄λΌλŠ” 값을 받을 수 μžˆμŠ΅λ‹ˆλ‹€.

🌎 μ „μ—­μŠ€μ½”ν”„ & 🏠 μ§€μ—­μŠ€μ½”ν”„ [Code sample_outer&inner]

var x = 'λ‚˜λŠ” μ „μ—­ Xμ•Ό';

function outer() {
  var y = 'λ‚˜λŠ” outerν•¨μˆ˜μ˜ 지역 yμ•Ό';
  console.log(x);
  console.log(y);

  function inner() {
    var x = 'λ‚˜λŠ” innerν•¨μˆ˜μ˜ 지역 xμ•Ό';
    console.log(x);
    console.log(y);
  }
  inner();
}

outer();
console.log(x);
console.log(y);
//λ‚˜λŠ” μ „μ—­ Xμ•Ό
//λ‚˜λŠ” outerν•¨μˆ˜μ˜ 지역 yμ•Ό
// λ‚˜λŠ” innerν•¨μˆ˜μ˜ 지역 xμ•Ό
// λ‚˜λŠ” outerν•¨μˆ˜μ˜ 지역 yμ•Ό
// λ‚˜λŠ” μ „μ—­ Xμ•Ό
//https://www.youtube.com/watch?v=PVYjfrgZhtU
μ „μ—­ μŠ€μ½”ν”„
x'λ‚˜λŠ” μ „μ—­ Xμ•Ό'
outerfunction obj

↑ μ°Έμ‘°λ°©ν–₯

outer 지역 μŠ€μ½”ν”„
y'λ‚˜λŠ” outer ν•¨μˆ˜μ˜ 지역 yμ•Ό'
innerfunction obj

↑ μ°Έμ‘°λ°©ν–₯

inner 지역 μŠ€μ½”ν”„
x'λ‚˜λŠ” inner ν•¨μˆ˜μ˜ 지역 yμ•Ό'

  1. outer() 호좜 β†’ outer ν•¨μˆ˜ μ‹€ν–‰
  2. outer ν•¨μˆ˜ y = 'λ‚˜λŠ” outer ν•¨μˆ˜μ˜ 지역 yμ•Ό'
  3. Outer ν•¨μˆ˜λŠ” μ „μ—­ μŠ€μ½”ν”„λ‘œ μ ‘κ·Ό var x = 'λ‚˜λŠ” μ „μ—­ xμ•Ό' 값을 μ°Έμ‘°
  4. inner() μ‹€ν–‰ β†’ x = 'innerν•¨μˆ˜μ˜ 지역xμ•Ό' λΌλŠ” 값을 κ°–κ²Œ 됨
  5. inner ν•¨μˆ˜λ‚΄μ˜ yλŠ” μ—†μœΌλ―€λ‘œ β†’ innerν•¨μˆ˜μ˜ μƒμœ„ ν•¨μˆ˜μΈ outer ν•¨μˆ˜μ— μ ‘κ·Ό
  6. innerν•¨μˆ˜λŠ” outer ν•¨μˆ˜μ˜ x 값인 'λ‚˜λŠ” outer ν•¨μˆ˜μ˜ 지역 yμ•Ό' λΌλŠ” 값을 μ°Έμ‘°
  7. console.log(x)λŠ” μ „μ—­ μŠ€μ½”ν”„λ§Œμ„ μ°Έμ‘°ν•  수 μžˆμ–΄ 'λ‚˜λŠ” μ „μ—­ Xμ•Ό' 값을 가짐
  8. ‼️ console.log(y) 값은 undefined . μ „μ—­μ—μ„œ λ‚΄λΆ€ μŠ€μ½”ν”„λ‘œ μ§„μž…ν•  수 μ—†κΈ° λ•Œλ¬Έ





✍️ Lexical Environment | λ ‰μ‹œμ»¬ ν™˜κ²½ (μ–΄νœ˜μ  ν™˜κ²½)

  • μ–΄λ– ν•œ μ½”λ“œκ°€ μ–΄λ””μ—μ„œ μ‹€ν–‰ λ˜λŠ” λ“± λŒ€μ²΄μ μΈ 정보λ₯Ό λ‹΄κ³  μžˆλŠ” ν™˜κ²½
  • ν¬ν•¨ν•˜λŠ” μ‹λ³„μž, μ‹λ³„μžμ— 바인딩 된 κ°’, μƒμœ„ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘°λ₯Ό 담은 ν•˜λ‚˜μ˜ 자료 ꡬ쑰
    • ν•¨μˆ˜κ°€ μ‹€ν–‰λ˜λŠ” μ¦‰μ‹œ Lexical ν™˜κ²½ 생성

let one;
one = 1;

function addOne(num){
  console.log(one + num);
}

addOne(5); // 6
// https://www.youtube.com/watch?v=tpl2oXQkGZs
μ „μ—­ Lexical ν™˜κ²½
one1
addOnefuncion obj

↑ μ°Έμ‘°λ°©ν–₯ (λ°˜λŒ€μ˜ λ°©ν–₯ λΆˆκ°€)

λ‚΄λΆ€ Lexical ν™˜κ²½
num5

✍️ Closure Code sample

κ°€μž₯ ν”ν•˜κ²Œ μ–ΈκΈ‰λ˜λŠ” 클둜져 예제

function outerFunction(outerVariavle) {
  return function innerFunction(innerVariable) {
    console.log("outerVariavle: " + outerVariavle);
    console.log("innerVariable: " + innerVariable);
  };
}

const newFunction = outerFunction("outside");
newFunction("inner");
//outerVariavle: outside
//innerVariable: inner

//https://www.youtube.com/watch?v=3a0I8ICR1Vg

  • outerFunction ('outside')은 λ³€μˆ˜ "newFunction"에 ν• λ‹Ήλ˜λ©΄ μ¦‰μ‹œ ν˜ΈμΆœλ©λ‹ˆλ‹€.
  • 호좜되면 outerFunction은 λ³€μˆ˜ "newFunction"을 outerFunction(outerVariable)이 μ•„λ‹Œ InnerFunction(innerVariable)으둜 μž¬ν• λ‹Ήν•˜λŠ” ν•¨μˆ˜ "innerFunction(innerVariable)"을 λ°˜ν™˜ν•©λ‹ˆλ‹€.
  • 그런 λ‹€μŒ λ³€μˆ˜λ₯Ό newFunction('inside')으둜 ν˜ΈμΆœν•˜μ—¬ console.log μ½”λ“œλ₯Ό μ‹€ν–‰ν•˜λŠ” innerFunction('inside')을 ν˜ΈμΆœν•©λ‹ˆλ‹€. 결둠은 innerFunction이 outerFunction으둜 μ›λž˜ μ„€μ •ν•œ outerVariable νŒŒλΌλ―Έν„°('outside')λ₯Ό κΈ°μ–΅ν•˜κ³  μ•‘μ„ΈμŠ€ν•  수 μžˆλ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€. λ”°λΌμ„œ console.logλŠ” 'outside'와 'inside'λ₯Ό λͺ¨λ‘ μ‚¬μš©ν•  수 μžˆλ‹€.
  • μ†Œλ©Έ ν•œ ν•¨μˆ˜μ˜ μŠ€μ½”ν”„λŠ” κΈ°μ–΅ λ˜μ–΄ μ•‘μ„ΈμŠ€ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.



πŸ“Œ Closure | 클둜져

  • ν•¨μˆ˜ 와 λ ‰μ‹œμ»¬ ν™˜κ²½μ˜ μ‘°ν•© μž…λ‹ˆλ‹€.
  • λ‚΄λΆ€ ν•¨μˆ˜κ°€ μ†Œλ©Έλœ μ™ΈλΆ€ ν•¨μˆ˜μ— μ ‘κ·Όν•  λ•Œ λ‚΄λΆ€ ν•¨μˆ˜λ₯Ό 클둜져 라고 ν•©λ‹ˆλ‹€.

ν΄λ‘œμ ΈλŠ” μ†Œλ©Έν•œ ν•¨μˆ˜μ—λ„ μ ‘κ·Όν•  수 μžˆμŒμ„ λœ»ν•©λ‹ˆλ‹€. (λŒ€λΆ€λΆ„μ˜ ν•¨μˆ˜λŠ” 1회 μ‹€ν–‰ ν›„ λ‹€μ‹œ μ ‘κ·Όν•  수 μ—†μŠ΅λ‹ˆλ‹€.)
외관이 망가진 μ°¨λŸ‰μ˜ λ‚΄λΆ€μ˜ 엔진이 μ‚΄μ•„ μžˆλ‹€λ©΄ μ ‘κ·Όν•  수 μžˆλŠ” 것과 λΉ„μœ ν•˜λ©΄ 쑰금 더 이해가 μ‰¬μš°μ‹€ 것 κ°™μŠ΅λ‹ˆλ‹€. :)

πŸ™‡β€β™€οΈ 마치며

미래의 기술 면접을 μœ„ν•˜μ—¬ ν΄λ‘œμ € λ°œν‘œλ₯Ό μ€€λΉ„ν–ˆμŠ΅λ‹ˆλ‹€.

λ°œν‘œν•˜λŠ” κ³Όμ •μ—μ„œ 멀버듀 개인의 μ–Έμ–΄λ‘œ μ΄ν•΄ν•œ λ‚΄μš©μ„ κ³΅μœ ν•  λ•Œ ν™•μ‹€ν•˜κ²Œ 이해할 수 μžˆλŠ” μ†Œμ€‘ν•œ κ²½ν—˜μ„ ν–ˆμŠ΅λ‹ˆλ‹€.

μ €μ˜ μ–Έμ–΄λ‘œ ν’€μ–΄λ‚Έ 이 ν¬μŠ€νŒ…μ΄ λ‹€λ₯Έ λΆ„λ“€κ»˜λ„ 도움이 되길 λ°”λžλ‹ˆλ‹€!

λ‚œμ΄λ„κ°€ μžˆλŠ” 'ν΄λ‘œμ € 은닉화', 'ν΄λ‘œμ € 반볡문'은 담지 λͺ»ν•˜μ˜€μ§€λ§Œ κ°€κΉŒμš΄ λ―Έλž˜μ— λ‹€μ‹œ μ—…λ‘œλ“œ ν•˜κ² μŠ΅λ‹ˆλ‹€!

3355 ν™”μ΄νŒ…! 늘 쒋은 μžκ·Ήμ„ μ£Όμ–΄μ„œ κ°μ‚¬ν•΄μš”.



좜처

profile
🌎 Code up a better world! πŸ‘©β€πŸŽ¨ κ·Έλž˜ν”½ λ””μžμ΄λ„ˆ β†’ ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμžπŸ‘©β€πŸ’»

0개의 λŒ“κΈ€