Javascript] μ€μ½ν(μ€μ½ν, μ€μ½ν체μΈ, λ μ컬 μ€μ½ν)
πJavascript] μ€μ½ν, μ€μ½ν체μΈ, λ μ컬 μ€μ½ν
β μ€μ½ν Scope
μ€μ½ν (Scope) - λ²μ
Javascriptμμ μ€μ½νλ ‘μλ³μ(λ³μ)μ μ κ·Όν μ μλ μ ν¨λ²μ’λ₯Ό λ»νλ€.
μλ°μ€ν¬λ¦½νΈ μ€μ½νλ 2κ°μ§ νμ μ΄ μλ€.
1. Global (μ μ)
2. Local (μ§μ)
μ μ μ€μ½ν(Global Scope)λ μ μμ μ μΈλμ΄ μμ΄ μ΄λ κ³³μμλ ν΄λΉ λ³μμ μ κ·Όν μ μκ³
μ§μ μ€μ½ν(Local Scope)λ ν΄λΉ μ§μμμλ§ μ κ·Όν μ μλ€.
let a = "global"
function aPrint() {
let a = "local"
console.log(`aPrint : ${a}`)
}
aPrint() //aPrint : local
console.log(`global : ${a}`) //global : global
aPrint ν¨μ λ°κΉ₯μ aλ³μλ μ μ λ³μμ΄κ³ aPrint ν¨μ λ΄μ aλ³μλ μ§μ λ³μμ΄λ€.
aPrint ν¨μλ₯Ό μ€ννλ©΄ aPrint λ΄μ aλ³μκ° μκ³ μ§μ μ€μ½νμ ν΄λΉνκΈ° λλ¬Έμ aPrint: localμ΄ μΆλ ₯λκ³
aPrint ν¨μ λ°κΉ₯μμ console.log(`global : ${a}`)λ₯Ό μ€ννλ©΄
μ μ μ€μ½νμ ν΄λΉνλ aλ₯Ό μ°Ύμ μ€ννκ³ global : globalμ΄ μΆλ ₯λλ€
μλ μ리λ λ€μμ ν¬μ€ν ν μ€ν 컨ν μ€νΈ κΈμμ μμΈν νμΈν μ μλ€.
β μ€μ½ν μ²΄μΈ Scope Chain
μμμ μμλ³Έ μ μ μ€μ½νμ μ§μ μ€μ½νμ κ΄κ³μμ μ€μ½ν 체μΈ(scope chain)μ΄λΌλ κ°λ μ΄ λ±μ₯νλ€.
μ€μ½ν 체μΈμ νΉμ§μ κ°λ¨νκ² μ€λͺ νμλ©΄
1. λ΄λΆ ν¨μμμλ μΈλΆ ν¨μμ λ³μμ μ κ·Ό κ°λ₯νκ³ , μΈλΆ ν¨μμμλ λ΄λΆ ν¨μμ λ³μμ μ κ·Όν μ μλ€.
μ¦, μμμ λ°κΉ₯μΌλ‘μ νμμ κ°λ₯νκ³ λ°κΉ₯μμ μμͺ½μΌλ‘μ νμμ λΆκ°λ₯νλ€.
2. λͺ¨λ ν¨μλ μ μ κ°μ²΄μ μ κ·Όν μ μλ€.
λ€μ μμλ₯Ό 보μ.
let name = "scope"
function outer() {
console.log(`outer name : ${name}`)
function inner() {
let innerData = "innerData"
console.log(`inner name : ${name}`)
}
inner()
}
outer()
//outer name : scope
//inner name : scope
console.log(`innerData : ${innerData}`)
//Uncaught ReferenceError: innerData is not defined
inner ν¨μλ name λ³μλ₯Ό μ°ΎκΈ° μν΄
1. λ¨Όμ μκΈ° μμ μ μ€μ½ν (Local Scope)λ₯Ό νμνκ³
2. μ¬κΈ°μ μμΌλ©΄ ν λ¨κ³ μ¬λΌκ°μ outer μ€μ½νλ₯Ό νμνκ³ ,
3. λ μ¬κΈ°μ μμΌλ©΄ λ€μ μ¬λΌκ°μ κ²°κ΅μ μ μ μ€μ½ν(Global Scope)λ₯Ό νμνλ€.
4. μ μ μ€μ½νμμ name λ³μλ₯Ό μ°Ύμκ³ 'scope'λΌλ κ°μ μ»λλ€.
λ§μ½, μ μ μ€μ½νμλ μ°Ύκ³ μ νλ λ³μκ° μλ€λ©΄ λ³μλ₯Ό μ°Ύμ§ λͺ»νλ€λ μλ¬κ° λ°μνλ€.
μ€μ½ν 체μΈμ 'μμμ λ°κΉ₯μΌλ‘μ νμμ κ°λ₯νκ³ λ°κΉ₯μμ μμͺ½μΌλ‘μ νμμ λΆκ°λ₯νλ€.' λΌκ³ μ€λͺ νλ€.
κ·Έλμ 맨 μλ console.log(`innerData : ${innerData}`)μ κ²°κ³Όλ μ°Έμ‘°μλ¬ 'innerData is not defined'κ° λ°μνλ€.
console.log ν¨μκ° νμ κ°λ₯ν λ²μμΈ Global Scopeμ innerDataκ° μκΈ° λλ¬Έμ΄λ€.
μ΄λ κ² κΌ¬λ¦¬λ₯Ό λ¬Όκ³ κ³μ μμλ‘ λ²μλ₯Ό λνλ©° κ°μ μ°Ύμκ°λ νμμ μ€μ½ν 체μΈμ΄λΌκ³ νλ€.
β λ μ컬 μ€μ½ν Lexical Scope
μλ°μ€ν¬λ¦½νΈμ μ€μ½νλ ν¨μλ₯Ό νΈμΆν λκ° μλλΌ μ μΈν λ μμ±λλ€. λλ¬Έμ μ μ μ€μ½νλΌκ³ λ λΆλ¦°λ€.
μλ μ½λμ κ²°κ³Όλ₯Ό μμν΄λ³΄μ.
let name = "IOTrue"
function inner() {
console.log(name)
}
function outer() {
let name = "Javascript"
inner()
}
outer() //???
μΆλ ₯ κ²°κ³Όλ ???
.
.
.
IOTrueμ΄λ€.
μ€μ½νλ ν¨μλ₯Ό νΈμΆν λκ° μλλΌ μ μΈν λ μμ±λκΈ° λλ¬Έμ
μ΅μ’ μ μΌλ‘ μΆλ ₯λλ inner ν¨μμ nameμ
1. inner ν¨μ λ΄μ Local Scopeμμ nameμ νμνκ³ , μ¬κΈ°μ μκΈ° λλ¬Έμ
2. ν λ¨κ³ μμ μ€μ½νμΈ Global Scopeμμ nameμ νμνκ³ , μ¬κΈ°μ ν΄λΉ λ³μκ° μμΌλ―λ‘
3. μ΅μ’ μΆλ ₯ κ²°κ³Όλ IOTrueκ° λλ€.
outerμμ μ μΈν let name = "Javascript"λ inner ν¨μμλ μκ΄ μλ κ²μ΄λ€.
μ΄λ¬ν κ²μ λ μ컬 μ€μ½ν(Lexical scope) λλ μ μ μ€μ½νλΌκ³ νλ€.
μλ°μ€ν¬λ¦½νΈλ₯Ό μ¬μ©νλ€λ©΄ κΌ μμμΌ νλ κ°λ μΈ μ€μ½ν, μ€μ½ν체μΈ, λ μ컬 μ€μ½νμ λν΄μ μμλ΄€λ€.
λ€μ ν¬μ€ν μ μ‘°κΈ λ κΉμ΄κ° μλ μ€ν 컨ν μ€νΈμ λν΄ μμλ³΄κ² λ€.