πŸ’» μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ(feat. λ§ν•˜λ©΄μ„œ λ°°μ›Œμš”)

waterglassesΒ·2022λ…„ 5μ›” 9일
0

TIL

λͺ©λ‘ 보기
28/50
post-thumbnail

λ§ν•˜λ©΄μ„œ λ°°μ›Œμš” μŠ€ν„°λ””μ—μ„œ κ³΅λΆ€ν•˜λŠ” λ‚΄μš©μœΌλ‘œ 질문과 λŒ€λ‹΅ μœ„μ£Όμ˜ κΈ€μž…λ‹ˆλ‹€. λ˜ν•œ λ‚΄μš©μ— 였λ₯˜λ‚˜ μ˜€νƒ€κ°€ μžˆμ„ μ‹œ λŒ“κΈ€λ‘œ μ•Œλ €μ£Όμ‹œλ©΄ κ°μ‚¬ν•˜κ² μŠ΅λ‹ˆλ‹€.

1. μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” μ–Έμ œ μƒμ„±λ˜λ‚˜μš”?

μ‹€ν–‰μ»¨ν…μŠ€νŠΈλž€ μ‹€ν–‰ κ°€λŠ₯ν•œ μ½”λ“œκ°€ μ‹€ν–‰λ˜κΈ° μœ„ν•΄ ν•„μš”ν•œ ν™˜κ²½μ„ λ§ν•œλ‹€. μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진이 슀크립트λ₯Ό 처음 λ§Œλ‚¬μ„ λ•Œ μ „μ—­ μ»¨ν…μŠ€νŠΈλ₯Ό μƒμ„±ν•˜κ³ , 콜 μŠ€νƒμ— push ν•œλ‹€. 엔진이 슀크립트λ₯Ό μ­‰ μ½μ–΄λ‚΄λ €κ°€λ©΄μ„œ ν•¨μˆ˜ ν˜ΈμΆœμ„ λ°œκ²¬ν•  λ•Œλ§ˆλ‹€, ν•¨μˆ˜μ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μŠ€νƒμ— push ν•œλ‹€. μ€‘μš”ν•œ 점은 ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” ν•¨μˆ˜κ°€ 싀행될 λ•Œ! λ§Œλ“€μ–΄μ§„λ‹€λŠ” 점이닀.

λͺ¨λ“  μ†ŒμŠ€μ½”λ“œλŠ” μ‹€ν–‰ 전에 평가 과정을 거치며 싀행을 μœ„ν•œ μ€€λΉ„λ₯Ό ν•©λ‹ˆλ‹€.

μ†ŒμŠ€μ½”λ“œ 평가
μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μƒμ„±ν•˜κ³  λ³€μˆ˜, ν•¨μˆ˜ λ“±μ˜ μ„ μ–Έλ¬Έλ§Œ λ¨Όμ € μ‹€ν–‰ν•˜μ—¬ μƒμ„±λœ λ³€μˆ˜λ‚˜ ν•¨μˆ˜ μ‹λ³„μžλ₯Ό ν‚€λ‘œ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ κ΄€λ¦¬ν•˜λŠ” μŠ€μ½”ν”„(λ ‰μ‹œμ»¬ ν™˜κ²½μ˜ ν™˜κ²½ λ ˆμ½”λ“œ)에 λ“±λ‘ν•œλ‹€.

μ†ŒμŠ€μ½”λ“œ μ‹€ν–‰
선언문을 μ œμ™Έν•œ μ†ŒμŠ€μ½”λ“œκ°€ 순차적으둜 μ‹€ν–‰λ˜κΈ° μ‹œμž‘. μ΄λ•Œ 싀행에 ν•„μš”ν•œ λ³€μˆ˜, ν•¨μˆ˜μ˜ μ°Έμ‘°λ₯Ό μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ κ΄€λ¦¬ν•˜λŠ” μŠ€μ½”ν”„μ—μ„œ κ²€μƒ‰ν•΄μ„œ μ·¨λ“ν•˜κ²Œ λœλ‹€.

1-1. μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ μ’…λ₯˜

  1. μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ: μ „μ—­ μ˜μ—­μ— μ‘΄μž¬ν•˜λŠ” μ½”λ“œ.
  2. ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ: ν•¨μˆ˜ 내에 μ‘΄μž¬ν•˜λŠ” μ½”λ“œ.
  3. eval() ν•¨μˆ˜

