πŸ“– 9 . μŠ€μ½”ν”„, ν˜Έμ΄μŠ€νŒ…(Hoisting) , TDZ

jinho9203Β·2022λ…„ 9μ›” 23일
0

πŸ“– μŠ€μ½”ν”„, ν˜Έμ΄μŠ€νŒ… , TDZ

πŸš€ 1. μŠ€μ½”ν”„μ˜ μ •μ˜

  • μ°Έμ‘° λŒ€μƒ μ‹λ³„μž(identifier, λ³€μˆ˜, ν•¨μˆ˜μ˜ 이름과 같이 μ–΄λ–€ λŒ€μƒμ„ λ‹€λ₯Έ λŒ€μƒκ³Ό κ΅¬λΆ„ν•˜μ—¬ 식별할 수 μžˆλŠ” μœ μΌν•œ 이름)λ₯Ό μ°Ύμ•„λ‚΄κΈ° μœ„ν•œ κ·œμΉ™μ΄λ‹€.

  • μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” 이 κ·œμΉ™λŒ€λ‘œ μ‹λ³„μžλ₯Ό μ°ΎλŠ”λ‹€.


πŸš€ 1-1 . μŠ€μ½”ν”„μ˜ ꡬ뢄

▢️ μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ μŠ€μ½”ν”„λ₯Ό ꡬ뢄해보면 λ‹€μŒκ³Ό 같이 2κ°€μ§€λ‘œ λ‚˜λˆŒ 수 μžˆλ‹€.

  • μ „μ—­ μŠ€μ½”ν”„ (Global scope)
    μ½”λ“œ μ–΄λ””μ—μ„œλ“ μ§€ μ°Έμ‘°ν•  수 μžˆλ‹€.
  • 지역 μŠ€μ½”ν”„ (Local scope or Function-level scope)
    ν•¨μˆ˜ μ½”λ“œ 블둝이 λ§Œλ“  μŠ€μ½”ν”„λ‘œ ν•¨μˆ˜ μžμ‹ κ³Ό ν•˜μœ„ ν•¨μˆ˜μ—μ„œλ§Œ μ°Έμ‘°ν•  수 μžˆλ‹€.

▢️ λͺ¨λ“  λ³€μˆ˜λŠ” μŠ€μ½”ν”„λ₯Ό κ°–λŠ”λ‹€. λ³€μˆ˜μ˜ κ΄€μ μ—μ„œ μŠ€μ½”ν”„λ₯Ό κ΅¬λΆ„ν•˜λ©΄ λ‹€μŒκ³Ό 같이 2κ°€μ§€λ‘œ λ‚˜λˆŒ 수 μžˆλ‹€.

  • μ „μ—­ λ³€μˆ˜ (Global variable)
    μ „μ—­μ—μ„œ μ„ μ–Έλœ λ³€μˆ˜μ΄λ©° 어디에든 μ°Έμ‘°ν•  수 μžˆλ‹€.

  • 지역 λ³€μˆ˜ (Local variable)
    지역(ν•¨μˆ˜) λ‚΄μ—μ„œ μ„ μ–Έλœ λ³€μˆ˜μ΄λ©° κ·Έ 지역과 κ·Έ μ§€μ—­μ˜ ν•˜λΆ€ μ§€μ—­μ—μ„œλ§Œ μ°Έμ‘°ν•  수 μžˆλ‹€.


  • λ³€μˆ˜λŠ” μ„ μ–Έ μœ„μΉ˜(μ „μ—­ λ˜λŠ” 지역)에 μ˜ν•΄ μŠ€μ½”ν”„λ₯Ό κ°€μ§€κ²Œ λœλ‹€. 즉, μ „μ—­μ—μ„œ μ„ μ–Έλœ λ³€μˆ˜λŠ” μ „μ—­ μŠ€μ½”ν”„λ₯Ό κ°–λŠ” μ „μ—­ λ³€μˆ˜μ΄κ³ , 지역(μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ 경우 ν•¨μˆ˜ λ‚΄λΆ€)μ—μ„œ μ„ μ–Έλœ λ³€μˆ˜λŠ” 지역 μŠ€μ½”ν”„λ₯Ό κ°–λŠ” 지역 λ³€μˆ˜κ°€ λœλ‹€.

  • μ „μ—­ μŠ€μ½”ν”„λ₯Ό κ°–λŠ” μ „μ—­ λ³€μˆ˜λŠ” μ „μ—­(μ½”λ“œ μ–΄λ””μ„œλ“ μ§€)μ—μ„œ μ°Έμ‘°ν•  수 μžˆλ‹€. 지역(ν•¨μˆ˜ λ‚΄λΆ€)μ—μ„œ μ„ μ–Έλœ 지역 λ³€μˆ˜λŠ” κ·Έ 지역과 κ·Έ μ§€μ—­μ˜ ν•˜λΆ€ μ§€μ—­μ—μ„œλ§Œ μ°Έμ‘°ν•  수 μžˆλ‹€.


