javascript_in_depth_1

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

스코프

스코프란

스코프(scope)란 현재 위치에서 볼 수 있는 변수들의 범위를 뜻한다.
어떠한 변수가 스코프안에 선언되어 있으면 해당 스코프 안에서는 변수에 접근해서 읽거나 쓸수 있고, 스코프 밖에서는 해당 변수에 접근할 수 없다.

스코프의 함정

스코프 생성시 발생하는 문제 예제
예제에서 발생하는 문제는 스코프가 생성되고 유지되는 방법 때문에 생기는 것이다. 이 문제는 다른 언어와는 다른 자바스크립트의 특징 때문에 발생하는 것으로, 자바스크립트의 스코프와 클로저에 대해서 잘 알아야 하는 이유가 여기에 있다.

foo-loop를 돌면서 addEventListener()로 콜백 함수를 설정할 때 익명함수가 선언되면서 이때부터 스코프가 생성되어 스코프 체인(scope-chain)을 만들게 된다. 각 <div>의 클릭 이벤트에 설정되었던 콜백 함수들은 모두 같은 스코프의 변수인 i를 참조한다. 3번째 루프를 돌고나서 마지막에 i++가 되고나면 변수 i의 값이 3이 되면서 최종적으로 모든 콜백 함수들은 값이 3인 i를 참조한다. 그리고 나중에 클릭 이벤트가 일어나면 alert() 함수는 값이 3인 i를 참조하게 되어 모두 똑같이 "You clicked div #3"을 출력하는 것이다.

스코프의 생성

for-loop 블록 스코프 시험 예제
예제와 같이 자바스크립트는 모든 값에 접근이 가능하다. 이처럼 자바스크립트는 다른 언어와 달리 일반적인 블록 스코프를 따르지 않는다. 자바스크립트는 특정 구문이 실행될 때 스코프를 새로 만들어서 스코프 체인을 생성하게 된다.

자바스크립트에서 스코프를 생성하는 구문

• function
• with
• catch

1) function
function 블록 스코프 시험 예제

2) catch
catch는 내부로 전달되는 파라미터는 블록 내부에서만 접근가능하고, 외부에서는 접근할 수 없다.
내부에서 선언된 변수는 외부에서 접근할 수 있다.

3) with
with 구문은 파라미터로 받은 객체를 스코프체인에 추가하여 동작한다.

with (object) {
    statement;
}

인자로 받은 object가 가지고 있는 변수들은 스코프 체인에 추가하여 해당 변수들을 로컬 변수처럼 사용할 수 있다.

with를 이용한 문제 해결 예제

with구문을 사용하면 안되는 이유

• with 구문을 사용한 소스의 모호성

function doSomething(value, obj) {
    with (obj) {
        console.log(value);
        value = "which scope is this?";
    }
}

value가 어떤 value를 말하는지 알기가 어렵다. doSomething에서 사용하는 value이거나, obj 내부의 value이거나 둘중 하나인데, 이 부분을 확인하기 위해 obj의 구조부터 파악해야 하는 번거로움이 생긴다.

• ECMAScript 6 표준에서 with 구문 제외
• with 구문으로 DOM 스타일 설정 문제와 대안

var s = document.getElementById("myDiv").style;
s.background = "yellow";
s.color = "red";
s.border = "1px solide black";

DOM의 하위 속성에는 자체적으로 변수를 가지고 있으면서 속성을 설정할 수 있다.

스코프의 지속성

스코프가 생성되는 방식은 기존 언어와 다르지 않지만, 스코프가 지속되는것은 다른 언어와는 다른 자바스크립트만의 강점이다. 자바스크립트에서 이러한 스코프의 지속성이 필요한 이유는 새로운 스코프가 생성되고 스코프 체인을 참조하는 함수를 변수에도 넣을 수 있고, 다른 함수의 인자로 넘겨줄 수도 있으며, 함수의 반환값으로 활용활 수도 있기 때문이다. 즉, 지금 함수가 선언된 곳이 아닌 전혀 다른곳에서 함수가 호출될 수 있어서, 해당 함수가 현재 참조하는 스코프를 지속할 필요가 있는 것이다.