2. μ‹€ν–‰μ»¨ν…μŠ€νŠΈλ₯Ό μ•„λŠ” 것이 μ™œ μ€‘μš”ν•œκ°€μš”?

λͺ¨λ“  μ½”λ“œλŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό 톡해 μ‹€ν–‰λ˜κ³  κ΄€λ¦¬λ˜κΈ° λ•Œλ¬Έμ— μ½”λ“œ 이해, 디버깅을 μœ„ν•΄μ„œλŠ” μ‹€ν–‰μ»¨ν…μŠ€νŠΈλ₯Ό κΌ­ μ•Œμ•„μ•Όλ§Œ ν•œλ‹€.

3. μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” μ–΄λ–€ 정보λ₯Ό ν¬ν•¨ν•˜κ³  μžˆλ‚˜μš”?

  • Lexical Environment, λ³€μˆ˜, μŠ€μ½”ν”„(λ³€μˆ˜μ˜ 유효 λ²”μœ„), this

μ‹€ν–‰μ»¨ν…μŠ€νŠΈμ—λŠ” λŒ€ν‘œμ μœΌλ‘œ Lexical Environment 객체가 있고 λ³€μˆ˜ 객체, μŠ€μ½”ν”„ 정보, this 바인딩에 λŒ€ν•œ 것듀을 ν¬ν•¨ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

λ³€μˆ˜ 객체
μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μƒμ„±λ˜λ©΄ μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은 싀행에 ν•„μš”ν•œ μ—¬λŸ¬ 정보듀을 담을 객체λ₯Ό μƒμ„±ν•˜λŠ”λ° 이것을 λ³€μˆ˜ 객체라고 ν•œλ‹€.
μ „μ—­ μ»¨ν…μŠ€νŠΈμΈ 경우 λͺ¨λ“  μ „μ—­ λ³€μˆ˜, μ „μ—­ ν•¨μˆ˜ 등을 ν¬ν•¨ν•˜λŠ” μ „μ—­ 객체λ₯Ό 가리킀고 μ „μ—­ κ°μ²΄λŠ” 전역에 μ„ μ–Έλœ μ „μ—­ λ³€μˆ˜μ™€ μ „μ—­ ν•¨μˆ˜λ₯Ό ν”„λ‘œνΌν‹°λ‘œ μ†Œμœ ν•œλ‹€. ν•¨μˆ˜ μ»¨ν…μŠ€νŠΈλŠ” ν™œμ„± 객체λ₯Ό 가리킀며 arguments 객체가 μΆ”κ°€λœλ‹€.

μŠ€μ½”ν”„
μ‹λ³„μžμ˜ μœ νš¨λ²”μœ„μ΄λ‹€. μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ—μ„œ ν˜„μž¬ μ»¨ν…μŠ€νŠΈμ˜ 유효 λ²”μœ„λ₯Ό λ‚˜νƒ€λ‚΄λŠ” μŠ€μ½”ν”„ 정보λ₯Ό μƒμ„±ν•˜λŠ”λ° 이 μŠ€μ½”ν”„ μ •λ³΄λŠ” ν˜„μž¬ 싀행쀑인 μ»¨ν…μŠ€νŠΈ μ•ˆμ—μ„œ μ—°κ²° λ¦¬μŠ€νŠΈμ™€ μœ μ‚¬ν•œ ν˜•μ‹μœΌλ‘œ λ§Œλ“€μ–΄μ§„λ‹€.

var, let, const의 차이
var은 ν•¨μˆ˜ μŠ€μ½”ν”„, letκ³Ό constλŠ” λΈ”λ‘μŠ€μ½”ν”„λ₯Ό 가진닀.

this
thisν”„λ‘œνΌν‹°μ—λŠ” this 값이 ν• λ‹Ήλ˜κ³  ν•¨μˆ˜ 호좜 νŒ¨ν„΄μ— μ˜ν•΄ κ²°μ •λœλ‹€.

4. μŠ€μ½”ν”„μ²΄μΈμ— λŒ€ν•΄μ„œ μ„€λͺ…ν•΄μ£Όμ„Έμš”.

