λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
πŸ’» ν”„λ‘ νŠΈμ—”λ“œ/πŸ“š JS

[μžλ°”μŠ€ν¬λ¦½νŠΈ] μ‹€ν–‰μ»¨ν…μŠ€νŠΈ

by megan07 2023. 12. 27.

πŸ“Œ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ(Execution Context)

μ‹λ³„μžμ™€ μŠ€μ½”ν”„, μ½”λ“œ μ‹€ν–‰ μˆœμ„œλ₯Ό κ΄€λ¦¬ν•˜κΈ° μœ„ν•΄ κ΅¬ν˜„ν•œ λ‚΄λΆ€ λ©”μ»€λ‹ˆμ¦˜

μ‹λ³„μžμ™€ μŠ€μ½”ν”„λŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μœΌλ‘œ κ΄€λ¦¬ν•˜κ³ ,
μ½”λ“œ μ‹€ν–‰ μˆœμ„œλŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμœΌλ‘œ κ΄€λ¦¬ν•©λ‹ˆλ‹€.

 

μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒ

μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” μŠ€νƒ 자료ꡬ쑰둜 κ΄€λ¦¬λ©λ‹ˆλ‹€.
μ½”λ“œκ°€ μ‹€ν–‰λ˜λ©΄ ν•΄λ‹Ή μ½”λ“œμ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μƒμ„±λ˜μ–΄ μŠ€νƒμ— push되고, 싀행이 μ’…λ£Œλ˜λ©΄ pop λ©λ‹ˆλ‹€.

 

λ ‰μ‹œμ»¬ ν™˜κ²½

μ‹λ³„μžμ™€ μŠ€μ½”ν”„λ₯Ό κ΄€λ¦¬ν•˜λŠ” μžλ£Œκ΅¬μ‘°μž…λ‹ˆλ‹€.
ν™˜κ²½λ ˆμ½”λ“œμ™€ μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ 참쑰둜 κ΅¬μ„±λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.

ν™˜κ²½λ ˆμ½”λ“œ
μŠ€μ½”ν”„μ— λŒ€ν•œ μ‹λ³„μžμ™€ λ°”μΈλ”©λœ 값을 κ΄€λ¦¬ν•©λ‹ˆλ‹€.

μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘°
μƒμœ„ μŠ€μ½”ν”„λ₯Ό κ°€λ¦¬ν‚΅λ‹ˆλ‹€
μŠ€μ½”ν”„ 체인 = μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘°λ₯Ό 톡해 단방ν–₯ λ§ν¬λ“œ 리슀트둜 κ΅¬ν˜„λ˜λŠ” 것

 

 

πŸ’‘ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ 생성 κ³Όμ •

let x = 1;

function first(a){
	const x = 2;
	const y = 3;
	
	function second(b){
		const z = 4;
		console.log(a + b + x + y + z); // 39

	}
	second(10);

}

first(20);

 

πŸš€ κ°„λ‹¨ν•˜κ²Œ

μ½”λ“œ μ‹€ν–‰ μ „ 평가 단계
1. μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ 생성
2. λ ‰μ‹œμ»¬ ν™˜κ²½ 생성(ν™˜κ²½λ ˆμ½”λ“œ:μ‹λ³„μž 등둝 관리, μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½ μ°Έμ‘°:μƒμœ„ μŠ€μ½”ν”„)

μ½”λ“œ μ‹€ν–‰
1. μ‹λ³„μž κ²°μ •(ν˜„μž¬ 싀행쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ—μ„œλΆ€ν„° μƒμœ„ μŠ€μ½”ν”„λ‘œ 순차적으둜 검색함)

 

