<div id="readability-page-1" class="page"><article id="mainContent">
              <div>
                <p><a href="/m/category/TIL/JavaScript"><span>TIL/JavaScript</span></a></p><h3>var가 있는데 const, let은 왜 나왔을까?</h3>
              </div>
              <p><cite>KimSeYun</cite>
                <span> 2023. 11. 30. 00:53</span>
              </p>
              

<ins data-ad-client="ca-pub-9527582522912841" data-ad-slot="8674651030" data-ad-format="auto" data-full-width-responsive="true" data-ad-type="inventory"></ins>


                <div>
                                <h2>var가&nbsp;있는데&nbsp;const,&nbsp;let은&nbsp;왜&nbsp;나왔을까?</h2>
<h2 data-ke-size="size26">서론</h2>
<ul data-ke-list-type="disc">
<li>JavaScript에선 변수를 정의할수 있는 예약어가 총 3개가 존재한다.</li>
<li>옛날엔 var를 모두 사용했지만, 최근에 const와 let이 추가되면서 총 3개의 방식이 생겼는데, 왜 새롭게 const, let이 도입되게 되었고, 각 차이점등에 대해서 알아볼 예정입니다.</li>
</ul>
<h3 data-ke-size="size23">과거의 var</h3>
<ul data-ke-list-type="disc">
<li>var의 문제점은 세가지가 있었습니다.</li>
</ul>
<ol data-ke-list-type="decimal">
<li>가변 - 정의된 변수를 변경할수 있었음.</li>
<li>var number = 10; consloe.log(10); # 10 number = 20; consloe.log(20);</li>
<li>전역 scope 혹은 함수 scope
<ul data-ke-list-type="disc">
<li>아래와 같은 코드에선 전역 범위를 가질수 있다는 의미였습니다.</li>
<li>var globalNumber = 20; const a = () =&gt; { if(true) { var number = 10; } console.log(number); } a() # 10;</li>
</ul>
</li>
<li>const a = () =&gt; { if(true) { var number = 10; } console.log(number); } a() # 10;</li>
<li>호이스팅
<ul data-ke-list-type="disc">
<li>JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. 이걸 함수 선언이 맨위로 이동되는 현상을 말하게 됩니다.</li>
</ul>
<pre><code>console.log(number); // undefined / 선언,초기화 상태
number = 10; // 선언, 초기화, 할당까지 된 상태
var number; // 초기화가 되진 않는다.
console.log(number); // 10
</code></pre>
<ul data-ke-list-type="disc">
<li>여기서 왜 undefined일까?
<ul data-ke-list-type="disc">
<li>When JavaScript engine finds a var variable declaration during the compile phase, it will add that variable to the lexical environment and initialize it with undefined and later during the execution when it reaches the line where the actual assignment is done in the code, it will assign that value to the variable. -Sukhjinder Arora 's Medium -</li>
<li>JavaScript 엔진이 컴파일 단계에서 var 변수 선언을 발견하면 해당 변수를 lexical environment에 추가하고 undefined로 초기화하고, 실행 단계에서 실제 할당이 이루어지는 코드 라인에 도달할 때 값을 할당합니다.</li>
</ul>
</li>
</ul>
</li>
</ol>
<ul data-ke-list-type="disc">
<li>세가지의 문제점을 통해, 값이 변경됨으로써 불안정한 애플리케이션이 될수 있었고, 함수 레벨보다 더 낮은 scope인 블록 레벨의 방법이 없다보니, 함수내에서의 변수를 사용할때 위험성이 있었습니다.</li>
<li>간단한 예제로 살펴보면 아래와 같습니다.
<ul data-ke-list-type="disc">
<li>times &gt; 3이 true이기 때문에 greeter가 변경되게 되는데, 실제 블록 레벨이 아니기 때문에 재 선언을 했는데도, 외부에서도 사용할수 있다는 점, 아울러 가변인점 등에서 예상하지 못한 결과를 나오게 되는 경우가 많습니다.</li>
</ul>
</li>
<li>var greeter = "hey hi"; var times = 4; if (times &gt; 3) { var greeter = "say Hello instead"; } console.log(greeter) // "say Hello instead"</li>
<li>그래서 ECMScript6(ES6/ES2015)에선 새로운 변수 선언 방식인 let/const 가 탄생하게 됩니다.</li>
</ul>
<h3 data-ke-size="size23">let과 const</h3>
<ul data-ke-list-type="disc">
<li>일단 var의 문제점을 아래와 같이 해결하였습니다.</li>
</ul>
<ol data-ke-list-type="decimal">
<li>가변의 문제
<ol data-ke-list-type="decimal">
<li>let은 가변</li>
<li>let number = 10; number = 20; // 에러가 발생하지 않음.</li>
<li>const은 불변</li>
<li>const number = 10; number = 20; // Uncaught SyntaxError: Identifier 'number' has already been declared</li>
</ol>
</li>
<li>함수레벨 scope를 블록 레벨 scope로 변경
<ul data-ke-list-type="disc">
<li>위 코드는 Uncaught ReferenceError: number is not defined 이러한 에러가 발생합니다.</li>
</ul>
</li>
<li>const a = () =&gt; { if(true) { let number = 10 // 혹은 const로 변경해도 됨. } console.log(number) } a()</li>
<li>호이스팅 문제
<ul data-ke-list-type="disc">
<li>Uncaught ReferenceError: number is not defined 여기서도 이러한 에러가 발생하게 됩니다.</li>
<li>실질적으로 let,const도 호이스팅이 발생하지만, 해당 변수는 초기화가 되는건 아니기 때문에 참조 에러가 발생하게 됩니다.</li>
</ul>
</li>
<li>console.log(number); // Uncaught ReferenceError: number is not defined number = 10; let number; // const로 해도 동일함. console.log(number);</li>
</ol>
<h2 data-ke-size="size26">결론</h2>
<ul data-ke-list-type="disc">
<li>var를 사용하면 전역범위, 함수 범위이며 재 선언이 가능하다.</li>
<li>let,const는 블록 범위이며, 재할당이 가능한지 아닌지에 따라 달라진다.</li>
<li>세 가지 모두 최상위로 호이스팅 현상이 발생하지만, var변수는 undefined로 초기화가 되고, let,const는 초기화가 되지 않는다.</li>
<li>아래표를 보면서 간단히 알아보자.</li>
</ul>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="980" data-origin-height="509">
    <span data-url="https://blog.kakaocdn.net/dn/4JAsC/btsBcZwWuRK/zH1yrwjb0pvzOR9pfbb00K/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/4JAsC/btsBcZwWuRK/zH1yrwjb0pvzOR9pfbb00K/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="980" data-origin-height="509">
    </span>
    
</figure>
            
            
                </div>
            

                          
            
            </article></div>

Enthusiastically, Steady, Slowly

var가 있는데 const, let은 왜 나왔을까?
서론
JavaScript에선 변수를 정의할수 있는 예약어가 총 3개가 존재한다.
옛날엔 var를 모두 사용했지만, 최근에 const와 let이 추가되면서 총 3개의 방식이 생겼는데, 왜 새롭게 const, let이 도입되게 되었고, 각 차이점등에 대해서 알아볼 예정입니다.
과거의 var
var의 문제점은 세가지가 있었습니다.
가변 - 정의된 변수를 변경할수 있었음.
var number = 10; consloe.log(10); # 10 number = 20; consloe.log(20);
전역 scope 혹은 함수 scope
아래와 같은 코드에선 전역 범위를 가질수 있다는 의미였습니다.
var globalNumber = 20; const a = () => { if(true) { var number = 10; } console.log(number); } a() # 10;
const a = () => { if(true) { var number = 10; } console.log(number); } a() # 10;
호이스팅
JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. 이걸 함수 선언이 맨위로 이동되는 현상을 말하게 됩니다.
console.log(number); // undefined / 선언,초기화 상태
number = 10; // 선언, 초기화, 할당까지 된 상태
var number; // 초기화가 되진 않는다.
console.log(number); // 10
여기서 왜 undefined일까?
When JavaScript engine finds a var variable declaration during the compile phase, it will add that variable to the lexical environment and initialize it with undefined and later during the execution when it reaches the line where the actual assignment is done in the code, it will assign that value to the variable. -Sukhjinder Arora 's Medium -
JavaScript 엔진이 컴파일 단계에서 var 변수 선언을 발견하면 해당 변수를 lexical environment에 추가하고 undefined로 초기화하고, 실행 단계에서 실제 할당이 이루어지는 코드 라인에 도달할 때 값을 할당합니다.
세가지의 문제점을 통해, 값이 변경됨으로써 불안정한 애플리케이션이 될수 있었고, 함수 레벨보다 더 낮은 scope인 블록 레벨의 방법이 없다보니, 함수내에서의 변수를 사용할때 위험성이 있었습니다.
간단한 예제로 살펴보면 아래와 같습니다.
times > 3이 true이기 때문에 greeter가 변경되게 되는데, 실제 블록 레벨이 아니기 때문에 재 선언을 했는데도, 외부에서도 사용할수 있다는 점, 아울러 가변인점 등에서 예상하지 못한 결과를 나오게 되는 경우가 많습니다.
var greeter = "hey hi"; var times = 4; if (times > 3) { var greeter = "say Hello instead"; } console.log(greeter) // "say Hello instead"
그래서 ECMScript6(ES6/ES2015)에선 새로운 변수 선언 방식인 let/const 가 탄생하게 됩니다.
let과 const
일단 var의 문제점을 아래와 같이 해결하였습니다.
가변의 문제
let은 가변
let number = 10; number = 20; // 에러가 발생하지 않음.
const은 불변
const number = 10; number = 20; // Uncaught SyntaxError: Identifier 'number' has already been declared
함수레벨 scope를 블록 레벨 scope로 변경
위 코드는 Uncaught ReferenceError: number is not defined 이러한 에러가 발생합니다.
const a = () => { if(true) { let number = 10 // 혹은 const로 변경해도 됨. } console.log(number) } a()
호이스팅 문제
Uncaught ReferenceError: number is not defined 여기서도 이러한 에러가 발생하게 됩니다.
실질적으로 let,const도 호이스팅이 발생하지만, 해당 변수는 초기화가 되는건 아니기 때문에 참조 에러가 발생하게 됩니다.
console.log(number); // Uncaught ReferenceError: number is not defined number = 10; let number; // const로 해도 동일함. console.log(number);
결론
var를 사용하면 전역범위, 함수 범위이며 재 선언이 가능하다.
let,const는 블록 범위이며, 재할당이 가능한지 아닌지에 따라 달라진다.
세 가지 모두 최상위로 호이스팅 현상이 발생하지만, var변수는 undefined로 초기화가 되고, let,const는 초기화가 되지 않는다.
아래표를 보면서 간단히 알아보자.

var가 있는데 const, let은 왜 나왔을까?

댓글