<div id="readability-page-1" class="page"><div>
 <article id="post-var-let-const" itemscope="" itemprop="blogPost">
 <div>
 
 <header>
 
 
 
 

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

 

 

 <img src="https://user-images.githubusercontent.com/33862991/127281756-5fe03972-85ba-401f-ac6b-65bd31e12eaf.jpg" alt="출처 : Elizeu Dias From Unplash">
자바스크립트를 사용할때 변수의 타입으로 <code>var</code>을 사용하곤 했는데, 인텔리제이 Ultimate 버전을 사용할때 IDE에서 <code>var</code> 대신 <code>let</code>을 타입으로 변경할것을 권하는 alert를 자주 보곤 했다. 그 이유를 정리하려고 한다.
<h2 id="Why"><a href="#Why" title="Why"></a>Why</h2>우선 <code>let</code>이라는 타입은 ES6(ECMAScript6)에서 추가된 문법이라고 한다. 그럼 왜 ES6에서 새로운 타입이 추가된걸까?
아래 예제 코드를 보자.


JS 코드를 보면, <code>var</code>로 선언된 <code>x</code>가 같은 함수내에서 중복 선언된걸 알 수 있다. 그럼에도 에러없이 마지막에 선언된 <code>x</code>가 <code>valueX</code>의 HTML에 입혀져서 출력이되었다.
짧은 코드이기에 이런 코드는 금방 수정할 수 있지만, 만약 수백줄, 수천줄의 코드에서 이런 문제가 있다면 이땐 어떻게 찾아야할까?
무엇보다 전역 변수의 중복 선언이 가능하다면, 문제가 발생했을때 선언된 변수 전체를 찾아야 할지도 모르겠다.
이런 문제를 해결하기 위해 ES6에서 <code>let</code>이 등장했다.
<h2 id="Benefit"><a href="#Benefit" title="Benefit"></a>Benefit</h2>위의 CodePen의 코드에서 중복선언된 <code>x</code>의 타입을 <code>let</code>으로 바꿔보자. 그리고 버튼을 클릭하여 함수를 실행하면, 화면에서 값이 바뀌지 않을것이다.
브라우저 콘솔에서 테스트하면 원인을 알 수 있다.
<figure><table><tbody><tr><td><pre>1 2 3 4 </pre></td><td><pre>let x = 100; console.log(x); let x = 200; console.log(x); </pre></td></tr></tbody></table></figure>

<img src="https://user-images.githubusercontent.com/33862991/127274794-8d39b933-e919-48c7-8ade-290bba890ec1.png">
변수 <code>x</code>의 재정의로 인해 SyntaxError가 발생했다.
결과적으로 <code>let</code> 을 사용하면 변수의 중복선언이 불가능하기 때문에 안전하게 변수를 선언/사용할 수 있다.
<code>var</code>과 <code>let</code>의 차이중 또 하나 특징이 있다.


위의 CodePen에서 오른쪽 Result 탭에서 버튼을 클릭해보자. 클릭하기 전 각각 <code>x</code>와 <code>y</code>가 어떤 값이 할당될지 생각해보고 클릭해보자.
<code>x</code>는 기대했던대로 변화되었지만, <code>y</code>는 아닐것이다. 왜 그런걸까?
<code>main()</code>함수를 살펴보자.
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 </pre></td><td><pre>function main () { let x = 1; if (x === 1) { let x = 2; let y = 1; valueX.innerHTML=x; } valueY.innerHTML=y; } </pre></td></tr></tbody></table></figure>

스코프(scope)를 구분하기 위해 일부러 함수내에서 if문을 작성해서 스코프를 구분했다.
먼저 살펴볼 부분은 변수 <code>x</code>가 중복선언되었다는 점이다. 앞서 <code>let</code>으로 변수를 선언하면 중복선언이 불가능하다고 했다. 그런데 위의 코드는 어떻게 중복선언이 가능했던걸까?
<img src="https://user-images.githubusercontent.com/33862991/127279006-605095b3-97f6-431a-9925-ddb55cc0bec2.png">
<code>let x</code>가 선언된 스코프의 차이가 이를 설명한다. 
가장 먼저 선언된 <code>x</code>는 main 함수를 스코프로 갖는다. 두번째로 선언된 <code>x</code>는 if절을 스코프로 갖는다. 따라서 <code>x</code>는 중복선언된게 아니라 서로 다른 스코프에서 선언된 변수일뿐이다.
따라서 실행화면에서 출력된 <code>x</code>의 값은 1이 아닌 <code>innerHTML</code>가 선언된 스코프의 <code>x</code>값을 가져와서 2가 출력된 것이다.
같은 이유로 <code>y</code>는 값이 출력되지 못했다. <code>y</code>가 선언된 스코프는 if절인데, <code>y</code>의 값을 출력하는 코드인 <code>innerHTML</code>가 선언된 스코프보다 if절이 하위 스코프이기 때문에 <code>y</code>의 값을 가져올수 없었다.
정상적으로 <code>y</code>를 출력하려면 어떻게 해야할까?


if절 안에서 <code>y</code>를 <code>var</code>로 선언하는것으로 바꾸고 다시 버튼을 클릭하면 기대했던대로 출력될 것이다. 
그러나 이렇게 전역변수를 사용하기 위해 <code>var</code>을 사용하는건 권고되지 않는 방식의 코딩이다. 보다 나은 코드는 변수 <code>y</code>는 <code>let</code>으로 선언하되 HTML을 변경하는 <code>innerHTML</code> 코드를 if절 안으로 가져오는 것이다.
<h3 id="정리"><a href="#정리" title="정리"></a>정리</h3><code>let</code>의 사용목적은 아래와 같다.
<ul>
<li>변수 중복 선언 불가</li>
<li>스코프 규칙 준수</li>
</ul>
더 알아보기
<ul>
<li><a target="_blank" rel="noopener" href="https://ko.javascript.info/closure">모던자바스크립트 - 변수의 유효범위와 클로저</a></li>
</ul>
<h2 id="const"><a href="#const" title="const"></a>const</h2>ES6에서는 <code>let</code>뿐만 아니라 <code>const</code>가 추가되었는데, <code>const</code>는 상수를 선언할때 사용한다. 즉 immutable 하게 사용할 변수는 <code>let</code>이 아니라 <code>const</code>로 선언해야 변수의 값을 안전하게 보존할 수 있다.

 </div>
 </div>
	
	
 

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

기록하는개발자 | DevAndy

DevAndy

자바스크립트를 사용할때 변수의 타입으로 var을

Var과 Let의 차이 그리고 Const

댓글