sat10am - JavaScript Study
@godori
Based on JavaScript Visualizer
Execution
Phase
Creation
Phase
In the Global Creation phase, the JavaScript engine will
var name = 'godori'
var nick = '@dori'
function getUser(){
return {
name: name,
nick: nick
}
}
Execution
Phase
Creation
Phase
almost same as global
In the Function Creation phase, the JavaScript engine will
Global Execution Context
vs
Function Execution Phase
Difference:
global variable
arguments object
arguments: array-like-object
var name = 'godori'
function getUser(nick){
return {
name: name,
nick: nick
}
}
getUser('dori')
Creation Phase
in global execution context
This is
Hoisting
After Global Creation Phase
var name = 'godori';
var nick = 'dori';
function getUser(){
return{
name: name,
nick: nick
}
}
The variables defined by "undefined"
In Global Execution Phase
스코프를 정의할 때, 주로
"변수가 접근가능한 범위"
Scope == The current context of execution.
MDN:
내가 찾는 변수가 현재의 스코프에 존재하지 않는다면
var name = 'godori'
function printName () {
console.log(name)
}
printName()
No name
in current scope!
var name = 'godori'
function printName () {
console.log(name)
}
printName()
상위 스코프로 올라가서 찾는다
올라가다가 global execution context에 도달하면 끝
이를 Scope Chain이라고 하며,
global execution context에도 없을 경우 reference error 발생
클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.
MDN 정의
🤔
?
MDN 정의 (English)
A closure is the combination of
a function and the lexical environment
within which that function was declared.
🤔
?
"어휘적"
A closure is the combination of
a function and the lexical environment
within which that function was declared.
<함수가 실행되는 환경>을 근거로 판단하는것이 아니라
<함수를 정의한 코드의 문맥>을 근거로 판단한다는 것
즉, Lexical Scope는 함수 실행시점이 아닌 함수 정의 시점에 정해진다
inner ( )
outer ( )
inner ( ) 의
Execution Context
함수 안에 함수가 있을 때
내부 함수는 외부 함수의
Execution Context에 대해
변수 접근을 유지할 수 있는 것
이 접근은 외부 함수가
스택에서 제거되어도 유지된다
즉, 클로저란
inner ( )
outer ( )
inner ( )
closure
var count = 0
function makeAdder(x){
return function inner(y){
return x + y
};
}
var addFive = makeAdder(5)
count += addFive(2)
After the Global Creation Phase
var count = 0
function makeAdder(x){
return function inner(y){
return x + y
};
}
var addFive = makeAdder(5)
count += addFive(2)
var count = 0
function makeAdder(x){
return function inner(y){
return x + y
};
}
var addFive = makeAdder(5)
count += addFive(2)
makeAdder( )의
execution Context 였던 환경
var count = 0
function makeAdder(x){
return function inner(y){
return x + y
};
}
var addFive = makeAdder(5)
count += addFive(2)
inner 함수가 실행되면, 일반 스코프의 탐색 법칙에 따라
inner 함수는 outer 함수의
execution context에서 선언되었던 모든 변수에 접근 가능하다.
Scope
Chain
1. "global" Object
2. "this" Object
3. Memory assign
4. variable "undefined"
Hoisting
Context
Scope Chain
Current Execution Context
Closest Execution Context
...
Global Execution Context
Closure
inner ( )
inner ( )
outer ( )
closure
Hoisting
Thank You!
🔭