[이론]js 개발자라면 알아야하는 핵심 컨셉 33개 #6.Scope

잠시 이전의 포스팅들을 살펴보자.

#1.Call Stack

#2.Primitive Types

#3.Value Types and Reference Types

#4.Type Coercion

#5.Typeof

초반 부분에서는 변수들의 특성에 대해 나열하려 하는 듯하다.

js 개발자라면 알아야 하는 핵심 컨셉 6번째는 scope이다.

scope를 번역하면 '유효범위'가 된다. 선언된 변수들의 유효 범위를 뜻한다.

Scope

위의 코드에서 얻어갈 부분이 많다.

if문 내부에서 var, let, const 세 가지 변수가 선언되었으나

var로 선언된 변수만 정상적으로 동작한다.

이유는 var는 Functional Scope이고, let과 const는 Block Scope이기 때문이다.

 

Block Scope는 기본 단위가 Block이다. 흔히 우리가 처음 접하는 C나 Java와 같은 언어의 변수가 이와 같은 scope를 적용한다.

if문과 같은 Block안에서 선언된 변수는 하위 Block에서는 유효하게 동작하지만 상위 블록에서는 유효하지 않다.

그렇기 때문에 if문을 벗어났을 때에 위와 같이 오류가 발생한 것이다.

 

이와 비교하여 Functional Scope는 기본 단위가 함수이다.

따라서 Block의 내/외부에 위치하는 것과는 관계없이, 하나의 함수 안에서 선언된 변수는 해당 함수 내부에서

전역으로 취급되는 것이다. Functional Scope 또한 상위 Function에서 하위 Function에 선언된 변수에 접근할 수 없음은 동일하다.

Functional Scope

ES5까지는 변수를 사용할 수 있는 유일한 방법이 var를 사용하는 것이었으나,

ES6로 넘어가면서 let과 const가 추가되어 block scope 형식을 따를 수 있게 되었다.

많은 문서들에서 가급적 var보다는 let/const를 사용할 것을 권하고 있으니, 웬만하면 var 사용은 자제하도록 하자.

 

Scope에 관해서는 할 이야기가 조금 더 많은데, 나중에 좀 더 깊게 JS에 포스팅을 할 때에 서술하도록 하겠다.

 

출처 : github js-33concepts, Nomad Coders