자바스크립트 스코프와 클로저

스코프

스코프란? 현재 접근할 수 있는 변수들의 범위를 뜻한다.

어떤 변수가 스코프 안에서 선언되었으면 해당 스코프 안에서 변수를 접근해서 읽거나 쓸 수 있다.

스코프 밖에서는 해당 변수에 접근할 수 없다.

스코프의 생성

자바스크립트의 스코프는 특정 구문이 실행 될때 새로 생성하여 스코프 체인을 생성하게 된다.

스코프를 생성하는 구문

function

with

catch

스코프의 지속성

새로운 스코프가 생성되고 스코프 체인을 참조하는 함수를 변수에도 넣을 수 있다.

다른 함수의 인자로 넘겨줄수도 있다.

함수의 반환값으로 활용할수도 있다.

즉, 함수가 선언된 곳이 아닌  전혀 다른 곳에서 함수가 호출될 수 있어서 해당 함수가 현재 참조하는 스코프를 지속할 필요가 있는 것이다.

function () {} 함수리터럴이라고 한다.

클로저

특정함수가 참조하는 변수들이 선언된 렉시컬 스코프는 계속 유지되는데, 그 함수와 스코프를 묶어서 클로저라고 한다.

자바스크립트의 유효범위 체인을 이용하여 이미 생명 주기가 끝난 외부 함수의 변수를 참조하는 방법으로

외부 함수가 종료되더라도 내부 함수가 실행되는 상태면 내부함수에 서 참조하는 외부함수는 닫히지 못하고 내부 함수에 의해 닫히게 되어 클로저라고 불린다.

외부에서 내부변수에 접근할 수 있도록 하는 함수

자바스크립트 라이브러리나 모듈에서 private으로 나의 변수를 보호하고 싶을 때

static 변수를 이용하고 싶을 때

콜백함수에 추가적인 값을 넘겨줘서 활용하거나 처음에 초기화 했던 값을 계속 유지하고 싶을 때

예)

반복적으로 같은 작업을 할때, 같은 초기화 작업이 지속적으로 필요할 때, 콜백함수에 동적인 데이터를 넘겨주고 싶을 때 클로저를 사용

- 클로저로 한번만 DOM을 탐색하고 appendDiv를 계속 보관하여 활용하기

- <div> <img> 등 노드/템플릿을 자바스크립트로 만들어두고 필요할 때마다 복제 생성하여 활용하기

- 하나의 <div>에만 이벤트 핸들러를 설정하여 관리할 수 있는 이벤트 델리게이션 패턴

- 이벤트가 발생한 대상 엘리먼트를 크로스 브라우저에서 가져오기

- callback 변수를 활용하여 대상에 따라 동적으로 콜백함수 호출하기

- HTML5의 스펙에 맞는 사용자 정의 'data-속성' 사용하기

단점

-클로저는 메모리를 소모한다.

-스코프 생성과 이후 변수 조회에 따른 퍼포먼스 손해가 있다.

정리

클로저는 function 안에 function이 있을 때 생성된다.

클로저는 함수가 정의된 스코프 이외의 곳에서 호출될때 private 저장소처럼 활용가능하다.

 - 내부의 function이 반환되어 바로 호출되거나 다른 곳으로 넘겨준 뒤 호출되는 경우

 - setTimeout(), setInterval()등과 같이 함수가 비동기로 호출되는 경우

 - 이벤트 핸들러의 콜백함수로 활용되는경우(addEventListener나 XMLHttpRequest의 onreadystatechange 등)

클로저를 이용해서 초기화할 때는 각 상황에 따라 퍼포먼스를 고려한다.

클로저의 단점은 메모리와 퍼포먼스에 있다.

클로저는 함수가 메모리에 없어질 때까지 유지된다.

같은 함수더라도 다른 클로저를 가지고 있을 수 있다.

클로저는 자바스크립트의 핵심이다.

출처-속깊은 자바스크립트 양성익 지음