[JS] 호이스팅(Hoisting)과 클로저(Closure)

호이스팅(Hoisting)

- 선언된 위치가 끌어올려(hoisted)지는 것.

1. 실행 컨텍스트.

2. 선언적 함수 방식으로 생성된 함수. (이미 변수가 생성되어 있으면 기존 값을 해당 함수로 변경.)

3. var 키워드로 선언된 변수. (이미 변수가 생성되어 있으면 새로 생성 x.)

순으로 실행 시작 시 선언됨.

어휘적 유효범위(Lexical scoping)

- 함수가 정의된 시점에서의 변수 유효범위를 사용하여 함수를 실행. (함수를 호출하는 시점에서의 변수 유효범위 x.)

클로저(Closure)

- 스코프 체인을 이용해 호출이 완료된 함수의 내부 변수를 참조할 수 있는 방법.

- 내부 함수를 통해 외부 함수의 실행 컨텍스트 정보를 접근할 수 있는 것.

- 특정 함수 내의 지역 변수를 외부 에서 접근할 수 있도록 하는 내부 함수.

=> 내부 함수를 통해 외부 함수의 지역변수 값이 이용될 수 있도록 유지되는 상황 혹은 그 내부 함수.

=> 함수가 정의되었을 때의 유효범위 체인을 사용하여 실행됨.

- 일반적으로 캡슐화를 위해 사용.

- 호출이 완료된 함수: 가비지 컬렉션 대상.

예외) 내부 함수를 전역에서 접근할 수 있는 상태(내부 함수가 리턴되는 경우 / 내부 함수가 전역 변수에 할당된 경우)

- 주의) 가비지 컬렉션이 수행되지 않기에 실행 속도 하락, 메모리 사용량 증가. 남용 금물.

    반복문 내에 내부함수 정의 시 iterator 값을 내부함수에서 사용하면 논리오류 발생할 수 있음. 

var scope = "global";

function checkscope() {

var scope = "local";

function () { return scope; }

return f();

}

checkscope(); // => "local"

-----------------------------------------------------------

var scope = "global";

function checkscope() {

var scope = "local";

function () { return scope; }

return f;

}

checkscope()(); // => "local" : 함수가 '정의되었을 때'의 유효범위 체인을 사용하여 실행.