본문 바로가기
front/javascript

[javascript] 자바스크립트의 Scope 정리

by 펭귄대장 2019. 11. 12.

[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

매우 좋은 블로그를 찾았다. 유레카..

반응형

댓글0