스코프

13장 스코프

13.1 스코프란?

• 스코프는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다.
• 함수의 매개변수는 함수 몸체 내부에서만 참조할 수 있다.

function add(x,y){
	//매개변수는 함수 몸체 내부에서만 참조할 수 있다.
  	//즉, 매개변수의 스코스(유효범위)는 함수 몸체 내부다.
  	console.log(x,y); // 2 5
  	return x + y;
}

	//매개변수는 함수 몸체 내부에서만 참조할 수 있다.
console.log(x,y); // ReferenceError: x is not defined

var var1 = 1; // 코드의 가장 바깥 영역에서 선언한 변수

if(true){
	var var2 = 2; // 코드 블록 내에서 선언한 변수
  	if(true){
    	var var3 = 3; // 중첩된 코드 블록 내에서 선언한 변수
    }
}

function foo(){
	var var4 = 4; // 함수 내에서 선언한 변수
  	function bar(){
    	var var5 = 5; // 중첩된 함수 내에서 선언한 변수
    }
}

console.log(var1); // 1
console.log(var2); // 2
console.log(var3); // 3
console.log(var4); // ReferenceError: var4 is not defined
console.log(var5); // ReferenceError: var5 is not defined

• 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정되는데, 이를 스코프라 한다. 즉, 스코프는 유효한 범위를 말한다.

13.2 스코프의 종류

• 코드는 전역과 지역으로 구분할 수 있다.

전역과 전역 스코프

• 전역에 변수를 선언하면 전역 스코프를 갖는 전역 변수가 된다. 전역 변수는 어디서든지 참조할 수 있다.

지역과 지역 스코프

• 지역에 변수를 선언하면 지역 스코프를 갖는 지역 변수가 된다.
• 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효하다.

13.3 스코프 체인

• 함수 몸체 내부에서 정의한 함수를 '중첩 함수', 중첩 함수를 포함하는 함수를 '외부 함수'라고 한다.
• 스코프가 계층적으로 연결된 것을 스코프 체인이라고 한다.
• 변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다.

스코프 체인에 의한 변수 검색

• 스코프 체인을 따라 변수를 참조하는 코드의 스코프에서 시작해서 상위 스코프방향으로 이동하며 선언된 변수를 검색한다.
• 상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조할 수 있지만 하위 스코프에서 유효한 변수를 상위 스코프에서 참조할 수 없다.

스코프 체인에 의한 함수 검색

// 전역 함수
function foo(){
	console.log('global function foo')
}

function bar(){
	//중첩 함수
  	function foo(){
    	console.log('local function foo')
    }
  foo(); // local function foo
}

bar();

13.4 함수 레벨 스코프

• 코드 블록이 아닌 함수에 의해서만 지역 스코프가 생성된다.
• if, for, while, try, catch 등이 지역 스코프를 만드는데, 이러한 특성을 블록 레벨 스코프라 한다.
• var 키워드로 선언된 변수는 오로지 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정하는데, 이러한 특성을 함수 레벨 스코프라 한다.

var x = 1;

if(true){
	//var 키워드로 선언된 변수는 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정한다.
  	//함수 밖에서 var 키워드로 선언된 변수는 코드 블록 내에서 선언되었다 할지라도 모두 전역 변수다.
  	//따라서 x는 전역 변수로, x 변수는 중복 선언된다.
  	//이는 의도치 않게 변수 값이 변경되는 부작용을 발생시킨다.
  var x = 10;
}

console.log(x); // 10

13.5 렉시컬 스코프

var x = 1;

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

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

foo(); // 1
bar(); // 1

• 실행 결과는 bar함수의 상위 스코프가 무엇인지에 따라 두 가지 패턴을 예측할 수 있다.

1. 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정한다.
2. 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정한다.

첫번째 방식을 동적 스코프라하고, 두번째 방식을 렉시컬 스코프 또는 정적 스코프라 한다.

• 자바스크립트는 렉시컬 스코프를 따르기 때문에, 함수가 호출된 위치는 상위 스코퍼 결정에 어떠한 영향도 주지 않는다.
• 위 예제의 경우 bar함수가 호출되면 호출된 곳이 어디인지 관계없이 언제나 자신이 기억하고 있는 전역 스코프를 상위 스코프로 사용한다. 따라서 전역 변수 x의 값 1을 두 번 출력한다.