Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- parcel tilde
- web server vs was
- 함수 호이스팅
- typescript parcel tilde
- task queue
- parcel resolver error
- javascript first class citizen
- 자료구조
- 선형리스트
- centos7 설치
- parcel
- redux 사용 이유
- 일급 객체
- express request body
- redux 특징
- parcel tilde path
- request body undefined
- 자료구조 queue
- client side rendering
- 변수 호이스팅
- javascript module
- 순차리스트
- javascript eventloop
- 자료구조 정렬
- server side rendering
- first class citizen
- body-parser
- Event Loop
- es6 module
- Call stack
Archives
- Today
- Total
기술 블로그
javascript 클로저 코드를 통해 알아보기 본문
function outerFunc() {
var foo = "Foo";
return function() {
console.log(foo);
}
}
var closure = outerFunc();
closure();
위 스크립트가 실행되면 아래 그림 좌측부터 우측 순서로 실행컨텍스트가 생성됩니다.
실행 컨텍스트는 함수가 호출되는 시점에 생성되며, 이 때 실행 컨텍스트 내부의 SCOPE 객체는 함수가 어디에 선언되었는지에 따라 결정되게 됩니다.
그 다음, 호출 스택에 아래와 같은 순서로 실행컨텍스트가 push / pop 됩니다.
- push 전역 실행컨텍스트
- push outerFunc 실행컨텍스트
- pop outerFunc 실행컨텍스트
- push anomyFunc 실행컨텍스트
- pop anomyFunc 실행컨텍스트
- pop 전역 실행컨텍스트
전역 실행컨텍스트 VO 객체에 closure 변수는 최초엔 undefined 로 초기화 되어있지만
var closure = outerFunc()
이 코드의 실행결과로 anomyFunc 참조 값이 할당됩니다.
closure()
이 코드로 인해 호출스택에 anomyFunc 실행컨텍스트가 push 됩니다.
anomyFunc 실행컨텍스트 VO 객체에는 foo 변수가 존재하지 않습니다.
하지만, 여기서 끝나지 않고 SCOPE 객체에 들어있는 컨텍스트 객체들을 순서대로 참조하며 foo 변수를 찾습니다. (Scope chaining)
outerFunc 컨텍스트의 VO 객체에 foo 변수가 존재하므로
콘솔창에는 "Foo" 가 출력되고 호출스택에서 anomyFunc 컨텍스트는 pop 됩니다.
마지막으로 전역 컨텍스트가 pop 되며 스크립트는 종료됩니다.
여기서, 외부함수의 컨텍스트 환경에 접근할 수 있는 함수인 anomyFunc 을 '클로저 함수' 라고 부르며,
변수 closure 는 '클로저' 가 됩니다.
'스터디' 카테고리의 다른 글
[javascript] 모듈 사용방식과 번들러 사용 이유 (2) | 2018.05.26 |
---|---|
API를 사용하는 이유 (4) | 2017.07.23 |
Redux란? (2) | 2017.07.08 |
Web Server 와 WAS(Web Application Server) 차이 (2) | 2017.03.09 |
Flux 아키텍쳐 란?? (0) | 2017.02.12 |
Comments