[추상화] 11.변수의 scope

스코프는 한국말로 범위, 영역이라는 뜻입니다.

변수를 만들고 값을 할당하면 어디서든 그 변수 이름으로 할당된 값을 가져올 수 있는데, 사실 변수에는 유효한 범위가 있어서 그 범위를 벗어나게 되면 오류가 발생합니다. 

// Scope:범위, 영역
console.log(x);

Uncaught ReferenceError : x is not defined at index.js:2 이 오류는 x라는 변수를 선언하지 않았기 때문이지만

상황에 따라서는 변수를 선언했는데도 이런 오류를 만나게 되는 경우가 있습니다. 

지금부터 변수가 선언되면 어디까지 유효한지 즉 변수의 유효범위에 대해 알아보겠습니다.

// Scope: 범위, 영역
let x = 3;
console.log(x);

x에 3이라는 값을 할당해주면 코드를 실행했을 때 3이 잘 출력되는 것을 확인할 수 있습니다. 

// Scope: 범위, 영역
function myFunction(){ // 블록문 (Block Statement)
	let x = 3; // 로컬 변수, 지역 변수 (Local Variable)
	console.log(x); // 3
}
myFunction()
console.log(x); // error

8번 줄에서 Uncaught ReferenceError 에러가 나는 이유는 Javascript에서는 이렇게 중괄호로 감싼 코드를 블록문, 영어로는 Block Staqtement라고 부릅니다. 

블록문 안에서 선언된 변수들을 '로컬 변수' 혹은 '지역 변수'라고 부르는데 이 로컬 변수는 블록문 내에서만 사용할 수 있는 변수입니다. 변수 x의 스코프 그러니까 변수 x가 유효한 범위는 myFunction 안에서만 유효하다는 것입니다.

8번 줄에서 사용한 변수 x는 변수 x가 유효하지 않은 곳에서 사용한 것이기 때문에 정의되지 않았다는 오류가 발생하는 것입니다.

// Scope: 범위, 영역
let x = 3; // 글로벌 변수, 전역 변수 (Global Variable)
function myFunction(){ // 블록문 (Block Statement)
	console.log(x); // 3
}
myFunction()
console.log(x); // 3

변수 x를 함수 밖으로 가져올 경우 두 가지 다 3이 출력된 것을 확인할 수 있습니다. 결과에서도 알 수 있듯이 myFunction 안에서 사용한 이 x는 2번 줄에서 선언한 변수 x입니다. 

로컬 변수와는 반대로 이렇게 블록문 밖에서 선언한 변수는 블록문 안에서도 사용할 수 있습니다.

이런 변수를 글로벌 변수 혹은 전역 변수라고 부릅니다. 글로벌 변수는 이름에서도 느낄 수 있듯이 코드를 작성할 수 있는 이 파일 전체에서 어느 곳에서나  사용할 수 있습니다. 그래서 두가지 경우 같은 x를 사용해도 둘 다 3 이 출력되는 것을 확인할 수 있습니다.

// Scope: 범위, 영역
let x = 3; // 글로벌 변수, 전역 변수 (Global Variable)
function myFunction(){ // 블록문 (Block Statement)
	let x = 5;
	console.log(x); // 5
}
myFunction()
console.log(x); // 3

그런데 myFunction 내부에서 똑같은 이름의 로컬 변수를 선언하면 5와 3이 출력된 것을 확인할 수 있습니다. 

코드를 순서대로 살펴보면 2번 줄에서 글로벌 변수 x를 선언하고 그 뒤로 myFunction 함수도 선언을 한 다음 9번 줄에서 함수를 호출하게 됩니다. 그렇게 되면 함수 내부에 있는 5번 줄이 실행이 됩니다. 여기서 로컬변수 x를 또 선언하게 됩니다. 그렇게 되면 자연스럽게 6번 줄에서 사용하는 x는 로컬 변수 x를 사용하게 됩니다.

블록문 내에서 변수를 사용하게 되면 가장 먼저 로컬 변수가 있는지 확인한 다음 없을 경우네는 글로벌 변수를 확인합니다. 그러고 나면 함수 실행은 종료되고 10번줄은 x가 중괄호로 감싸진 블록문 바깥에 있기 때문에 myFunction 안에 있는 로컬 변수 x의 영역에서는 벗어났다고 볼 수 있습니다. 그렇기 때문에 자연스럽게 2번 줄에서 선언한 글로벌 변수 x가 사용이 되면서 콘솔에는 3이 출력이 됩니다. 

 

정리하면 모든 변수에는 스코프, 즉 변수의 유효범위가 있는데 크게 로컬 변수와 글로벌 변수로 나눌 수 있고 이 둘을 나누는 기준은 중괄호로 감싸진 블록문입니다. 로컬변수는 블록문 내에서만 유효한 범위를 갖고 있고 글로벌 변수는 어디에서나 유효한 범위를 가지고 있는데 블록문 내에서 변수를 사용하려고 하면 로컬 변수를 먼저 찾아서 사용하고 없을 경우에는 글로벌 변수를 글로벌 변수도 없다면 오류가 생깁니다.