[scope란?]
참조대상 식별자를 찾아내기 위한 규칙.
특정 변수가 선언되어 있을 때, 해당 변수를 소스 내 어디에서 찾아서 사용할 지를 규정하는 규칙.
[전역스코프 vs 지역스코프]
전역스코프 : 코드 내 모든 곳에서 참조 가능.
지역스코프 : 함수 코드 블록 내에서 만들어진 스코프로 함수 자기 자신과 하위 함수에서만 참조 할 수 있다.
※ 최상위 스코프는 window
[블록레벨스코프 vs 함수레벨스코프]
블록레벨스코프 block-level scope : if문, for문 과 같은 블록 내에 선언된 변수는 블록 밖에서는 참조가 불가하다. (대부분의 C언어, 자바언어)
함수레벨스코프 function-level-scope : 함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 참조가 가능하다. (ECMAScript 6 부터 도입된 let 키워드 사용시 블록 레벨 스코프 사용 가능)
1
2
3
4
5
6
|
function sample(){
if(true) {
var tt = 1;
}
console.log(tt);
}
|
cs |
>> javascript 는 함수레벨 스코프이므로, 함수 블록 내에서 선언된 변수는 함수 블록 내에서 참조가 가능. 싱기방기
1
2
3
4
5
6
|
function sample(){
if(true) {
let tt = 1;
}
console.log(tt);
}
|
cs |
>> 블록레벨스코프 변수 let 을 사용했으므로 5번라인에서 tt 사용시 에러를 뱉음(java 및 기타 C계열언어와 같이 동작)
[동적스코프 vs 렉시컬스코프]
동적스코프 dynamic scope : 호출 시점에 따라 상위 스코프 결정
렉시컬스코프 lexical scope : 함수 선언 위치에 따라 상위 스코프 결정 (js 를 포함한 대부분의 언어가 해당 스코프를 따름)
1
2
3
4
5
6
7
8
9
10
|
var x = 1;
function foo() {
var x = 10;
bar();
}
function bar() {
console.log(x);
}
foo(); // ?
bar(); // ?
|
cs |
위와 같을 때, 결과는 1출력.
>> javascript 는 렉시컬 스코프를 따르므로 bar가 선언된 위치에 따라 상위 스코프가 결정되며, bar 내의 x 는 bar 의 상위 스코프 내에서 찾게된 전역 변수 x = 1 을 사용
※ 동적스코프 : bar의 상위 스코프는 함수 foo와 전역, 결과 10 출력
※ 렉시컬스코프 : bar의 상위 스코프는 전역, 결과 1 출력
추가 예)
window.location.protocol 은 현재 페이지의 protocol (http: or https:) 을 뽑아낼 때 사용가능한 내장함수.
window 를 빼고, location.protocol 까지만 써줘도 window.location.protocol 을 가져올 수 있다.
스코프를 상위로 옮겨가며 탐색하다 계속 찾지 못한다면 window 까지 올라가서 찾아오기 때문.
그렇다면 protocol만 써줄 경우 이 케이스는 왜 못찾고 에러를 뱉는가?
> protocol은 window가 아닌 window.location 내에 존재.
> 현재 스코프 내에서 protocol 을 찾지 못한다면 상위 스코프에서 찾기 시작하고 결론적으론 window 까지 올라가서 찾게 될 뿐 window.location 내에서 찾진 않기 때문.
참고 : https://poiemaweb.com/js-scope
매우 좋은 블로그를 찾았다. 유레카..
'front > javascript' 카테고리의 다른 글
[javascript] strict mode(엄격모드) 란? (0) | 2019.11.15 |
---|---|
[javascript] 자바스크립트 this 정리 (0) | 2019.11.15 |
[javascript] 호이스팅(hoisting)이란? (0) | 2019.11.11 |
[javascript] typeof (0) | 2019.11.11 |
[javascript] 함수의 특징 (1급 객체) (0) | 2019.11.09 |