스코프 - 2

 

스코프의 생성

먼저 for-loop 블록의 스코프 생성 여부를 알아보기 위해 다음소스를 확인해보자

자바스크립트로 숫자 0~9까지 더하여 총합이 16이 넘는 숫자를 구하고 싶다면 다음처럼 구현할 수 있다.

for(var i=0; i<10; i++) {
	var total = (total || 0) + i;
    var last = i;
    if(total > 16) {
    	break;
    }
}
console.log(typeof total !== "undefined");
console.log(typeof last !== "undefined");
console.log(typeof i !== "undefined");
console.log("total === " + total + " , last === " + last);

결과

(typeof total !== "undefined") === true

(typeof last !== "undefined") === true

(typeof i !== "undefined") === true

total === 21, last === 6

소스에서 8~10번 줄에 사용한 typeof 연산자는 식의 데이터 형식을 나타내는 문자열을 반환하고, "undefined"는 선언되지 않은 변수를 뜻한다.

자바스크립트는 다른 언어와는 달리 일반적인 블록 스코프를 따르지 않는다.

자바스크립트의 스코프는 특정 구문이 실행될 때 새로 생성하여 앞장과 같은 스코프 체인을 생성하게 된다.

 

스코프를 생성하는 구문들

• function
• with
• catch

자바스크립트에서 이들의 사용법은 각각 다르지만, 중요한 것은 이런 구문들이 사용될 때만 스코프가 생성되고, 다른 프로그래밍 언어처럼 {}를 이용해 블록을 생성한다고 해서 스코프가 생성되는 것이 아니라는 점이다.

 

function 구문의 스코프 생성

function foo() {
	var b = "Can you access me?";
}
console.log(typeof b === "undefined");

결과

(typeof b === "undefined") === true

앞에서 for-loop 소스는 블록 외부에서 내부에 있는 변수들에 접근할 수 있었지만, 위 소스에서는 foo()함수 외부에서 내부에 선언된 변수에 접근할 수 없다. 이것으로 function 구문을 통해서 스코프가 생성된다는 것을 알 수 있다.

 

catch 구문의 스코프 생성

with와 caatch 구문도 스코프를 생성하기는 하지만 function과는 다소 다른 동작을 보여준다. 이 두 구문은 괄호 안에 인자로 받는 변수들만 새로운 내부 스코프에 포함되어 그 다음으로 오는 블록 안에서만 접근할 수 있다. 반면 블록 안에서 새로 정의한 변수들은 for-loop와 비슷하게 블록 외부에서도 접근할 수 있다.

 

try {
	throw new exception("fake exception");
} catch(err) {
	var test = "can you see me";
    console.log(err instanceof ReferenceError === true);
}
console.log(test === "can you see me");
console.log(typeof err === "undefined");

(err instanceof ReferenceError) === true

(test === "can you see me") === true

(typeof err === "undefined") === true

여기서 독특한 점은 3번 줄에 catch 구문 내부의 파라미터로 넘겨지는 err 변수는 catch 블록 내부에서는 접근할 수 있지만, 외부에서는 접근할 수 없다. 그러나 4번 줄에 선언된 test 변수는 catch 블록 외부에서도 접근할 수 있다.

 

with 구문의 스코프 생성