πŸš€ 2. ν˜Έμ΄μŠ€νŒ…μ˜ μ •μ˜

  • μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진이 전체 μ½”λ“œλ₯Ό λ¨Όμ € μŠ€μΊ”ν•œ ν›„, λ³€μˆ˜ μ„ μ–Έ 정보λ₯Όμ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ— κΈ°λ‘ν•΄λ†“λŠ”λ°, μ΄λŸ¬ν•œ μž‘μ—… λ•Œλ¬Έμ— 선언문이 μœ νš¨ν•œ μŠ€μ½”ν”„ λ‚΄μ—μ„œ μ΅œμƒλ‹¨μœΌλ‘œ λŒμ–΄ μ˜¬λ €μ§€λŠ” λ“―ν•œ ν˜„μƒμ„ λ§ν•œλ‹€.

πŸš€ 2-1. ν˜Έμ΄μŠ€νŒ… κ°€λ³κ²Œ μ§šμ–΄λ³΄κΈ°

  • ν˜Έμ΄μŠ€νŒ…μ„ 톡해 μ„ μ–Έκ³Ό 할당을 λΆ„λ¦¬ν•œλ‹€.

  • λͺ¨λ“  λ³€μˆ˜/ν•¨μˆ˜ 선언을 ν•΄λ‹Ή μŠ€μ½”ν”„μ˜ μ΅œμƒλ‹¨μœΌλ‘œ λŒμ–΄μ˜¬λ¦° λ“― ν•œ ν˜„μƒμ΄ μΌμ–΄λ‚œλ‹€.

  • πŸ”₯ μ—¬κΈ°μ„œ μ£Όμ˜ν•  점은
    λͺ¨λ“  λ³€μˆ˜, ν•¨μˆ˜ 선언을 μ½”λ“œ μƒμ—μ„œ μ‹€μ œλ‘œ, 물리적으둜 μ΅œμƒλ‹¨μœΌλ‘œ λŒμ–΄μ˜¬λ¦¬λŠ” 것이 μ•„λ‹Œ λ‚΄λΆ€μ μœΌλ‘œ λŒμ–΄μ˜¬λ¦¬λŠ” 것이닀.
    λ©”λͺ¨λ¦¬μ˜ λ³€ν™” λ˜ν•œ μ—†λ‹€.


πŸš€ 2-2. λ‚΄λΆ€μ μœΌλ‘œ μ–΄λ–€ 일이 λ°œμƒν•˜λŠ”κ°€?

  • λͺ¨λ“  선언이 μš°μ„ μ μœΌλ‘œ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ(λ©”λͺ¨λ¦¬)에 μ €μž₯λœλ‹€

  • 이것 λ•Œλ¬Έμ— 선언이 λŒμ–΄μ˜¬λ €μ§„λ‹€λŠ” ν‘œν˜„μ΄ λ‚˜μ˜¨ 것 κ°™λ‹€.

  • μ‹€μ œλ‘œ 물리적으둜 μ˜¬λ €μ§€λŠ” 것이 μ•„λ‹ˆλΌ λ‚΄λΆ€μ μœΌλ‘œ μ €λŸ° 방식에 μ˜ν•΄ μ½”λ“œκ°€ λŒμ–΄μ˜¬λ €μ§„ λ“―ν•œ ν˜„μƒμ΄ λ‚˜νƒ€λ‚œλ‹€κ³  보면 될 것 κ°™λ‹€.

  • 그리고 곧 이것이 ν˜Έμ΄μŠ€νŒ…(hoisting)이닀.


