[JavaScript] 자바스크립트 스코프

 

 

스코프란?

특정 장소에 변수를 저장하고 나중에 그 변수를 찾는 데에 필요한 규칙

 

💻 컴파일러 이론

 

자바스크립트 또한 컴파일러 언어로서, 

컴파일러언어의 처리과정 3단계인 컴파일레이션을 수행

 

💡 토크나이징/ 렉싱

문자열을 토큰으로 만드는 과정

 

var a =2; 👉

var, a = 2 ;

 

💡 파싱

토큰 배열을 문법 구조를 반영하여 👉 AST(추상 구문 트리)

 

var a = 2; 의 경우, 

변수 선언( : 최상위 노드) 에서 시작

확인자 : a

대입수식 : 2

 

💡 코드생성

AST를 기계어 집합으로 바꾸어 실행코드로 변경

---

💻 스코프 이해하기

 

💡 처리의 수행자

var a=2; 

 

• 엔진

컴파일레이션 전과정을 책임

• 컴파일러

파싱, 코드생성의 모든잡일

• 스코프

선언된 모든 확인자(변수) 검색 목록 작성 및 유지

엄경한 규칙을 강제하여 확인자의 적용 방식을 정함

 

💡 앞과 뒤

var a =2; 는 하나의 구문이지만,

 

• 하나는 컴파일레이션 과정에서 처리
• 하나는 실행과정에서 엔진이 처리

 

🔹 과정

 

컴파일러

렉싱 👉 토큰 👉 파싱 👉 트리구조

 

👉 코드생성과정

 

• var a 에서 스코프에게 a가 특정 스코프 컬렉션 안에 존재여부 확인

있으면 ? 무시하고 다음

없으면 ? 새로운 변수 스코프 컬렉션 내에 생성

 

• a =2 에서 엔진이 실행할 수 있는 코드 생성 , a 변수가 현재 스코프 컬렉션 내에서 접근 가능 여부 확인

가능 ? 사용

불가능 ? 다른곳 살핌.

 

💡 컴파일러체

 

엔진이 스코프에게 변수 검색을 할 때 두종류가 있습니다.

 

• LHS : 변수가 대입연산자 왼쪽에 있을 경우

값을 넣어야하므로, 변수 컨테이너 자체를 검색

• RHS : 변수가 대입 연산자의 왼편이 아닌 쪽에 있을 경우

단순 특정 변수값을 검색

 

function foo(a){
	console.log(a); // console 객체 RHS 참조, a RHS참조
}
foo(2); // RHS 참조, a=2 LHS참조

---

💻 중첩 스코프

 

하나의 블록이나 함수는 다른 블록이나 함수안에 중첩 가능

👉 스코프 또한 중첩 가능

 

• 엔진은 현재 스코프에서 검색 실패
• 한 단계씩 올라감
• 최상위 글로벌 스코프에 도달하면 무조건 검색을 멈춤. ( 검색 성공 여부와 상관❌)

---

💻 오류

 

LHS와 RHS의 차이는 변수가 아직 선언되지 않은 경우 다르게 동작

 

RHS는 변수 선언 전, 변수 검색이 일어나 검색 실패 👉 ReferenceError

function foo(a){
	console.log(a+b);
	b=a;
}
foo(2);

LHS는 strict mode가 아니라며, 검색 실패 👉 글로벌 스코프가 새로운 변수를 생성하여 넘겨줌.

+strict mode에서는 ReferenceError