13장 스코프

13.1 스코프란

스코프는 유효범위는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다.

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 : var 4 is not defined
console.log(var3); //ReferenceError : var 5 is not defined

변수는 자신이 선언된 위치에의해 유효 범위가 결정된다. 이를 즉 스코프라고한다.

var x = "global";

function foo() {
 var x = "local";
 console.log(x);
}

foo();

console.log(x);

같은변수 x라도 자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조해야될지를 결정한다.

파일이름이 같아도 폴더를 통해서 분류가 가능한것처럼 스코프도 같은 변수이름을 방지하여 같은 이름의 변수를 사용할수있게하는것이다. 즉, 스코프는 네임스페이스이다.

function foo() {
 var x = 1;
 var x = 2;// 변수가 재할당되는 부작용
 console.log(x); // 2
}

foo();

위의 var키워드는 같은 스코프에서 중복이가능해서 부작용이생긴다.

function foo() {
 let x = 1;
 let x = 2; // let이나 const키워드는 같은 스코프내에서 중복선언을 허용하지않는다.
 console.log(x); // 2  // syntaxError, x has already been declared
}

foo();

 

13.2 스코프의 종류

스코프는 크게 지역스코프와 전역스코프로 나뉜다.

13.2.1 전역과 전역 스코프

전역변수는 어디서든지 참조할 수 있다.

13.2.2 지역과 지역 스코프

지역변수는 자신의 지역스코프와 하위 지역 스코프에서 유효하다.

 

13.3 스코프체인

위의 스코프를 도식화한것이다.

상위스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조할수있지만 하위 스코프에서

유효한 변수를 상위 스코프에서 참조할 수 없다는것이다.

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

function foo() {
 console.log("global function foo");
}

function bar() {
 function foo() {
  console.log("local function foo")
 }
 foo();  1번
}

bar();

1번에서 foo 함수를 호출하면 자바스크립트는 함수를 가리키는 식별자 foo를 검색한다.

함수도 식별자이다. foo를 호출하면 자바스크립트 엔진은 함수를 호출하기 위해

먼저 함수를 가리키는 식별자 foo를 검색한다.

 

13.4 함수레벨 스코프

c나 자바 등을 비롯한 대부분의 프로그래밍 언어는 함수 몸체뿐만아니라 코드블록(if, for, while, try/catch) 등의 지역스코프를 만든다. 이러한 특성을 블록레벨 스코프라 한다.

하지만 var 키워드로 선언된 변수는 오로직 함수의 코드블록만을 지역스코프로 인정한다.

var i = 10

for(var i = 0; i<5; i++){
	console.log(i); // 0 1 2 3 4
}

console.log(i); // 5

var 키워드를 사용하면 블록레벨스코프를 지원하지않기때문에 전역 i 값이 재할당된다.

 

13.5 렉시컬 스코프

var x = 1;

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

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

foo();
bar();

함수를 어디에서 정의했는냐 따라서 상위 스코프를 결정한다는것이 렉시컬 스코프이다.

위의 bar 함수는 전역에서 정의된함수다. 함수선언문으로 정의된 bar 함수는 전역코드가 실행되기전에

먼저 평가되어 함수 객체를 생성한다.

이때 생성된 bar 함수 객체는 자신이 정의된 스코프 즉, 전역스코프를 기억한다.

bar 함수가 호출되면 호출된곳이 어디인지 관계없이 언제나 자신이 기억하고 있는 전역 스코프를 상위스코프로 사용한다.

 

필자는 이글을 보고 다시한번더 함수선언문시 함수가 호이스팅되어 먼저 함수객체 생성후 자신만의 스코프를 가지는 단계를 가진다는것을 기억해야한다는 생각이들었다.