[자바스크립트 필기] #8 - 스코프

 

*이 필기는 웹 프로그래밍 튜토리얼에서 보고 작성합니다. 

 

1. 스코프란?

우리는 이를 함수에서 경험하였는데 함수의 매개변수는 함수 몸체 내부에서만 사용할 수 있고 외부에서는 사용할 수 없다. 따라서 함수 매개변수의 스코프는 함수 몸체로 제한된 것이다. 

 

변수 이름을 비롯한 모든 식별자는 선언된 위치에 따라서 식별자를 참조할 수 있는 유효 범위가 결정되는데 이를 스코프라고 한다. 

 

2. 스코프의 종류 

구분	설명	스코프	변수
전역	코드의 가장 바깥 영역	전역 스코프	전역 변수
지역	함수 몸체 내부	지역 스코프	지역 변수

• 전역 변수는 어디서든지 참조할 수 있다.
• 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효하다.

 

3. 스코프 체인

함수는 중첩될 수 있으므로, 지역 스코프 또한 중첩될 수 있다. 따라서 스코프는 함수의 중첩에 의해 '계층적 구조'를 갖는다. 그리고 이러한 계층적 구조를 가진 스코프를 스코프 체인이라고 한다. 

 

변수를 참조할 때 이를 해석하는 엔진은 스코프 체인을 통해서 변수를 참조하는 코드에서 시작해서 바깥쪽으로 나가면서 선언된 변수를 찾는다. 

 

4. 함수 레벨 스코프 vs 블록 레벨 스코프

• 함수 레벨 스코프 : 함수에 의해서'만' 지역 스코프가 생성됨
• 블록 레벨 스코프 : 함수 몸체뿐만 아니라 모든 코드 블록(if, for, while, ...)이 지역 스코프를 만듦

*자바스크립트 var 키워드로 선언된 변수는 only 함수 레벨 스코프만 지원한다. *

*반면에 let, const 키워드는 블록 레벨 스코프를 지원한다.*

 

5. 동적 스코프 vs 렉시컬 스코프 

아래 코드에서 과연 어떤 결과가 나올지 조금만 생각해보자.

var x = 1;

function foo() {
    var x = 10;
    bar();
}

function bar() {
    console.log(x);
}

foo(); // ?
bar(); // ?

이 결과는 bar 함수의 상위 스코프가 뭔지에 따라 결정된다. 2가지 방법으로 결정된다고 한다.

• 함수를 어디서 '호출'했는지에 따라 상위 스코프 결정 -> 동적 스코프
• 함수를 어디서 '정의'했는지에 따라 상위 스코프 결정 -> 렉시컬 스코프

자바스크립트를 비롯한 대부분의 프로그래밍 언어는 렉시컬 스코프를 채택했다.

 

여기까지 입니다 - 틀린 점이 있다면 꼭 지적해주세요!