Input + Output = True
Javascript] ์ค์ฝํ(์ค์ฝํ, ์ค์ฝํ์ฒด์ธ, ๋ ์์ปฌ ์ค์ฝํ) ๋ณธ๋ฌธ
Javascript] ์ค์ฝํ(์ค์ฝํ, ์ค์ฝํ์ฒด์ธ, ๋ ์์ปฌ ์ค์ฝํ)
IOTrue 2023. 5. 10. 21:46๐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) ๋๋ ์ ์ ์ค์ฝํ๋ผ๊ณ ํ๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ๋ค๋ฉด ๊ผญ ์์์ผ ํ๋ ๊ฐ๋ ์ธ ์ค์ฝํ, ์ค์ฝํ์ฒด์ธ, ๋ ์์ปฌ ์ค์ฝํ์ ๋ํด์ ์์๋ดค๋ค.
๋ค์ ํฌ์คํ ์ ์กฐ๊ธ ๋ ๊น์ด๊ฐ ์๋ ์คํ ์ปจํ ์คํธ์ ๋ํด ์์๋ณด๊ฒ ๋ค.
'๐จFrontEnd > Javascript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
javascript 'use strict'๋? (0) | 2023.07.19 |
---|---|
์๋ฐ์คํฌ๋ฆฝํธ ๋ฉ๋ชจ๋ฆฌ ๊ตฌ์กฐ - ์ฝ ์คํ, ๋ฉ๋ชจ๋ฆฌ ํ (0) | 2023.07.16 |
Javascript] ์๋ฐ์คํฌ๋ฆฝํธ this (0) | 2023.03.31 |
parameter์ argument์ ์ฐจ์ด (0) | 2023.03.28 |
์๋ฐ์คํฌ๋ฆฝํธ ํธ์ด์คํ ๊ณผ TDZ (0) | 2023.03.28 |