[공부했던 것 정리] Scope(1)

공부하면서 헷갈렸던 개념인 scope에 대해 정리하겠다.  

 

우선 scope에 대해 알아보자. 

Scope = 변수를 사용할 수 있는 유효범위를 의미한다.  그리고 그 범위는 중괄호({ })를 통해 구분한다. 

 

좀 더 구체적으로 다음과 같은 기준으로 scope를 구분할 수 있다. 

 

(1) Global Scope와 local Scope

Local Scope : 함수 안의 범위.

Global Scope : 함수를 포함한 모든 범위.

 

함수 안쪽 범위를 Local(지역) scope라  부르고,

함수를 포함한 범위 전체를 Global(전역) scope 라고 한다.

 

위 그림처럼 함수를 선언했을 때 local scope 가 생기는 이유는 

Javascript는 함수를 선언했을 때, 그 함수가 자기만의 scope를 갖도록 설계되어 있기 때문이다. 

 

 

그럼 변수를 활용해서 위 범위에 대해 좀 더 깊게 알아보자.

 

전역 범위에 iHaveTicket 이라는 변수를 정의했다.

그리고 이 변수를 함수 F1에서 사용했다. 

그렇다면 함수 F1( )을 호출했을 때 iHaveTicket에 할당된 'Go with me'는 console창에 뜨게 될까?

 

F1( ); // 'f1 가보고 싶다' 'Go with me'

뜬다. 

그 이유는 전역범위(Global Scope)에 정의된 변수는 어디서든 사용(=접근)할 수 있다. 그게 함수 안이 되었든,

if문, for문과 같은 새로운 block(중괄호, { })이 되었든 자유롭게 사용가능하다. 

 

 

그럼 전역 범위가 아닌 함수 안(local Scope)에 정의된 meToo는 전역 범위에서 호출하면 할당된 'I wanna go'가 뜰까?

 

 

전역범위에서는 지역범위에 정의된 변수에 접근할 수 없다. 

안 뜬다. 

그 이유는 전역범위가 아닌 함수 안 local Scope에서 선언된 변수는 전역범위에서 사용이 불가능하다. 오직 그 변수가 선언된 함수 안에서만 사용할 수 있다. 

 

정리하자면, 

 - local Scope에서 바깥 변수/함수를 접근하는 것은 가능.

 - Global Scope에서 안쪽 변수/함수를 접근하는 것은 불가능. 

 

 

또 다음과 같은 경우도 살펴보자. 

iHaveTicket 이란 변수를 전역범위에 선언하고,  함수 안 지역범위 안에도 재정의 하였다. 그럼 함수 F1을 호출했을 때, 어떤 iHaveTicket이 뜰까? 

 F1( ) ; // 'Damn, I lost it'

지역범위 안의 iHaveTicket이 뜨게 된다. 

 

그 이유는 같은 변수이름일 때 전역범위에 선언된 변수라 할지라도

지역범위(함수 안)에 같은 변수이름이 재정의가 되어있으면, 재정의된 변수가 우선권을 갖기 때문이다. 

즉, 함수안에서 console.log로 iHaveTicket을 찾을 때, 컴퓨터는 우선 F1이라는 함수안에 iHaveTicket이 있는지 찾아보고 있으면 그 변수를 호출한다. 없으면 전역범위에서 찾는 것이다. 

 

 

(2) function Scope와 block Scope

이번 글에서 쓴, Global Scope와 Local Scope를 나누는 기준에서는 좀 포괄적으로 함수 범위와 그 이외의 모든 범위를 비교하는 정리를 하였다. 

다음 글에는 function scope와 block Scope를 나누는 기준을 살펴보겠다. 이 기준은 function scope와 중괄호 { } 부분(block scope, // 함수이외에 for문, if문의 block)을 모두 고려하여 구분하는 비교이다. 여기서는 let, var, const 라는 변수를 정의할 때 쓰이는 타입과 같이 정리를 해볼 것이다. 

 

 

 

보시다가 틀린 거 있으면 말해주세요!!