javscript 에서 변수의 사용은 어떻게 보면 아주 편하고 어떻게 보면 아주 조심히 살펴 봐야 할 부분이다.
사실 막 코딩을 배우기 시작했을 때는 이러한 스코프에 대한 개념 자체가 없었기 때문에
지역 변수나 전역 변수 그냥 돌아가는 소스만들 찍어내느라 바빴기 때문에 신경 쓰지도 못했다.
설명에 앞서 몇가지 용어 설명을 하겠다.
'Binding' - var 할당, 함수 인자 사용, this 전달, 프로터피 할당 등의 과정에서 자바스크립의 이름에 값을 할당 하는 행위이다. 지금부터 이야기 하려는 이야기 자체가 변수의 바인딩으로 부터 시작 되기 때문에 먼저 정의를 이야기 하고 가겠다.
'Scope' - 변수에게 스코프라함. 해단 변수가 값을 전달해 줄수 있는 생명 주기를 나타낸다.
1. 전역 스코프
javascript에서 아래와 같이 변수를 선언하게 되면 전역 변수로 인식하게 된다.
global_var = 'hello, where?'
var 키워드 없이 변수를 정의하게 되면 자연스럽게 전역 스코프가 되며 프로그램의 모든 함수와 메서드에서 접근하여 읽거나 변경할수 있다.
일반적으로 사용하는 jQuery의 $나 Underscore의 _ 또한 전역 변수로 사용되는 하난의 변수명일 뿐이다.
구현을 하다보면 동일한 변수명을 사용할수도 있기 떄문에 전역변수를 사용하면서 찾기 힘든 버그가 발생하기도 한다. 사실 javascript에서는 이러한 것을 방지하거나 제한을 두지 않기 때문에 실행시점에 변경되는 값에 대한 추적을 하면서 개발을 해야 하는 경우도 있었다.
꼭 필요한 경우가 아니라면 전역변수는 피하는 편이 좋다.
2. 어휘 스코프
어휘 스코프는 결국에는 현재 위치에서 해당 변수 값의 유효 범위를 나타낸다. 말이 어렵기는 하지만 아래 코드를 보면 어느 정도는 이해할수 있을 것이다.
lexical_var = '1'
function scope() {
var lexical_ver = '2';
return function() {
var lexical_var = '3';
alert(lexical_var);
};
};
위의 예제를 보면 가장 가까운 변수를 값을 가진다.
(scope())(); 실행 시에 화면에는 스코프상 가장 가까운 값인 3이 찍힐 것이다.
3. 동적 스코프
동적 스코프는 아주 단순한 바인딩 방식이긴 하지만 극히 드물게 사용된다.
동적 스코프는 말 그대로 특정 변수에 저장되어 있는 값이 실행시 마다 바뀔수 있다는 것을 나타낸다.
실행되는 순서나 시점에 따라서 전달되는 값이 달라지게 된다.
javascript에서는 this 레퍼런스에 동적 스코프가 사용된다.
개발을 하면서 자주 실수를 하는 부분인데 분명 개발하는 단계에서는 this 키워드로 해당 객체 자신의 값을 지정할 것으로 예상하지만 그 예상이 종종 빗나가곤 한다.
특정 버튼에 클릭과 같은 이벤트 처리 시 해당 버튼의 this값을 읽어 왔을때 우리가 예상할수 없는 동작을 하곤한다.
4. 함수 스코프
함수 스코프는 javascript에서 지원 하는 가장 작은 단위의 스코프이다. 이 부분을 잘 이용해야 한다.
함수 내부의 변수들은 아무지 개발시 제일 하단에 선언을 했을 지라도 파싱되어 실행될 경우에는 항상 제일 상단에 선언되도록 위치가 변경된다.(이를 호이스팅이라고 한다.)
결국 선언을 제일 하단에 하더라도 결국은 제일 처음에 모든 변수들을 선언하고 시작하는 것과 마찬가지다.