티스토리 뷰
반응형
클로저(Closure)는 어떤 함수가 함수의 외부에서 선언된 변수에 접근하는 것을 말한다.
아래와 같이 for 문에서 var을 사용해보자. i가 4가 되면 false가 되어 for 문을 나온다. 콜백 함수(클릭 이벤트가 발생한 뒤의 동작을 정한 함수)는 나중에 실행된다. 콜백 함수 영역 밖에 있는 변수 i를 계속 참조하면서 기억해둔다. 그게 4이기 때문에 콜백 함수가 실행될 때 결괏값이 계속 4가 나오는 것이다.
여기에서 i는 클로저 변수라고 할 수 있다.
See the Pen Untitled by cw (@fromnowwon) on CodePen.
반면에 for 문에서 let을 사용하면 어떻게 될까? let은 블록 스코프이다. 때문에 for 문 밖으로 나온 변수 i와 상호작용하지 않는다. 따라서 클릭한 칸의 i값 대로 올바르게 출력된다. 블록 안에 있는 변수 i는 블록 밖에서 출력할 수 없다. i를 블록 밖에서 출력하면 오류가 뜬다.
See the Pen for 문에서 let by cw (@fromnowwon) on CodePen.
반응형
'JavaScript' 카테고리의 다른 글
| [Javascript] from() 메서드 사용해 배열로 만들기 (0) | 2021.10.24 |
|---|---|
| [Javascript] forEach(), for in 문, for of 문 특징과 비교 (0) | 2021.10.22 |
| [Javascript] 공장(팩토리) 함수 / 생성자 함수 / 클래스(class) (0) | 2021.10.20 |
| [Javascript] 객체의 참조, 얕은 복사, 깊은 복사 (0) | 2021.10.19 |
| [Javascript] JSON 객체 - parse(), stringify() 같이 사용하여 깊은 복사하기 (0) | 2021.10.18 |