[자바스크립트 문법] 전역 스코프와 지역 스코프, 함수레벨 스코프와 블록레벨 스코프

전역 스코프(Global Scope)와 지역 스코프(Local Scope)

Global scope, 전역 스코프란 변수에 접근 또는 참조할 수 있는 범위가 전역적으로 정의된 것이다. 

Local scope, 지역 스코프란 변수에 접근 또는 참조할 수 있는 범위가 함수 내부에만 정의된 것이다.

전역 스코프의 변수는 지역 스코프에서 사용이 가능하나, 그 반대의 경우는 사용이 불가하다. 지역 스코프에서 선언된 변수는 해당 범위 안에서만 사용가능하다. 

 

지역 스코프의 종류 : 함수 레벨 스코프와 블록 레벨 스코프

함수 레벨 스코프란, 함수를 실행할 때 생겨나는 '지역 스코프'이다. 함수를 만들면, 함수마다 지역 스코프가 생겨나게 된다. 

var 키워드는 함수 레벨 스코프를 따른다. 블록 레벨 스코프를 따르지 않는다. 그래서 전역 스코프로 해당 변수가 들어가게 되어, 전역 변수를 남발하게 되고 이는 불필요한 메모리가 소모되곤 한다.

 아래 코드를 보자. 처음에 선언한 var 키워드의 변수가 반복문에서 0으로 재할당된다. 그래서 처음에 선언한 var i는 반복문 내의 i와 같은 값을 갖게 된다. 이렇게 var 키워드로 선언된 변수는 예측이 굉장히 어려워지면서 사용시 주의해야 한다. 혹시 var 키워드로 선언할 경우, scope 범위를 필수로 확인해야 한다.

var i = 99;

for(var i=0; i < 11; i = i+1) {
	console.log(i);
}

console.log(i);

 

블록 레벨 스코프는 if, for, while 등 {} 중괄호를 사용한 코드 블록에 의해서 생성되는 스코프이다. 대부분의 프로그래밍언어는 블록 레벨 스코프를 따른다. let과 const 키워드는 블록 레벨 스코프를 따르게 된다. 그래서 일반적으로 반복문 안에서는 let 키워드로 값을 초기화하는 것을 자주 볼 수 있다. 다음 코드 예시로 let 키워드의 블록 레벨 스코프를 알아보자.

for (let i = 0; i < 6; i++){
	let a = "123";
    if (i > 3) {
    	let a = "asd";
        console.log(a);
    }
    let b = "123";
}

 

- 위 코드는 2개의 블록 레벨 스코프가 존재한다. 바깥의 for문과 for문 내부의 if문의 스코프이다. for 블록 레벨 스코프와 if문 스코프는 서로 다른 영역이다. 그래서 각각의 스코프에서 선언된 변수 a는 영향을 주지 않는다. 그리고 '함수'도 코드 블록이기 때문에 함수의 스코프도 영향을 받는다.

 

스코프 체인 (scope chain)

자바스크립트는 변수를 참조할 때, 먼저 해당되는 블록 스코프 범위에서 변수를 참조하려고 시도한다. 이때, 해당 범위안에서 변수가 존재하지 않을 경우, 상위 스코프로 올라가 탐색을 진행하게 되는 과정을 '스코프 체인'(scope chain) 이라고 부른다. 다음은 스코프 체인의 이해를 돕기 위한 코드이다.

for (let i = 0; i < 6; i++){
	let a = "123";
    if (i > 3) {
        console.log(a);
    }
    let b = "123";
}

 

- if 문에서 콘솔출력하는 a 값은 123으로 나오게 된다. 이는 스코프 체인(scope chain)때문이다. if문에서 생성된 블록 스코프 내에 a변수가 없어서 상위 스코프인 for문에서 변수 a를 찾았기 때문에, 에러를 발생하지 않았다.