ν•œ ν•¨μˆ˜μ˜ Outer environment referenceλŠ” ν˜„μž¬ 호좜된 ν•¨μˆ˜κ°€ 선언될 λ‹Ήμ‹œμ˜ μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ„ μ°Έμ‘°ν•œλ‹€. μ‹λ³„μžμ˜ μœ νš¨λ²”μœ„λ₯Ό μ•ˆμ—μ„œλΆ€ν„° λ°”κΉ₯으둜 μ°¨λ‘€λ‘œ lexical ν™˜κ²½μ„ 검색해 λ‚˜κ°€λŠ” 것을 λ§ν•©λ‹ˆλ‹€.

5. ν΄λ‘œμ €μ˜ λ™μž‘λ₯Ό μ‹€ν–‰μ»¨ν…μŠ€νŠΈ κ°œλ…μ„ ν™œμš©ν•˜μ—¬ μ„€λͺ…ν•΄μ£Όμ„Έμš”.

μš°μ„  ν΄λ‘œμ €λŠ” μ™ΈλΆ€ ν•¨μˆ˜ λ°–μ—μ„œ λ‚΄λΆ€ν•¨μˆ˜κ°€ ν˜ΈμΆœλ˜λ”λΌλ„ μ™ΈλΆ€ν•¨μˆ˜μ˜ 지역 λ³€μˆ˜μ— μ ‘κ·Όν•  수 μžˆλŠ”λ° μ΄λŸ¬ν•œ ν•¨μˆ˜λ₯Ό ν΄λ‘œμ €(Closure)라고 λΆ€λ¦…λ‹ˆλ‹€.

λ‚΄λΆ€ ν•¨μˆ˜κ°€ μœ νš¨ν•œ μƒνƒœμ—μ„œ μ™ΈλΆ€ ν•¨μˆ˜κ°€ μ’…λ£Œν•˜μ—¬ μ™ΈλΆ€ ν•¨μˆ˜μ˜ μ‹€ν–‰μ»¨ν…μŠ€νŠΈκ°€ λ°˜ν™˜λ˜μ–΄λ„, μ™ΈλΆ€ν•¨μˆ˜ μ‹€ν–‰μ»¨ν…μŠ€νŠΈ λ‚΄μ˜ ν™œμ„± κ°μ²΄λŠ” λ‚΄λΆ€ ν•¨μˆ˜μ— μ˜ν•΄ μ°Έμ‘°λ˜λŠ” ν•œ μœ νš¨ν•˜μ—¬ λ‚΄λΆ€ν•¨μˆ˜κ°€ μŠ€μ½”ν”„ 체인을 톡해 μ°Έμ‘°ν•  수 μžˆλŠ” 것을 μ˜λ―Έν•œλ‹€.

즉 μ™ΈλΆ€ν•¨μˆ˜κ°€ 이미 λ°˜ν™˜λ˜μ—ˆμ–΄λ„ μ™ΈλΆ€ν•¨μˆ˜ λ‚΄μ˜ λ³€μˆ˜λŠ” 이λ₯Ό ν•„μš”λ‘œ ν•˜λŠ” λ‚΄λΆ€ν•¨μˆ˜κ°€ ν•˜λ‚˜ 이상 μ‘΄μž¬ν•˜λŠ” 경우 계속 μœ μ§€λœλ‹€.

6. lexicalEnvironment(μ–΄νœ˜μ ν™˜κ²½ || 정적확경 || μ‚¬μ „μ ν™˜κ²½)에 λŒ€ν•΄ μ„€λͺ…ν•΄μ£Όμ„Έμš”.

μžλ°”μŠ€ν¬λ¦½νŠΈ μ½”λ“œμ—μ„œ λ³€μˆ˜ λ˜λŠ” ν•¨μˆ˜ μ‹λ³„μžλ₯Ό λ§΅ν•‘ν•˜λŠ”λ° μ‚¬μš©λ˜λŠ” 객체둜 outerEnvironment와 environment record둜 κ΅¬λΆ„λœλ‹€.

Environment Record(ν™˜κ²½ λ ˆμ½”λ“œ)
μŠ€μ½”ν”„μ— ν¬ν•¨λœ μ‹λ³„μžλ₯Ό λ“±λ‘ν•˜κ³  λ“±λ‘λœ μ‹λ³„μžμ— 바인딩 된 값을 κ΄€λ¦¬ν•˜λŠ” μ €μž₯μ†Œμ΄λ‹€.

