1. 스코프 목적, 스코프 설정
목적
1.
범위를 제한하여 식별자를 해결하려는 것(Identifier Resolution)
2.
스코프내에서 식별자를 해결하기 위해서.
식별자 해결(Identifier Resolution)
변수 이름, 함수 이름을 찾는 것으로 이 때 스코프를 사용합니다. 스코프내에서 이름을 찾게 되면 값을 구할수 있으며
식별자 해결의 궁극적인 목적은 결국 식별자를 통해 이름을 찾아 값을 구하는 것입니다. 그리고 크게는 이름을 설정하는것도 식별자 해결이라 할 수 있습니다. 왜냐면 변수 이름을 스코프에 등록한다는것은 다음에 사용하려는 목적과 식별자를 찾을 때 사용하는 등록과 검색이라는 두가지 목적을 가지는데 이 두 목적을 식별자 해결(Identifier Resolution)이라 합니다.
결국, 스코프는 식별자 해결을 위해 있는것입니다.
스코프 설정
1.
엔진이 function book(){}을 만나면 function 오브젝트를 생성 후
2.
스코프를 설정합니다.
•
생성한 function 오브젝트의
•
[[Scope]]에 스코프를 설정합니다.
•
즉, 이때 스코프가 결정됩니다.
3.
이렇게 function 오브젝트를 만드는 시점에 스코프를 결정하는 것을 정적 스코프라고 합니다.
4.
함수를 호출 할 때 스코프를 결정하는 것을 동적 스코프라 합니다.
function book(){
var point = 123;
function get(){
console.log(point);
};
get();
};
book()
JavaScript
복사
스코프 설정 정리
function 오브젝트를 만날 때 스코프가 결정이 된다는 말은 book()함수가 호출되고 위에서부터 함수선언문 → 변수 초기화 → 코드 실행의 함수 코드 해석 순서를 가지게 되는데, 이 때 get function을 만나는순간 function 오브젝트가 생성되며 스코프가 결정됩니다. 이때 이 function의 스코프에는
point 가 포함이 되겠죠. 그렇기에 get function 내부에서 point가 스코프 범위내에 있기 때문에 사용을 할 수 있는것입니다.
동적 스코프에서 함수를 1만번 호출한다면?
스코프는 호출 할 때마다 만들어지기에 1만번 스코프가 생성됩니다.
반면, 정적 스코프에서는 function 오브젝트를 생성할 때 한번만 만들면되기 때문에 1번만 생성되면 됩니다.
그렇기에, function 오브젝트를 만나는 순간 스코프를 결정하는것이 좋습니다.
2. Global 오브젝트, 글로벌 오브젝트 특징
Global 오브젝트
•
var value = 100;
◦
100을 value 변수에 할당한 것은 value로 검색하여(IR) 값을 사용하기 위함입니다.
근데, 코드를 보면 value는 함수 밖에 있습니다.
함수 안에 변수를 선언하게 되면 변수는 함수에 속하게 되지만, value처럼 속하는 오브젝트가 없을 경우 글로벌 오브젝트에 설정됩니다.
이런 식의 사용이 가능한 이유는 글로벌 오브젝트가 모든 스크립트 요소를 통틀어 하나만 있기 때문입니다.
var value = 100;
function book(){
var point = 200;
return value;
};
book();
JavaScript
복사
특징
•
JS 소스파일 전체에서 글로벌 오브젝트는 하나만 있습니다.
◦
전체 기준: <script>에 작성된 모든 코드
•
new 연산자로 인스턴스 생성이 불가능합니다.
•
def.js 파일의 코드에서 글로벌 오브젝트에 작성된 변수 value값과 book()함수 호출이 모두 정상적으로 동작합니다.
<script src="./abc.js">
var value = 100;
function book(){
return value + 50;
};
JavaScript
복사
<script src="./def.js">
console.log(value);//100
console.log(book());//150
JavaScript
복사
3. Global 스코프
글로벌 스코프
•
글로블 오브젝트가 글로벌 스코프
•
오브젝트는 개발자 관점으로 오브젝트에 함수와 변수를 작성합니다.
⇒ 함수와 변수를 작성하기위해서는 오브젝트가 필요한데 글로벌 오브젝트는 오브젝트가 없습니다. 그렇지만, window 오브젝트를 global 오브젝트로 사용하기는 합니다. 그래서 함수와 변수를 작성하면, 글로벌 오브젝트 개념으로 window 오브젝트에 설정됩니다.
•
스코프는 식별자 해결을 위한 것으로 엔진 처리 관점입니다. 즉, 엔진이 식별자 해결을 위해서 스코프를 사용한다는 것입니다.
•
글로벌 스코프는 최상위 스코프로 함수에서 최종 스코프가 됩니다.
⇒ 함수안에 A함수가 있고 그 안에 B가있고 그 안에 C함수가 있다고 할 때 C함수에서 변수를 식별자해결을 하려 할 때 해당 스코프에 잆을 경우 상위 스코프인 B함수의 스코프, A함수의 스코프 그리고 여기에도 없으면 최종적으로 글로벌 오브젝트의 스코프에서 식별자해결을 시도합니다.
•
function book(){코드}::글로벌 함수
◦
book함수가 속한 오브젝트가 없기에 book 함수는 글로벌 오브젝트에 설정됩니다.
•
var value = 100;::글로벌 변수
◦
value 변수가 글로벌 오브젝트에 설정됩니다.
•
글로벌 오브젝트에 설정된다는 것은 오브젝트 관점입니다.
•
스코프와 식별자 해결 관점은 Scope가 글로벌 스코프라는 것입니다.
•
book();
◦
book 함수를 호출하려면 "오브젝트.book()"형태가 되야하는데, 오브젝트를 작성하지 않고 함수만 작성합니다.
•
이렇게 오브젝트를 작성하지 않을 경우 글로벌 오브젝트를 "오브젝트"로 간주해 글로벌 오브젝트의 book()함수를 호출합니다.
•
즉, 글로벌 스코프에서 book을 찾아 호출합니다.
var value = 100;
function book(){
return value;
};
book()
JavaScript
복사
