4. 자바스크립트의 변수 스코프(Variable scope)에 대하여

Chapter 4. 자바스크립트의 변수 스코프

자바스크립트는 다른 언어와는 달리,

변수가 살아있게 되는(?) 범위가 조금 특별하다.

변수 스코프에 대한 개념이 없으면 변수가 이리저리 섞여버릴 것이다.

변수 스코프에 대해 알기 위해 자바스크립트 프로그램이 구동되는 원리부터 살펴보자.

자바스크립트의 특징

1. 자바스크립트는 변수를 함수 단위로 관리한다.

=> 다른 프로그래밍 언어들은 중괄호를 사용하여 변수의 영역을 결정하는게 일반적이다.

하지만 JS는 함수를 단위로 해당 함수가 사용하는 변수를 관리한다.

2. 실행시 변수 검색은 렉시컬 영역 기준으로 한다.

렉시컬 영역(scope)이란 어휘적 영역이란 뜻으로 함수가 선언된 위치에 따라 정의되는 영역(scope)을 말한다.

3. 실행 시의 변수 검색은 변수 스코프 체인을 이용한다.

var가 없는 변수가 정의되는 것은 파싱 단계가 아니라 런타임 단계이다

즉 함수 내부에서 변수를 정의하더라도

var없이 변수를 정의하면 런타임에 전역 스코프에 동적으로 변수가 정의된다.

그렇기 때문에 특별한 목적이 아니라면 변수를 선언할 때는 var를 명시적으로 사용해

변수를 참조할 수 있는 스코프를 명확하게 정의하는 것이 좋다.

변수 스코프의 실체는 객체다.

이 변수 스코프 객체에는 몇 가지 종류의 변수가 추가된다.

그 변수에는

함수를 호출할 때 사용한 인자(argument)

그리고 함수를 정의할 때 사용한 매개변수(parameter)

이 두 가지가 구분되어 추가된다.

그리고 함수 파싱을 통해 찾게 되는 var 변수와

중첩된 내부의 함수 변수가 변수 스코프 객체에 추가된다.

function add(x,y){
     var a = x+y;
     return a;
}
 
var r = add(1,2,3);

변수 스코프 객체는 함수 호출 시 사용된 인자 정보를 갖고 있는 arguments

함수를 정의할 때 사용하고 있는 매개변수(parameter)

그리고 내부 변수를 (이름, 값) 쌍으로 관리하는 객체이다.

즉,

변수 스코프 객체는 해당 함수의 지역 변수를 관리하는 객체인 것이다.

파싱 단계와 실행 단계가 분리되어 있고

함수 단위의 렉시컬한 변수 스코프가 존재한다는 것에 주의해야 한다.

변수 스코프 체인

중첩 함수의 경우, 변수 스코프 객체 간에 부모, 자식 관계가 만들어진다.

var x = 1;
function outer( ){
     var y = 2;
     function inner( ){
          var z = 3;
          var a = x;
     }
}

inner 함수에서 a=x; 구문을 실행하기 위해 x를 찾기위한 여정이 시작된다.

우선적으로 lexical scope 즉 구문이 정의된 함수에서 x를 찾는다.( inner( ) function 에서 )

찾지 못하면, 자신의 부모 관계에 있는 함수의 영역으로 넘어가서 x를 찾는다. ( outer( ) function 에서 )

최종적으로는 전역 변수 중에서 x가 있는지 찾게 된다.

이 변수 스코프 간의 관계를 변수 스코프 체인(scope chain)이라고 한다.

정리하자면,

변수 검색이 가능한 영역은

변수가 정의된 함수의 변수 스코프와

부모 함수를 포함한 조상 함수의 변수 스코프인 것이다.

이에 따라 함수가 중첩된 모습 그대로 변수에 대한 접근 권한도 계층구조 그대로 형성된다.

루트 객체(최상위 부모 객체)

전역적인 실행 환경, 즉 함수의 영역이 아닌 어떤 함수에도 속하지 않는 최상위 영역에서

변수를 선언하거나 함수를 정의하면 그것들은 모두 루트 객체의 속성과 메소드로 추가된다.

전역적인 실행환경 영역에서는 변수에  var를 붙여서 정의하든 붙이지 않든

정의되는 객체는 전역 변수 스코프 객체라는 점에서 차이가 없다.

참고로 루트 객체에는 생성자가 없다.

#포스팅 내용은 황인균 님의 자바스크립트 객체지향 프로그래밍 이라는 책의 내용을 기반으로 작성되었습니다.

Chapter 4. 끝