πŸ“š μƒμ„Έν•˜κ²Œ

  1. μ „μ—­ 객체 생성
  2. μ „μ—­ μ½”λ“œ 평가
    1. μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ 생성
    2. μ „μ—­ λ ‰μ‹œμ»¬ ν™˜κ²½ 생성
      1. μ „μ—­ ν™˜κ²½ λ ˆμ½”λ“œ 생성
        1. 객체 ν™˜κ²½ λ ˆμ½”λ“œ 생성
        2. 선언적 ν™˜κ²½ λ ˆμ½”λ“œ 생성
      2. this 바인딩
        1. [[GlobalThisValue]] λ‚΄λΆ€ μŠ¬λ‘―μ— this 바인딩
        2. 일반적으둜 μ „μ—­ μ½”λ“œμ—μ„œ thisλŠ” μ „μ—­ 객체λ₯Ό 가리킴
      3. μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘° κ²°μ •
  3. μ „μ—­ μ½”λ“œ μ‹€ν–‰
    1. μ‹λ³„μž κ²°μ •
      1. ν˜„μž¬ μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ—μ„œ 검색
      2. μ‹λ³„μžλ₯Ό 검색할 수 μ—†μœΌλ©΄, μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘°κ°€ κ°€λ¦¬ν‚€λŠ” λ ‰μ‹œμ»¬ ν™˜κ²½(μƒμœ„ μŠ€μ½”ν”„)으둜 μ΄λ™ν•˜μ—¬ μ‹λ³„μž 검색
  4. first ν•¨μˆ˜ μ½”λ“œ 평가
    1. ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ 생성
    2. ν•¨μˆ˜ λ ‰μ‹œμ»¬ ν™˜κ²½ 생성
      1. ν•¨μˆ˜ ν™˜κ²½ λ ˆμ½”λ“œ 생성
        1. λ§€κ°œλ³€μˆ˜, arguments 객체, ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ μ„ μ–Έν•œ 지역 λ³€μˆ˜μ™€ 쀑첩 ν•¨μˆ˜ λ“±λ‘ν•˜κ³  관리
      2. this 바인딩
        1. [[ThisValue]] λ‚΄λΆ€ μŠ¬λ‘―μ— this 바인딩
        2. 일반 ν•¨μˆ˜λ‘œ ν˜ΈμΆœλ˜μ—ˆμœΌλ―€λ‘œ thisλŠ” μ „μ—­ 객체λ₯Ό 가리킴
      3. μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½μ— λŒ€ν•œ μ°Έμ‘° κ²°μ •
        1. first ν•¨μˆ˜ μ •μ˜κ°€ ν‰κ°€λœ μ‹œμ μ— μ‹€ν–‰ 쀑인 μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ λ ‰μ‹œμ»¬ ν™˜κ²½μ˜ μ°Έμ‘°κ°€ ν• λ‹Ήλœλ‹€
        2. ν•¨μˆ˜κ°€ μ–΄λ””μ„œ ν˜ΈμΆœλλŠ”μ§€κ°€ μ•„λ‹ˆλΌ μ–΄λ””μ—μ„œ μ •μ˜ν–ˆλŠ”μ§€μ— 따라 μƒμœ„ μŠ€μ½”ν”„κ°€ 결정됨
  5. first ν•¨μˆ˜ μ½”λ“œ μ‹€ν–‰
  6. second ν•¨μˆ˜ μ½”λ“œ 평가
    1. first ν•¨μˆ˜ μ½”λ“œ 평가와 κ°™μŒ
  7. second ν•¨μˆ˜ μ½”λ“œ μ‹€ν–‰
  8. second ν•¨μˆ˜ μ½”λ“œ μ‹€ν–‰ μ’…λ£Œ
    1. μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ—μ„œ 제거
    2. μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ—μ„œ μ œκ±°λ˜μ—ˆμ–΄λ„ 값이 λˆ„κ΅°κ°€μ— μ˜ν•΄ μ°Έμ‘° λ˜μ—ˆλ‹€λ©΄ λ ‰μ‹œμ»¬ ν™˜κ²½μ€ μ†Œλ©Έλ˜μ§€ μ•ŠλŠ”λ‹€
  9. first ν•¨μˆ˜ μ½”λ“œ μ‹€ν–‰ μ’…λ£Œ
  10. μ „μ—­ μ½”λ“œ μ‹€ν–‰ μ’…λ£Œ

 

블둝 레벨 μŠ€μ½”ν”„

❗️블둝 μŠ€μ½”ν”„μ— λŒ€ν•œ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” μƒμ„±λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€!
블둝 λ ‰μ‹œμ»¬ ν™˜κ²½ 생성 O, μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ 생성 X

블둝 λ ‰μ‹œμ»¬ ν™˜κ²½μ˜ μ™ΈλΆ€ λ ‰μ‹œμ»¬ ν™˜κ²½ μ°Έμ‘°λŠ” μ½”λ“œ 블둝을 μƒμ„±ν•œ λ ‰μ‹œμ»¬ ν™˜κ²½μž…λ‹ˆλ‹€.