<div id="readability-page-1" class="page"><div>
 <article id="post-js-scope" itemscope="" itemprop="blogPost">
 <div>
 
 <header>
 
 
 
 

 </header>
 
 
 
 
 
 <div itemprop="articleBody">
 

 

 

 <img src="https://user-images.githubusercontent.com/33862991/129536148-6db4b134-205e-429c-a595-b0a754d766b0.jpg" alt="James Orr From Unsplash">
<h3 id="ToC"><a href="#ToC" title="ToC"></a>ToC</h3><ul>
<li><a href="#variable-scope">전역 변수와 지역 변수</a></li>
<li><a href="#scope-chain">스코프와 스코프 체인</a></li>
<li><a href="#lexical-scope">렉시컬 스코프</a></li>
</ul>
<hr>
<h2 id="전역-변수와-지역-변수"><a href="#전역-변수와-지역-변수" title="전역 변수와 지역 변수"></a><a name="variable-scope">전역 변수와 지역 변수</a></h2>전역변수(Global Variable)과 지역변수(Local Variable)의 차이는 변수가 선언된 블록 내에서만 사용하느냐 아니면 어디서나 사용가능하느냐의 차이이다.
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 </pre></td><td><pre>let globalVar = "Hello Global"; function myFunc() { let localVar = "Hello local"; } myFunc(); </pre></td></tr></tbody></table></figure>

위의 코드를 보며 정리해보자.
<code>globalVar</code>은 스코프가 전역으로 선언된 변수이다. 반면 <code>localVar</code>은 함수 <code>myFunc()</code>에서 선언되서 해당 함수내에서만 사용할 수 있는 변수이다.
스코프가 전역으로 변수가 선언되었다는 이야기는 어디서나 변수를 호출할 수 있다는걸 의미한다. 자주 사용되거나 공통적으로 사용되는 변수가 아니라면 굳이 전역변수를 선언하기보다는 지역 변수를 사용하는 것이 더 좋을듯하다.
어디서나 접근되고 호출할 수 있다는 점은 편의성 측면에서 장점같지만 반대로 원하지않는 변수가 언제 어디서나 값이 재할당될수도 있으므로 위험성도 갖기 때문이다.
 

<h2 id="스코프와-스코프-체인"><a href="#스코프와-스코프-체인" title="스코프와 스코프 체인"></a><a name="scope-chain">스코프와 스코프 체인</a></h2>스코프(Scope)는 위에서 설명했듯 변수또는 함수등 식별자에 대한 유효범위를 의미한다.
스코프 체인이란 변수를 찾기위해 스코프를 안에서 바깥쪽으로 탐색하는 과정을 의미한다.
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 </pre></td><td><pre>let globalVar = "Hello World"; function myFunc() { let localVar = "Hello JavaScript"; alert(globalVar); } myFunc(); </pre></td></tr></tbody></table></figure>

위의 코드를 살펴보자.
첫번째 줄 코드에서 전역변수를 선언했고, 두번째줄에는 변수를 인자로 받아서 <code>alert()</code>하는 함수를 선언했다. 마지막 줄에는 이 함수를 호출함으로써 브라우저에서 변수를 출력하도록 하였다.
<code>myFunc()</code>가 호출되면서 <code>alert(globalVar)</code>가 실행되는데 이 때 자바스크립트는 먼저 가장 가까운 스코프에서부터 변수를 찾게된다.
<img src="https://user-images.githubusercontent.com/33862991/129526351-02b46cb3-3b5d-44c5-a8b3-44be58ecd764.png">
<code>globalVar</code>를 호출한 <code>alert()</code> 함수가 선언되어 있는 스코프인 myFunc()에서 먼저 <code>globalVar</code>를 찾고 여기서 못찾으면,
<img src="https://user-images.githubusercontent.com/33862991/129526357-ec292de3-05bc-454c-8831-d4f59b5eb7b1.png">
이렇게 상위 스코프로 올라가서 전역 스코프에서 <code>globalVar</code>를 찾는다.
이렇게 식별자를 찾기위해 스코프를 안에서 바깥쪽으로 단계적으로 탐색하는 과정을 스코프 체이닝이라 한다.
반면 반대로 아래와 같은 경우는 스코프 탐색이 불가능하다.
<img src="https://user-images.githubusercontent.com/33862991/129528015-c97fbffb-8153-4bb6-b693-f57543c6496a.png">
마지막줄 코드에서 <code>localVar</code> 를 브라우저 경고창으로 띄우는 코드인데, alert()가 선언된 스코프에서 찾았지만, 해당 스코프에서는 localVar를 찾을 수 없었을것이다. 
<code>myFunc()</code>안에 <code>localVar</code>이 선언되어 있음에도 이를 찾지못한건 스코프체인은 안에서 바깥으로 즉 상위로만 뻗어나가며 탐색을 할뿐, 하위 스코프로 바깥에서 안으로 탐색하지는 않기 때문이다.
 

<h2 id="렉시컬-스코프"><a href="#렉시컬-스코프" title="렉시컬 스코프"></a><a name="lexical-scope">렉시컬 스코프</a></h2>렉시컬 스코프란, 정적 스코프를 의미한다.
렉시컬 스코프를 설명하기 앞서 먼저, 스코프의 생성 시점에 대해 알아보자.
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 9 10 11 12 </pre></td><td><pre>let name = "youngjin"; function sayHello() { let name = "devandy"; callMyName(); } function callMyName() { alert("Hello "+name); } sayHello(); </pre></td></tr></tbody></table></figure>

위의 코드에서 <code>sayHello()</code>가 호출되면 브라우저 경고창에서 어떤 문자열이 출력될까?
정답은 <code>"Hello youngjin"</code>이 출력된다.
<code>callMyName()</code>이 호출되는 시점이 아닌 선언시점에 스코프가 생성되면서 전역변수 <code>name</code>이 할당되면서 <code>youngjin</code>을 가져와서 출력한 것이다.
이렇게 스코프는 호출시점이 아닌 선언시점에 생성된다는 점을 기억해두자.
 

<h3 id="References"><a href="#References" title="References"></a>References</h3><ul>
<li><a target="_blank" rel="noopener" href="https://www.zerocho.com/category/Javascript/post/5740531574288ebc5f2ba97e">ZeroCho - 함수의 범위(scope)</a></li>
<li><a target="_blank" rel="noopener" href="https://www.zerocho.com/category/Javascript/post/5741d96d094da4986bc950a0">ZeroCho - 실행 컨텍스트</a></li>
</ul>

 </div>
 </div>
	 
	
	
 

</article>
 </div></div>

JavaScript - 스코프(Scope)

댓글