Javascript Scope 자바스크립트 스코프란란란?

JS학습내용 중 Scope 관련내용을 정리해본다.

핵심내용 요약을 먼저하면

1. Scope는 일적으로 생각하는 것처럼 {} brace를 기준으로 생성되지 않고 약속된 상황에서만 생성된다. 그렇지 않은 경우라면 Global scope를 갖는것이 일반적

2. 약속된 상황이라면 function구문 / catch 구문 / with 구문 세가지 상황을 말한다.

3. scope가 생성되는 특징때문에 발생되는 현상을 함수를 이용해서 혹은 클로져(closure)를 이용해서 해결한다.

책 내용 중 중요하다고 생각하는 부분만 일부 옮겨본다.

책 제목은 '속 깊은 자바스크립트' 

2.1 스코프란?

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

위의 for-loop를 돌 때는 별도의 스코프가 생성되지 않고 i는 글로벌 스코프에 존재한다. 그러다가 addEventListner()로 콜백 함수를 설정할 때 익명함수가 선언되면서 이때 스코프가 생성되어 스코프 체인을 만들게 된다.

2.1.1 스코프의 생성

이처럼 자바스크립트는 다른 언어와는 달리 일반적인 블록 스코프를 따르지 않는다. 자바스크립트의 스코프는 특정 구문이 실행될 때 새로 생성하여 2.1 절과 같은 스코프 체인을 생성하게 된다. 이렇게 스코프를 생성하는 구문들은 다음과 같다.

 - function / with / catch

* catch 와 with의 경우 인자로 포함되는 error / inScope등의 변수들은 scope 안에서만 사용가능하나 그 내부에서 선언한 변수들은 global scope를 따른다.

2.1.2 스코프의 지속성

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

클로저를 활용한 문제해결

이처럼 함수를 별도로 생성하는 것을 조금 다르게 자바스크립트의 특징 중 하나인 클로저를 활용해서 해결할 수도 있다.

(function (index) {

return function () {

alert("you clicked div # " + index) ;

};

} (i) )

위의 소스가 쉽게 이해된다면 이미 클로저에 대한 개념이 어느 정도 잡혀있는 독자일 것이다. 이러한 기법은 자바스크립트에서 많이 사용되고 있고 응용 볌위도 넓으므로 개발하면서 쉽게 적용할 수 있도록 익혀두면 유용하다. 약간 복잡해 보이고 with 구문과 비슷하게 생각할 수 있지만, with 구문과는 다르게 구문 안에서 스코프 체인을 function 으로 만들고 있다.

var func = function(index) { } ;

var returnValue = func(i);

returnValue = (function (index){ } (i) );

역시 새로운 스코프가 클릭 이벤트 핸들러의 콜백 함수의 상위에 추가되면서 문제를 해결하고 있는데, 이것은 클로저의 아주 기초적인 활용 방법이다.