μ€ν 컨ν μ€νΈ(Execution Context)
- μ€ν 컨ν μ€νΈλ μ€νν μ½λμ μ 곡ν νκ²½ μ 보λ€μ λͺ¨μλμ κ°μ²΄μ λλ€.
- λμΌν νκ²½μ μλ μ½λλ€μ μ€νν λ νμν νκ²½ μ 보λ€μ λͺ¨μ 컨ν μ€νΈλ₯Ό ꡬμ±νκ³ μ΄λ₯Ό μ½μ€νμ μμ μ¬λ¦½λλ€.
- μ€ν 컨ν μ€νΈλ μ μ곡κ°μ΄ μμ±λ λ, ν¨μκ° νΈμΆλ λ μμ±λ©λλ€.
μ€ν 컨ν μ€νΈμ μ½ μ€ν μμ
μ½λ μ€νμ, μ μ곡κ°μ΄ νμ±νλλ©΄μ μ μ 컨ν μ€νΈκ° μμ±λκ³ ν¨μ νΈμΆ μμλλ‘ μ½μ€νμ μ€ν 컨ν μ€νΈκ° μμ΄λκ²μ νμΈν μ μμ΅λλ€.
μ€ν 컨ν μ€νΈκ° λ΄κ³ μλ μ 보
- Variable Environment
- environmentRecord (snapshot) : νμ¬ μ»¨ν μ€νΈ λ΄μ μλ³μλ€μ λν μ 보
- outerEnvironmentReference (snapshot) : μΈλΆ νκ²½ μ 보
- Lexical Environment
- environmentRecord : νμ¬ μ»¨ν μ€νΈ λ΄μ μλ³μλ€μ λν μ 보
- outerEnvironmentReference : μΈλΆ νκ²½ μ 보
- Variable Environmentμ λμΌνμ§λ§ λ³κ²½μ¬νμ΄ μ€μκ°μΌλ‘ λ°μλ¨
- Variable Environmentμ μ 보λ₯Ό λ¨Όμ λ΄κ³ , μ΄λ₯Ό κ·Έλλ‘ λ³΅μ¬ν΄μ Lexical Environmentλ₯Ό λ§λ€κ³ μ΄ν Lexical Environmentλ₯Ό μ£Όλ‘ μ¬μ©ν©λλ€.
- ThisBinding : μλ³μκ° λ°λΌλ΄μΌ ν λμ κ°μ²΄
environmentRecord
- 맀κ°λ³μλͺ , μ μΈλ ν¨μ μ체, λ³μλͺ λ±μ΄ λ΄κΉλλ€.
- 컨ν μ€νΈ λ΄λΆλ₯Ό μ²μλΆν° λκΉμ§ νμνλ©° μμλλ‘ μμ§ν©λλ€.
νΈμ΄μ€ν (Hoisting)
- νΈμ΄μ€ν μ μλ³μλ€μ μ΅μλ¨μΌλ‘ λμ΄μ¬λ¦¬λ κ²μ λ»ν©λλ€.
- μλ³μλ§ λμ΄μ¬λ¦¬κ³ ν λΉ κ³Όμ μ κ·Έλλ‘ λ¨κ²¨λ‘λλ€.
- νΈμμ λμ΄μ¬λ¦¬λ κ²μΌλ‘ κ°μ£Όνλ κ°μμ κ°λ μ΄λ©° μ€μ λ‘ λμ΄μ¬λ¦¬μ§λ μμ΅λλ€.
- -> μ΄ κ³Όμ μ λ§μΉλ©΄ μ½λ μ€ν μ μλ μλ°μ€ν¬λ¦½νΈ μμ§μ λ³μλͺ λ€μ λͺ¨λ μκ³ μκ² λ©λλ€.
ν¨μ μ μΈλ¬Έ(Function Declarations)
μΌλ°μ μΈ νλ‘κ·Έλλ° μΈμ΄μμμ ν¨μ μ μΈκ³Ό λΉμ·ν νμμ λλ€.
function ν¨μλͺ
() {
ꡬν λ‘μ§
}
// μμ
function funcDeclarations() {
return 'A function declaration';
}
funcDeclarations(); // 'A function declaration'
ν¨μ ννμ(Function Expressions)
var ν¨μλͺ
= function () {
ꡬν λ‘μ§
};
// μμ
var funcExpression = function () {
return 'A function expression';
}
funcExpression(); // 'A function expression'
ν¨μ μ μΈμκ³Ό ννμμ μ°¨μ΄μ
ν¨μ μ μΈμμ νΈμ΄μ€ν μ μν₯μ λ°μ§λ§, ν¨μ ννμμ νΈμ΄μ€ν μ μν₯μ λ°μ§ μμ΅λλ€.
ν¨μ μ μΈμμ μ½λλ₯Ό ꡬνν μμΉμ κ΄κ³μμ΄ μλ°μ€ν¬λ¦½νΈμ νΉμ§μΈ νΈμ΄μ€ν μ λ°λΌ λΈλΌμ°μ κ° μλ°μ€ν¬λ¦½νΈλ₯Ό ν΄μν λ 맨 μλ‘ λμ΄ μ¬λ €μ§λλ€.
μλ₯Ό λ€μ΄, μλμ μ½λλ₯Ό μ€νν λ
// μ€ν μ
logMessage();
sumNumbers();
function logMessage() {
return 'worked';
}
var sumNumbers = function () {
return 10 + 20;
};
νΈμ΄μ€ν μ μν΄ μλ°μ€ν¬λ¦½νΈ ν΄μκΈ°λ μ½λλ₯Ό μλμ κ°μ΄ μΈμν©λλ€.
// μ€ν μ
function logMessage() {
return 'worked';
}
var sumNumbers;
logMessage(); // 'worked'
sumNumbers(); // Uncaught TypeError: sumNumbers is not a function
sumNumbers = function () {
return 10 + 20;
};
μ μ½λ κ²°κ³Όλ μλμ κ°μ΅λλ€.
ν¨μ ννμ sumNumbers μμ var λ νΈμ΄μ€ν μ΄ μ μ©λμ΄ μμΉκ° μλ¨μΌλ‘ λμ΄μ¬λ €μ§λλ€.
var sumNumbers;
logMessage();
sumNumbers();
JsCopy
νμ§λ§ μ€μ sumNumbers μ ν λΉλ function λ‘μ§μ νΈμΆλ μ΄νμ μ μΈλλ―λ‘, sumNumbers λ ν¨μλ‘ μΈμνμ§ μκ³ λ³μλ‘ μΈμν©λλ€.
νΈμ΄μ€ν
μ μ λλ‘ λͺ¨λ₯΄λλΌλ ν¨μμ λ³μλ₯Ό κ°κΈμ μ½λ μλ¨λΆμμ μ μΈνλ©΄, νΈμ΄μ€ν
μΌλ‘ μΈν μ€μ½ν κΌ¬μ νμμ λ°©μ§ν μ μμ΅λλ€.
References
'π₯ Front-End > JavaScript' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
[JS] ES6 (0) | 2022.07.24 |
---|---|
[JS] TDZ (0) | 2022.07.21 |
[JS] ν΄λ‘μ (Closure) (0) | 2022.07.21 |
[JS] μ€μ½ν(Scope) (0) | 2022.07.21 |
[JS] JavaScript κ°μ²΄μ λΆλ³μ± (0) | 2022.07.20 |