πŸš€ 2-3. ν˜Έμ΄μŠ€νŒ…μ— λŒ€ν•œ 잘λͺ»λœ 상식

▢️ ν˜Έμ΄μŠ€νŒ…μ€ var μ„ μ–Έλ§Œ μΌμ–΄λ‚œλ‹€? Nope!! ❌

  • "var을 μ΄μš©ν•œ λ³€μˆ˜ 선언은 ν˜Έμ΄μŠ€νŒ…μ΄ μΌμ–΄λ‚˜μ§€λ§Œ, const,let을 μ΄μš©ν•œ λ³€μˆ˜ 선언은 ν˜Έμ΄μŠ€νŒ…μ΄ μΌμ–΄λ‚˜μ§€ μ•ŠλŠ”λ‹€" λΌλŠ” 정보가 많이 λ‚˜μ˜¨λ‹€.

  • 저것은 잘λͺ»λœ ν‘œν˜„μ΄λ‹€... πŸ™„

  • var, const, let 상관없이 λͺ¨λ“  μ„ μ–Έμ—μ„œ ν˜Έμ΄μŠ€νŒ…μ΄ 이루어진닀.

  • 1-1 μ—μ„œ λ‚΄λΆ€μ μœΌλ‘œ λͺ¨λ“  선언이 μš°μ„ μ μœΌλ‘œ λ©”λͺ¨λ¦¬μ— μ €μž₯λœλ‹€κ³  ν•˜μ˜€λŠ”λ°, 여기에 μ§‘μ€‘ν•΄μ•Όν•œλ‹€.

  • ν˜Έμ΄μŠ€νŒ…μ€ λͺ¨λ“  λ³€μˆ˜/ν•¨μˆ˜ 선언을 λ‚΄λΆ€μ μœΌλ‘œ μ΅œμƒλ‹¨μœΌλ‘œ λŒμ–΄μ˜¬λ¦¬λŠ” 것이고, λ‚΄λΆ€μ μœΌλ‘œλŠ” λͺ¨λ“  선언이 μš°μ„ μ μœΌλ‘œ λ©”λͺ¨λ¦¬μ— μ €μž₯λœλ‹€λŠ” 것이닀.

  • 이 말은 var, const, let 상관없이 λͺ¨λ“  μ„ μ–Έμ—μ„œ ν˜Έμ΄μŠ€νŒ…μ΄ μΌμ–΄λ‚œλ‹€λŠ” 것을 μ–˜κΈ°ν•˜λŠ” 것이닀.

  • πŸ”₯ κ·Έλ ‡λ‹€λ©΄ μ™œ const, let은 ν˜Έμ΄μŠ€νŒ…μ΄ μΌμ–΄λ‚˜μ§€ μ•ŠλŠ” 것 처럼 λ³΄μ˜€μ„κΉŒ? μ˜ˆμ‹œ μ½”λ“œλ₯Ό ν™•μΈν•΄λ³΄μž.

  • μœ„ μ½”λ“œλ₯Ό 돌렀보면 μ•„λž˜μ˜ κ²°κ³Όκ°€ λ‚˜μ˜¨λ‹€.

  • myname을 찍어보면 μ—λŸ¬κ°€ λ‚˜μ§€ μ•Šκ³  undefinedκ°€ 좜λ ₯이 되고, myname2λ₯Ό 찍어보면 레퍼런슀 μ—λŸ¬κ°€ λ‚œλ‹€.

  • 이 κ²°κ³Όλ₯Ό 보면 마치 var 선언은 ν˜Έμ΄μŠ€νŒ…μ΄ 일어났기 λ•Œλ¬Έμ— μ—λŸ¬κ°€ λ‚˜μ§€μ•Šκ³  const, let 선언은 ν˜Έμ΄μŠ€νŒ…μ΄ μΌμ–΄λ‚˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμ— μ—λŸ¬κ°€ λ°œμƒν•œλ‹€κ³  생각할 μˆ˜λ„ μžˆλ‹€. βŒν•˜μ§€λ§Œ μ•„λ‹ˆλ‹€.❌

  • varκ³Ό const, let 간에 결정적인 차이 λ•Œλ¬Έμ— μ΄λŸ¬ν•œ ν˜„μƒμ΄ λ°œμƒν•œλ‹€.차이λ₯Ό μ•Œμ•„λ³΄μž.


