[JavaScript] 스코프(Scope)

스코프(Scope)란?

영어사전 상 범위, 영역 이라는 뜻이다.

 

함수에서 스코프는 어떤 범위의 변수들에 접근할 수 있는지를 나타내는데,

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

 

1. 전역 스코프

C를 공부해 본 사람들이면 전역변수, 지역변수로 익히 들어왔을 것이다. 이와 비슷한 맥락이다.

전역 스코프는 전 범위에 정의된 변수이다. 

예를 들어보자.

 

var gScope = 'newscope';
function inScope() {
	alert(gScope);
}
inScope();	//newscope

위의 변수 gScope는 전역변수이다. 전 영역에서 gScope를 호출할 수 있는 것이다.

때문에 inScope에서도 gScope는 호출 가능하다.

따라서 결과는 newscope가 되는 것이다.

 

2. 함수 스코프

함수 스코프는 특정 함수에서 호출된 변수는 해당 함수에서만 이용할 수 있다는 것이다.

예를 살펴보면,

function inScope () {
	var innerScope = 'innerthing';
    return innerScope;
}

function inScope2 () {
	return innerScope;
}
console.log(inScope());		//innerthing
console.log(inScope2());	//Uncaught ReferenceError: innerScope is not defined at inScope2

var innerScope = 'outerthing';

function inScope () {
    return innerScope;
}

function inScope2 () {
    var innerScope = 'innerthing2';
	return innerScope;
}
console.log(inScope());		//outerthing
console.log(inScope2());	//innerthing2

위의 박스는 inScope 함수 스코프에 innerScope라는 변수를 선언하였다. 

그때문에 아래의 함수 inScope2에서 innerScope 변수를 호출할 수 없었다.

 

그러나 아래 박스는 전역 스코프에 innerScope 라는 변수를 선언하였기 때문에

그 이후에 모드 함수 스코프에서 innerScope 변수 선언이 가능하다.

 

3. 결론

전역변수는 사용하지 않는걸 추천하곤 한다. 

var로 선언한 전역 변수는 어떤 함수에서 어떻게 새로 할당될지 모르기 때문이다.

또한, 변수를 const나 let으로 선언하였다면, 같은 이름의 함수를 이용할 수 없기 때문이다.

때문에 특정 함수 안에 각각의 변수를 선언하는 방법을 추천한다.

 

변수 선언 방식의 차이점은 다음 포스팅을 참고하세요.

https://jae04099.tistory.com/4

var, let, const 차이점

출처: Hyeokwoo Alex Kwon님 블로그 https://medium.com/@khwsc1/%EB%B2%88%EC%97%AD-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8A%A4%EC%BD%94%ED%94%84%EC%99%80-%ED%81%B4%EB%A1%9C%EC%A0%80-javascript-scope-and-closures-8d402c976d19
제로초님 블로그 https://www.zerocho.com/category/JavaScript/post/5740531574288ebc5f2ba97e
생활코딩 유효범위 https://opentutorials.org/course/743/6495