Scope, let/const/var의 차이점

Scope

---

Scope는 한글로 하면 '범위'이다. Javascript에서도 Scope는 이와 비슷한 의미를 가지고 있는데, 구체적으로는 '변수의 유효범위'를 의미한다. 즉, 변수와 변수의 값이 어디부터 어디까지 유효한지 판단하는 범위가 바로 Scope이다. 이해를 위해 바로 예제를 살펴보자.

 

아래 코드에서 노란색으로 표시된 부분이 Local Scope(지역 범위)이다. 여기서는 함수가 이 범위를 나누는 기준이 된다. 그리고 바깥쪽의 빨간색으로 표시된 부분이 Global Scope(전역 범위)이다. 전역 범위는 모든 것을 포함하는 최상단 범위이다. 이런 범위를 나누고나서 주의할 점은 안쪽에서 바깥쪽으로는 접근이 가능하지만, 바깥쪽에서는 안쪽으로 접근이 불가능하다는 것이다. 즉 여기서는 Local Scope는 Global Scope에 접근이 가능해 모든 변수나 값을 사용할 수 있지만, 반대로 Global Scope는 Local Scope에 포함된 변수나 값에 직접적으로 접근하지 못한다. 또한 함수 내부에서는 지역변수가 전역변수보다 더 우선한다.

 

따라서 greeting();은 Local Scope에서 실행되기 때문에 Global Scope의 say 변수, Local Scope의 name 변수에 모두 접근이 가능해 유효한 변수이기 때문에 의도했던  'Hello jooing'이 잘 출력된다. 하지만 Global Scope에서 실행되는 name;은  Local Scope에 있는 name 변수에 직접 접근할 수 없어 ReferenceError가 발생하게 된다. ReferenceError은 참조할 값을 찾지 못했을 때 발생하는 오류이다.

 

Function Scope, Block Scope

---

앞의 예제에서는 Scope를 함수 범위에 따라 Local, Global Scope로 구분했다. 이렇게 함수를 단위로 범위를 나누는 것이 Function Scope 이다. 하지만 범위를 나누는 기준은 함수만 있는 것이 아니다. 중괄호({ })를 기준으로도 범위를 나눌 수 있다. 이를 Block Scope 라고 한다. 참고로 Javascript은 Function Scope를 default로 한다.

 

✔️ Function Scope : 함수 단위 Scope

✔️ Block Scope : { } 단위 Scope

 

대표적으로 선언 키워드로 자주 사용하는 var이 Function Scope를 유효 범위로 한다. let이나 const는 Block Scope를 유효 범위로 한다. 다시 말해 var로 선언되면 함수를 단위로 유효하게 작동하며, let 혹은 const로 선언되면 { }를 기준으로 유효하게 작동하게 된다.

 

다음 코드에서는 i를 var로 선언했기 때문에 '함수' 안에서만 접근하면 i를 얼마든지 사용할 수 있다.

 

for(var i=0; i<3; i++){
	console.log(i);
}
console.log('final: ', i);    // 'final: 3'

 

여기서 i는 let으로 선언했기 때문에 { } 안에서만 사용이 가능하다. 따라서 for(){ }의 바깥쪽에 위치한 console.log('final: ', i)는 i에 접근할 수 없어 ReferenceError가 발생한다.

 

for(let i=0; i<3; i++){
	console.log(i);
}
console.log('final: ', i);    // ReferenceError

 

 

let, const, var 요약

---

위에서도 설명했듯이 let, const는 Block Scope, var은 Function Scope를 범위를 나누는 기준(유효 범위)으로 삼는다. 뿐만 아니라 이미 할당된 값을 재정의 할 수 있는지, 혹은 이미 선언된 변수를 재선언 할 수 있는 지에 따라서도 차이를 보인다. 추가적인 이야기로, 재선언은 보통 코드가 길어지면서 실수로 많이 저지르게 된다고 한다. let은 재선언이 불가능하기 때문에 이러한 실수를 방지해주기도 한다.

 

	let	const	var
유효범위	Block Scope	Block Scope	Function Scope
값 재정의	O	X	O
재선언	X	X	O

 

 

window

---

window는 Global Scope(전역 범위)를 대표하는 객체로, 전역 범위에서 사용 가능한 모든 key:value 쌍을 보관하고 있다.

 

console창에 window라고 쳐보면 오른쪽 그림과 같이 모든 전역 범위의 변수들을 key, value 쌍으로 확인해 볼 수 있다. 전역 범위에 너무 많은 변수를 선언하는 것은 권장하지 않는다. 그리고 let으로 선언된 경우에는 window에 저장되지 않지만, var로 선언된 경우에는 window에 저장이 된다.