μ½”λ“œκ°€ μ‹€ν–‰λ˜κΈ° 전에 이미 μ»¨ν…μŠ€νŠΈμ—λŠ” μ‹λ³„μž 정보와, μ»¨ν…μŠ€νŠΈμ™€ κ΄€λ ¨λœ 정보가 μ°¨λ‘€λŒ€λ‘œ μˆ˜μ§‘λ˜μ–΄ μžˆμ–΄ 이미 κ·Έ ν™˜κ²½μ— μ†ν•œ λ³€μˆ˜λͺ…듀을 μ•Œκ³  μžˆλŠ”λ° 이것을 ν˜Έμ΄μŠ€νŒ…(μ‹λ³„μžλ“€μ„ μ΅œμƒλ‹¨μœΌλ‘œ λŒμ–΄λ‹€ 놓은 λ’€ μ‹€ν–‰)이라고 ν•œλ‹€.

Outer environment Reference(μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½)
μƒμœ„ μŠ€μ½”ν”„λ₯Ό 가리킨닀. μƒμœ„ μŠ€μ½”ν”„λž€ ν•΄λ‹Ή μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό μƒμ„±ν•œ μ†ŒμŠ€μ½”λ“œλ₯Ό ν¬ν•¨ν•˜λŠ” μƒμœ„ μ½”λ“œμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ„ λ§ν•œλ‹€. μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘°λ₯Ό 톡해 단방ν–₯ λ§ν¬λ“œ 리슀트인 μŠ€μ½”ν”„ 체인이 κ΅¬ν˜„λœλ‹€.

ν˜„μž¬ 호좜된 ν•¨μˆ˜κ°€ 선언될 λ‹Ήμ‹œμ˜ μ™ΈλΆ€ λ ‰μ‹œμ»¬ν™˜κ²½μ„ μ°Έμ‘°ν•œλ‹€. μžμ‹ μ˜ μŠ€μ½”ν”„λ₯Ό μ œμ™Έν•œ μ™ΈλΆ€ μ½”λ“œμ™€ μ—°κ΄€λ˜μ–΄ μžˆλ‹€.

Ref

profile
맀 μˆœκ°„ μ„±μž₯ν•˜λŠ” κ°œλ°œμžκ°€ 되렀고 λ…Έλ ₯ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

2개의 λŒ“κΈ€

comment-user-thumbnail
2022λ…„ 5μ›” 31일

μ•ˆλ…•ν•˜μ„Έμš”!
λ³€μˆ˜ 객체(Variable Object) < 의 경우 ES5 μ΄μ „μ—μ„œ μ‚¬μš©λ˜μ—ˆκ³ ,
ν˜„μž¬λŠ” λ ‰μ‹œμ»¬ ν™˜κ²½μœΌλ‘œ λ³€κ²½λ˜μ—ˆλ‹΅λ‹ˆλ‹€!

이 λ³€μˆ˜ 객체의 역할은 ν˜„μž¬ Environment Record 쀑 Object Environment Recordμ—μ„œ ν•˜κ³  μžˆμ–΄μš”! (μ „μ—­μ˜ 경우, 이 ν™˜κ²½ λ ˆμ½”λ“œμ˜ [[Binding Object]] 에 전역객체가 바인딩 λ˜λŠ” ν˜•μ‹)

κ΄€λ ¨ 자료 λͺ‡κ°€μ§€ 두고 κ°€κ² μŠ΅λ‹ˆλ‹€!
ES5 μ΄μ „μ˜ VO : http://dmitrysoshnikov.com/ecmascript/chapter-2-variable-object/
stack overflow γ€ŽWhy variable object was changed to lexical environment in ES5?』: https://stackoverflow.com/questions/40544709/why-variable-object-was-changed-to-lexical-environment-in-es5
Lexical Environment (VOμ—μ„œ λ ‰μ‹œμ»¬ν™˜κ²½μœΌλ‘œ λ°”λ€ŒλŠ” 점을 μ„€λͺ…ν•˜λŠ” λ‚΄μš©, ES5) : https://www.youtube.com/watch?v=OPc73p2d0T8&t=18s

1개의 λ‹΅κΈ€