소년코딩

자바스크립트 스코프에 대한 이해1


프로그래밍 언어에서의 기본 중 하나는 변수에 값을 저장하고, 저장된 값을 가져다 쓰고 수정하는 기능이다.

이 기능은 프로그램에서 상태를 나타낼 수 있게 해주며, 만약 이 기능이 없다면 프로그램은 상당히 제한적이고 심심한 작업만 할 수 있을 것이다.

이러한 변수를 프로그램에 추가하면 다음과 같은 의문이 생긴다.

  • 변수는 어디에 저장되는가?
  • 필요할 때 프로그램은 어떻게 변수를 찾는가?

이러한 의문을 통해 알 수 있는 점은 특정 장소에 변수를 저장하고 나중에 그 변수를 찾는데는 잘 정의된 규칙이 필요하다는 점이다.

바로 이런 규칙을 "스코프(Scope)"라 한다.



var a = 2;

'var a = 2;'

자바스크립트 'var a = 2;'를 보면 하나의 구문으로 보인다.

그러나 자바스크립트 엔진은 두 개의 서로 다른 구문으로 본다.

하나는 컴파일러가 컴파일레이션 과정에서 처리할 구문이고, 다른 하나는 실행 과정에서 엔진이 처리할 구문이다.


 

자바스크립트에서 컴파일러가 할 첫 번째 일은 렉싱을 통해 구문을 토큰으로 쪼개는 것이다.

그 후 토큰을 파싱트리구조로 만든다.

변수를 위해 메모리를 할당하고 할당된 메모리를 a라 명명한 후 그 변수에 값 2를 넣는다.

좀더 자세히 알아보자.

 

1단계. 

컴파일러가  'var a'를 만나면 스코프에 변수 a가 특정한 스코프 컬렉션 안에 있는지 묻는다.

변수 a가 이미 있다면 컴파일러는 선언을 무시하고 지나가고, 그렇지 않으면 컴파일러는 새로운 변수 a를 스코프 컬렉션 내에 선언하라고 요청한다.

 

2단계.

그 후 컴파일러는 'a = 2;' 대입문을 처리하기 위해 나중에 엔진이 실행할 수 있는 코드를 생성한다.

엔진이 실행하는 코드는 먼저 스코프에 a라 부르는 변수가 현재 스코프 컬렉션 내에서 접근할 수 있는지 확인한다.

가능하다면 엔진은 변수 a를 사용하고, 아니라면 엔진은 다른 곳을 살핀다.

 

엔진이 마침내 변수를 찾으면 변수에 값 2를 넣고, 못 찾는다면 엔진은 에러가 발생했다고 알릴것이다.


 

정리

별개의 두 가지 동작을 취하여 변수 대입문을 처리한다.

 
첫째,  컴파일러가 변수를 선언한다.(현재 스코프에 미리 변수가 선언되지 않은 경우)
둘째,  엔진이 스코프에서 변수를 찾고, 변수가 있다면 값을 대입한다.


 

컴파일러

2단계에서 컴파일러가 생성한 코드를 실행할 때 엔진은 변수 a가 선언된 적 있는지 스코프에서 검색한다.

이때 엔진이 어떤 종류의 검색을 하느냐에 따라 검색 결과가 달라진다.

'var a' 경우에는 엔진은 변수 a를 찾기 위해 LHS 검색을 수행한다.

다른 종류의 검색은 RHS라 부른다.

 

L과 R은 각각 왼쪽 방향(Left-hand Side)과 오른쪽 방향(Right-hand Side)을 뜻한다.

LHS 검색은 변수가 대입 연산자의 왼졲에 있을 때 수행하고, 

RHS 검색은 변수가 대입 연산자의 오른쪽에 있을 때 수행한다.

 

좀 더 엄밀하게 살펴보자.

RHS 검색은 단순히 특정 변수의 값을 찾는 것과 다름 없다. 반면, 

LHS 검색은 값을 넣어야 하므로 변수 컨테이너 자체를 찾는다.

 

console.log( a )

a에 대한 참조는 RHS 참조다. 구문에서 a에 아무것도 대입하지 않기 때문이다.
 

a = 2;

a에 대한 참조는 LHS 참조다. 현재 a 값을 신경 쓸 필요 없이 '=2' 대입 연산을 수행할 대상 변수를 찾기 때문이다.

 

function foo(a) {
  console.log(a);   // 2
}

foo(2);

LHSRHS 참조를 모두 수행한다.

수행과정 을 살펴보자.

- 1단계.

마지막 줄에서 foo(...) 함수를 호출하는 데 RHS 참조를 사용한다.

즉 "가서 foo의 값을 찾아 내게 가져와라"라는 뜻이다.

여기서 (...)은 실행된다는 뜻이므로 foo는 함수여야 한다

- 2단계.

인수로 값 2를 함수 foo(...)에 넘겨줄 때 값 2를 매개변수 a에 대입하는 연산이 일어난다.

이 매개변수 a에 대한 대입 연산을 위해 LHS 검색이 수행된다.

- 3단계.

변수 a에 대한 RHS 참조 역시 수행되는데, 그 결과값은 console.log(...) 함수에 넘겨진다.

또 console.log(...)가 실행되려면 참조가 필요하다.

console 객체를 RHS 검색하여 log 메서드가 있는지 확인한다.



js2

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.

댓글 로드 중…

블로그 정보

소년코딩 - 소년코딩

소년코딩, 자바스크립트, C++, 물리, 게임 코딩 이야기

최근에 게시된 이야기