프로그래밍/Javascript
자바스크립트 중급 11 - 클로저(Closure)
mimi04
2023. 6. 14. 12:47
*js는 '어휘적 환경(Lexical Environment)' 을 갖는다.
let one; //→ undefined
one = 1; //→ 1
function addOne(num){ //addOne: function
console.log(one + num);
}
addOne(5);
→ Lexical 환경: one- 초기화X (사용 불가) / addOne- function 초기화O (사용 가능)
[내부 Lexical 환경] → [전역 Lexical 환경]
num : 5 참조 one : 1
addOne : function
내부 → 외부 → 전역 Lexical 환경 순으로 찾는다.
function makeAdder(x){ //1.<전역 Lexical환경>
return function(y){ //makeAdder : function
return x + y; //add3 : (초기화x) -> function
}
}
const add3 = makeAdder(3); //2.<makeAdder Lexical환경> x:3
console.log(add3(2)); //5 //<익명함수 Lexical환경> y:2
const add10 = makeAdder(10);
console.log(add10(5)); //15
console.log(add3(1)); //4 → add10이 생성되도 add3은 똑같이 존재. 다른 환경이기 때문
→ function(y) : y를 가지고 있고 상위함수인 makeAdder의 x에 접근 가능
add3 함수가 생성된 이후에도 상위함수인 makeAdder의 x에 접근 가능
→ Colsure:
함수와 Lexical 환경의 조합
함수가 생성될 당시의 외부 변수를 기억
생성 이후에도 계속 접근 가능
내부함수가 외부함수에 접근 가능
function makeCounter() {
let num = 0; //외부함수
return function () {
return num++; //내부함수
};
}
let counter = makeCounter();
console.log(counter()); //0
console.log(counter()); //1
console.log(counter()); //2
반응형