1) 함수를 이용한 문제 해결
함수를 이용한 이벤트 핸들러 문제 해결

with 구문와 비슷한 스코프체인을 생성한다. 하지만 with가 가지고 있는 모호성을 배제하고, 완벽하게 이벤트 처리를 위한 별도의 스코프를 하나 만들어서 사용하게 된다. 이렇게 필요할 때 함수로 분리하는 것은 비동기 처리를 많이 하는 자바스크립트의 특성에서는 중요하게 생각해야 하는 개발 방식이다.

2) 클로저를 이용한 문제해결
클로저를 이용한 이벤트 핸들러 문제 해결

IIFE를 사용해서 함수(function)을 만들어서 반환하는 형태로 구현되어 있다.
반환된 함수는 index 변수를 상위 스코프 체인에 추가한 뒤 addEventListener() 함수의 2번째 인자로 들어간다.

클로저

클로저란

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

클로저 이해하기

가장 기본적인 클로저

count 변수는 outer() 함수의 로컬 변수이므로 일반적인 방법으로는 외부에서 접근할 수 없다. 마치 객체지향 언어에서 흔히 말하는 'private 변수'와 비슷하다. 그런데 count 변수에 접근하는 또 다른 함수 inner를 outer() 함수의 반환값으로 지정하고, 이를 글로벌 영역에 있는 increas 변수에 할당함으로써, outer() 함수 외부에서도 increase 변수를 통해 count 변수에 접근할 수 있게 되었다.

클로저의 실제 활용 예

클로저를 가장 많이 사용하는 것은 자바스크립트 라이브러리나 모듈에서 private으로 나의 변수를 보호하고 싶을 때나 static 변수를 이용하고 싶을 때이다. 그리고 일상적으로 콜백 함수에 추가적인 값들을 넘겨줘서 활용하거나 처음에 초기화했던 값을 계속 유지하고 싶을 때도 유용하게 사용할 수 있다.

클로저의 실제 활용 예제

• 클로저로 한번만 DOM 탐색하고 appendDiv를 계속 보관하여 활용
• <div>,<img>등 노드/템플릿을 자바스크립트로 만들어두고 필요시에 복제 생성하여 활용
• 하나의 <div>에만 이벤트 핸들러를 설정하여 관리할 수 있는 이벤트 델리게이션 패턴
• 이벤트가 발생한 대상 엘리먼트를 크로스 브라우저에서 가져오기
• callback 변수를 활요하여 대상에 따라 동적으로 콜백함수 호출하기
• HTML5 스펙에 맞는 사용자 정의 'data-속성' 사용하기 커스텀 데이터 사용하기

클로저를 활용할 수 있는 부분

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

클로저의 단점

1) 클로저는 메모리를 소모한다. setTimeout()이나 이벤트에 대한 콜백 함수등으로 등록했던 함수들이 메모리에 계속 남아있게 되면, 해당하는 클로저도 같이 메모리에 계속 남아있게 된다. 따라서 루프를 돌면서 클로저를 계속 생성하는 설계는 지양해야 한다. 클로저를 생성할 때는 하나의 커다란 클로저를 생성하기보다는 각 변수나 함수들의 생명주기를 분석한 다음 효율적으로 나누면 좋다.

2) 스코프 생성과 이후 변수 조회에 따른 퍼포먼스 손해가 있다. 클로저 하위에 있는 함수에서 상위에 있는 변수에 접근하고자 할 때 클로저로 생성한 스코프를 탐색해야 한다는 문제가 있다. 최근 자바스크립트 엔진들이 이러한 스코프체인 내의 변수 탐색에 대한 최적화를 하고 있어서 스코프 체인이 하나나 두 개이면 큰 차이는 없다. 하지만 과하게 사용하면 이러한 상황이 쌓여서 퍼포먼스에 영향을 미친다.