πŸš€ 2-4. varκ³Ό const, let의 차이

  • var은 ν˜Έμ΄μŠ€νŒ… ν›„ undefined둜 μ΄ˆκΈ°ν™”κ°€ λ˜μ–΄ λ©”λͺ¨λ¦¬μ— μ €μž₯λœλ‹€.
  • const, let은 ν˜Έμ΄μŠ€νŒ… ν›„ μ–΄λ– ν•œ κ°’μœΌλ‘œλ„ μ΄ˆκΈ°ν™” λ˜μ§€ μ•ŠμœΌλ©° μ„ μ–Έλ§Œ λ˜μ–΄ μ €μž₯λœλ‹€.

πŸš€ 2-5. let은 μ™œ 레퍼런슀 μ—λŸ¬κ°€ λ‚˜λŠ”κ°€?

  • μœ„μ˜ μ½”λ“œλ₯Ό 돌렀보면 let으둜 μ„ μ–Έν•œ λ³€μˆ˜λŠ” 레퍼런슀 μ—λŸ¬κ°€ 났닀.

  • λ³€μˆ˜κ°€ μ΄ˆκΈ°ν™” λ˜μ§€ μ•ŠμœΌλ©΄ λ³€μˆ˜λ₯Ό μ°Έμ‘°ν•  수 μ—†λ‹€


πŸš€ 2-6. μ’…ν•©

  • const, let은 ν˜Έμ΄μŠ€νŒ…μ΄ μΌμ–΄λ‚œ ν›„ μ–΄λ– ν•œ κ°’μœΌλ‘œλ„ μ΄ˆκΈ°ν™”κ°€ λ˜μ§€ μ•ŠμœΌλ©°, μ΄ˆκΈ°ν™”λ˜μ§€ μ•Šμ€ λ³€μˆ˜λŠ” μ°Έμ‘°ν•  수 μ—†κΈ° λ•Œλ¬Έμ— console.log( ) μ½”λ“œλ₯Ό μ‹€ν–‰ν•˜μ§€ λͺ»ν•˜κ³  레퍼런슀 μ—λŸ¬κ°€ λ‚˜λŠ” 것이닀.

  • μ΄λŸ¬ν•œ ν˜„μƒ λ•Œλ¬Έμ— const, let은 ν˜Έμ΄μŠ€νŒ…μ΄ λ˜μ§€ μ•ŠλŠ”λ‹€λŠ” μ˜€ν•΄λ₯Ό λΆˆλŸ¬μ™”λ˜ 것이닀.


πŸš€ 3. TDZ ( Temporal Dead Zone )의 μ •μ˜

πŸ”Ž μΌμ‹œμ  μ‚¬κ°μ§€λŒ€ ❓

  • let λ˜λŠ” const둜 λ³€μˆ˜λ₯Ό μ„ μ–Έν–ˆμ„ λ•Œ, μ„ μ–Έ 이전에 μ‹λ³„μžλ₯Ό μ°Έμ‘°ν•  수 μ—†λŠ” ꡬ역

  • ν˜Έμ΄μŠ€νŒ…μœΌλ‘œ λ³€μˆ˜μ˜ 선언이 μ΄λ£¨μ–΄μ‘Œμ§€λ§Œ λ³€μˆ˜μ˜ μ΄ˆκΈ°ν™”κ°€ 이루어지지 μ•Šμ€ 지점

  • λ³€μˆ˜λ₯Ό μ°Έμ‘°ν•  수 μ—†λŠ” 지점

profile
μ•ˆλ…•ν•˜μ„Έμš”

0개의 λŒ“κΈ€