https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures
: 클로저는 함수와 함수가 선언된 어휘적 환경의 조합. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다.
// closure.html 파일
<!DOCTYPE html>
<html lang="ko">
<head>
<title>클로저 실습</title>
<script>
function aaa(){
const apple = 10
function bbb(){
console.log(apple)
}
bbb()
}
aaa();
</script>
</head>
<body>
클로저 실습
</body>
</html>코드를 살짝 변경해서 코드 실행과정을 살펴보자
브레이크 포인트를 다시 aaa()에 두고 실행
개발자 도구를 통해 한줄한줄 실행하다보면
그럼 위와 같이 콜스택에 aaa와 bbb가 생성되어있음을 볼 수 있다.
bbb는 스택의 가장 위에 있기때문에 가장먼저 콜스택을 빠져나가고
이제 다시 위로 올라와 다시 스코프 부분을 보면 local은 bbb함수를 의미한다
bbb함수에서 콘솔로 apple 이라는 변수를 찍어보려고 하지만 bbb안에는 apple이라는 변수가 없다
따라서 JS는 apple이라는 변수를 찾기 위해 스코프로 올라간다. 그런데!? 아까 보지 못했던 clouse 라는 것이 찍힌다.
Clousure를 찍어보면apple: 10이 적혀있는 것을 볼 수 있다
그래서 클로저가 뭔데?
bbb 함수 스코프 안에 apple이라는 변수가 없어 aaa라는 상위함수의 스코프로 찾아 올라가 apple 이라는 변수를 찾게됨
aaa함수는 bbb의 closure가 되며 bbb가 apple 을 찾아 올라갈 수 있는 이유는 실행컨텍스트 외부 환경 요소를 수집하기 떄문이다.
즉, 클로저라고 함은 상위 함수와, 해당함수(여기서는 bbb함수)가 선언된 스코프 즉 상위함수를 둘러싼 환경이다.
스코프 체인과 클로저 간단 정리
- 클로저(closure) : 상위 함수 + 상위함수의 lexical enviroment(상위함수를 둘러싼 환경)
- 스코프 체인(scope chain) : 바로위 함수 스코프 뿐만아니라 global 스코프 까지 찾아 올라가는 과정을 scope chain이라고 합니다.
