MumuandSander
메뉴
MumuandSander
컨텐츠 검색
블로그 내 검색
태그
제주오름프로젝트
제주오름투어
콘테나프로젝트
제주
최근글
댓글
공지사항
아카이브
[JS] var, let, const의 생성과정 3단계 (hoisting/TDZ/scope)
2022. 8. 18. 13:11
ㆍ
coding tutorial/Java Script
<br> </p><figure class="imageblock alignCenter" data-ke-mobileStyle="widthOrigin" data-origin-width="524" data-origin-height="302"><span data-url="https://blog.kakaocdn.net/dna/4QHBa/btrJWxAJtI4/AAAAAAAAAAAAAAAAAAAAAN_XDLYLR2mmf4tgbnsZoNo3r8_CQfJSiPvVr8y0dIja/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=O7X9%2BvjGx1FNPBb8fiGvv76KIL4%3D" data-phocus="https://blog.kakaocdn.net/dna/4QHBa/btrJWxAJtI4/AAAAAAAAAAAAAAAAAAAAAN_XDLYLR2mmf4tgbnsZoNo3r8_CQfJSiPvVr8y0dIja/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=O7X9%2BvjGx1FNPBb8fiGvv76KIL4%3D"><img src="https://blog.kakaocdn.net/dna/4QHBa/btrJWxAJtI4/AAAAAAAAAAAAAAAAAAAAAN_XDLYLR2mmf4tgbnsZoNo3r8_CQfJSiPvVr8y0dIja/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=O7X9%2BvjGx1FNPBb8fiGvv76KIL4%3D" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2F4QHBa%2FbtrJWxAJtI4%2FAAAAAAAAAAAAAAAAAAAAAN_XDLYLR2mmf4tgbnsZoNo3r8_CQfJSiPvVr8y0dIja%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DO7X9%252BvjGx1FNPBb8fiGvv76KIL4%253D" 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';" loading="lazy" width="524" height="302" data-origin-width="524" data-origin-height="302"/></span></figure> <p data-ke-size="size16"> <br> </p> <h4 data-ke-size="size20">let, const 키워드 추가 (ES6+)</h4> <p data-ke-size="size16">기존 var 키워드는 함수 레벨 스코프(유효범위)를 가지며, 암묵적 재할당이 가능 하였다. 이 단점을 보완하기 위해 블록 레벨 스코프를 가지는 let, const 키워드가 추가되었다. 변수의 중복 사용을 방지하기 위해 변수를 선언할 때 변하지 않는 값(상수)은 const, 변할 수 있는 값은 let 으로 선언해야 한다.<br> </p> <ul style="list-style-type: disc;" data-ke-list-type="disc"> <li style="list-style-type: none;"> <ul style="list-style-type: disc;" data-ke-list-type="disc"> <li><b>let</b> : let 없이 작성 시엔 가장 최근에 쓴 것으로 적용됨. <ul style="list-style-type: disc;" data-ke-list-type="disc"> <li>ex) let name = "Sander"; </li> </ul> </li> <li><b>const</b> : 가급적 상수는 변수 이름을 대문자로 표기 <ul style="list-style-type: disc;" data-ke-list-type="disc"> <li>ex) const MAX_SIZE = 100; / const PI = 3.14; / const BIRTH_DAY = '2020-01-01';</li> </ul> </li> </ul> </li> </ul> <p data-ke-size="size16"> <br> </p> <h4 data-ke-size="size20">[재선언]과 [재할당]</h4> <ul style="list-style-type: disc;" data-ke-list-type="disc"> <li><b>[선언] 후 </b><b></b><b>[재선언]</b>은 변수 키워드를 붙인 동명의 변수를 다시 선언하는 것을 말하는데, var 키워드의 경우 재선언이 가능했지만, ES6이후 추가된 let과 const는 재선언이 불가하다. <ul style="list-style-type: disc;" data-ke-list-type="disc"> <li>ex) var A = 0; (최초 선언) var A = 1; (재선언 O); -> <b>var: 재선언 O</b></li> <li>ex) let B = 0; (최초 선언) let B = 1; (재선언 X) -> <b>let: 재선언 X</b></li> <li>ex) const C = 0; (최초 선언) const C = 1; (재선언 X) -> <b>const: 재선언 X</b></li> </ul> </li> <li><b>[할당] 후 </b><b>[재할당]</b>은 let, const 등의 변수 키워드로 변수 선언 후, 해당 키워드를 생략하고 동일한 변수명을 통해 변수를 새로운 값으로 다시 할당해주는 것을 의미하는데, 여기서 let은 재할당이 가능하지만, const는 상수로 쓰이기 위해 고안된 키워드로 재할당이 불가하다. <ul style="list-style-type: disc;" data-ke-list-type="disc"> <li>ex) let A = 0; (최초 선언), A = 1; -> <b>let 키워드를 생략한 재할당 O</b></li> <li>ex) const B = 0; (최초 선언 O), B = 1; -> <b>const 키워드 생략한 재할당 X</b></li> </ul> </li> </ul> <p data-ke-size="size16"> </p> <h4 data-ke-size="size20">[호이스팅]</h4> <p data-ke-size="size16">호이스팅이란, 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동하는 것을 말한다.</p><figure class="imageblock alignLeft" data-ke-mobileStyle="widthOrigin" data-origin-width="642" data-origin-height="320"><span data-url="https://blog.kakaocdn.net/dna/dhuqM1/btrJ6yFTqFE/AAAAAAAAAAAAAAAAAAAAADs5-dIdEQZxUCRg2JDrnUSqR_Ia94cQvcXGPvDxHZJh/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=FoVjf8LUgYjhxx4b1h00QIC3JDM%3D" data-phocus="https://blog.kakaocdn.net/dna/dhuqM1/btrJ6yFTqFE/AAAAAAAAAAAAAAAAAAAAADs5-dIdEQZxUCRg2JDrnUSqR_Ia94cQvcXGPvDxHZJh/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=FoVjf8LUgYjhxx4b1h00QIC3JDM%3D" data-alt=" var는 선언하기 전에 앞 줄에서 호출해도 에러가 발생하지 않는다. "><img src="https://blog.kakaocdn.net/dna/dhuqM1/btrJ6yFTqFE/AAAAAAAAAAAAAAAAAAAAADs5-dIdEQZxUCRg2JDrnUSqR_Ia94cQvcXGPvDxHZJh/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=FoVjf8LUgYjhxx4b1h00QIC3JDM%3D" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FdhuqM1%2FbtrJ6yFTqFE%2FAAAAAAAAAAAAAAAAAAAAADs5-dIdEQZxUCRg2JDrnUSqR_Ia94cQvcXGPvDxHZJh%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DFoVjf8LUgYjhxx4b1h00QIC3JDM%253D" 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';" loading="lazy" width="400" height="199" data-origin-width="642" data-origin-height="320"/></span><figcaption> var는 선언하기 전에 앞 줄에서 호출해도 에러가 발생하지 않는다. </figcaption> </figure> <p data-ke-size="size16"> </p><figure class="imageblock alignLeft" data-ke-mobileStyle="widthOrigin" data-origin-width="621" data-origin-height="164"><span data-url="https://blog.kakaocdn.net/dna/cqh6xO/btrJ3AxE8na/AAAAAAAAAAAAAAAAAAAAAMVlWhpfQV73cpUl2f5g2UvBV4vAF5QjN1RT1zERKMko/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=NkRwz%2BanVbXrwaSTL6jQarEgDE0%3D" data-phocus="https://blog.kakaocdn.net/dna/cqh6xO/btrJ3AxE8na/AAAAAAAAAAAAAAAAAAAAAMVlWhpfQV73cpUl2f5g2UvBV4vAF5QjN1RT1zERKMko/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=NkRwz%2BanVbXrwaSTL6jQarEgDE0%3D" data-alt=" let과 const는 선언하기 전에 호출하면 에러가 발생한다. "><img src="https://blog.kakaocdn.net/dna/cqh6xO/btrJ3AxE8na/AAAAAAAAAAAAAAAAAAAAAMVlWhpfQV73cpUl2f5g2UvBV4vAF5QjN1RT1zERKMko/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=NkRwz%2BanVbXrwaSTL6jQarEgDE0%3D" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fcqh6xO%2FbtrJ3AxE8na%2FAAAAAAAAAAAAAAAAAAAAAMVlWhpfQV73cpUl2f5g2UvBV4vAF5QjN1RT1zERKMko%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DNkRwz%252BanVbXrwaSTL6jQarEgDE0%253D" 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';" loading="lazy" width="400" height="106" data-origin-width="621" data-origin-height="164"/></span><figcaption> let과 const는 선언하기 전에 호출하면 에러가 발생한다. </figcaption> </figure> <p data-ke-size="size16"> </p><figure class="imageblock alignLeft" data-ke-mobileStyle="widthOrigin" data-origin-width="680" data-origin-height="312"><span data-url="https://blog.kakaocdn.net/dna/bySD9q/btrJ6RFmkwg/AAAAAAAAAAAAAAAAAAAAAIsXlFxezU7WNqUF3Aw3D9bZdKtGfNw3Ya7XKNc-idYb/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=hX81zlPTJAYDo539spoBZkydbWk%3D" data-phocus="https://blog.kakaocdn.net/dna/bySD9q/btrJ6RFmkwg/AAAAAAAAAAAAAAAAAAAAAIsXlFxezU7WNqUF3Aw3D9bZdKtGfNw3Ya7XKNc-idYb/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=hX81zlPTJAYDo539spoBZkydbWk%3D"><img src="https://blog.kakaocdn.net/dna/bySD9q/btrJ6RFmkwg/AAAAAAAAAAAAAAAAAAAAAIsXlFxezU7WNqUF3Aw3D9bZdKtGfNw3Ya7XKNc-idYb/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=hX81zlPTJAYDo539spoBZkydbWk%3D" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbySD9q%2FbtrJ6RFmkwg%2FAAAAAAAAAAAAAAAAAAAAAIsXlFxezU7WNqUF3Aw3D9bZdKtGfNw3Ya7XKNc-idYb%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DhX81zlPTJAYDo539spoBZkydbWk%253D" 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';" loading="lazy" width="400" height="184" data-origin-width="680" data-origin-height="312"/></span></figure> <p data-ke-size="size16">let과 const는 선언하기 전 앞 줄에서 호출 시 에러가 발생한다. let과 const로 선언한 변수도 호이스팅이 발생하지만, 에러가 나는 이유는 바로 <b>TDZ(Temporal Dead Zone)</b> 때문이다. let과 const는 TDZ의 영향을 받는다. 런타임 시점에 코드에 도달하여 할당 하기 전에는 사용할 수 없다. (이는 코드를 예측 가능하게 하고 잠재적인 버그를 줄일 수 있다.)<br> <br>아래 예제를 살펴보며 호이스팅 개념을 한번 더 짚고 가자. <br>아래 코드는 정상적으로 실행된다.</p><figure class="imageblock alignLeft" data-ke-mobileStyle="widthOrigin" data-origin-width="491" data-origin-height="435"><span data-url="https://blog.kakaocdn.net/dna/btQ7sH/btrJ8mYgyj3/AAAAAAAAAAAAAAAAAAAAAJsv71v0MH7scd5apE1Muz2lh2eUDtYi3qTg6kNrHMmn/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=Xc%2FA2AZZoKwPeJ7mFHkxn3MCwdk%3D" data-phocus="https://blog.kakaocdn.net/dna/btQ7sH/btrJ8mYgyj3/AAAAAAAAAAAAAAAAAAAAAJsv71v0MH7scd5apE1Muz2lh2eUDtYi3qTg6kNrHMmn/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=Xc%2FA2AZZoKwPeJ7mFHkxn3MCwdk%3D"><img src="https://blog.kakaocdn.net/dna/btQ7sH/btrJ8mYgyj3/AAAAAAAAAAAAAAAAAAAAAJsv71v0MH7scd5apE1Muz2lh2eUDtYi3qTg6kNrHMmn/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=Xc%2FA2AZZoKwPeJ7mFHkxn3MCwdk%3D" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbtQ7sH%2FbtrJ8mYgyj3%2FAAAAAAAAAAAAAAAAAAAAAJsv71v0MH7scd5apE1Muz2lh2eUDtYi3qTg6kNrHMmn%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DXc%252FA2AZZoKwPeJ7mFHkxn3MCwdk%253D" 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';" loading="lazy" width="300" height="435" data-origin-width="491" data-origin-height="435"/></span></figure> <p data-ke-size="size16">하지만 아래 코드는 에러를 발생한다. 이는 호이스팅은 <b>스코프 단위</b>로 일어나기 때문에 여기서의 실행 컨텍스트의 스코프는 함수 내부가 되고 이 내부에 let으로 선언된 age변수가 호이스팅을 일으키는데, 함수 코드 내부에서 변수 선언 전에 이 변수를 참조하는 코드가 존재해서 에러가 발생하게 된다. </p><figure class="imageblock alignLeft" data-ke-mobileStyle="widthOrigin" data-origin-width="382" data-origin-height="363"><span data-url="https://blog.kakaocdn.net/dna/ckx0KY/btrJ6DgjNmZ/AAAAAAAAAAAAAAAAAAAAAFqvHBTvsTzPfDtRjWqwN9B49EU0OM2s7DIxMI2YQUOX/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=bBl3XV36Ne4fddd2d80iUGC095c%3D" data-phocus="https://blog.kakaocdn.net/dna/ckx0KY/btrJ6DgjNmZ/AAAAAAAAAAAAAAAAAAAAAFqvHBTvsTzPfDtRjWqwN9B49EU0OM2s7DIxMI2YQUOX/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=bBl3XV36Ne4fddd2d80iUGC095c%3D"><img src="https://blog.kakaocdn.net/dna/ckx0KY/btrJ6DgjNmZ/AAAAAAAAAAAAAAAAAAAAAFqvHBTvsTzPfDtRjWqwN9B49EU0OM2s7DIxMI2YQUOX/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=bBl3XV36Ne4fddd2d80iUGC095c%3D" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fckx0KY%2FbtrJ6DgjNmZ%2FAAAAAAAAAAAAAAAAAAAAAFqvHBTvsTzPfDtRjWqwN9B49EU0OM2s7DIxMI2YQUOX%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DbBl3XV36Ne4fddd2d80iUGC095c%253D" 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';" loading="lazy" width="300" height="285" data-origin-width="382" data-origin-height="363"/></span></figure> <p data-ke-size="size16"> </p> <h4 data-ke-size="size20">[변수 생성 3단계와 TDZ]</h4> <p data-ke-size="size16">변 수는 3단계의 생성 과정을 거친다. <b>선언 단계 - (TDZ) - 초기화 단계 - 할당 단계</b></p> <ol style="list-style-type: decimal;" data-ke-list-type="decimal"> <li><b>선언 단계</b>에서는 런타임 전에 자바스크립트 엔진이 선언된 변수를 모두 인식하는 과정이다. <ul style="list-style-type: circle;" data-ke-list-type="circle"> <li><b>선언단계와 초기화 단계 사이를 TDZ, Temporal Dead Zone이라 하는데, 일시적 사각지대란 의미이다. <br></b>따라서 선언 단계만 선행된 변수(let)이거나, 런타임 시점에 선언단계가 이루어지는 경우(const) TDZ으로 인해 에러가 발생한다.</li> </ul> </li> <li><span style="color: #ee2323;"><b>초기화 단계</b></span>에서는 할당된 값을 메모리에 넣기 위해 메모리를 초기화 하는 단계이다. 이 과정에서 <span style="color: #ee2323;"><b>undefined</b> 값</span>으로 할당된다.</li> <li><b>할당 단계</b>에서는 메모리에 변수에 할당한 값을 넣어주는 단계이다.</li> </ol> <p data-ke-size="size16">이때, 각 변수 키워드에 따라 달라지는 위 단계 진행에 있어 차이가 발생한다.</p> <ul style="list-style-type: disc;" data-ke-list-type="disc"> <li><b>var는 선언과 초기화(undefined할당)가 동시에 진행</b>된다. -> 그래서 할당 전에 호출해도 에러를 내지 않고, undefined가 나온다.</li> <li><b>let은 선언과 초기화가 분리되어 진행</b>된다. -> 호이스팅 되면서 선언은 이루어지지만, 초기화 단계는 실제 코드에 도달하는 런타임 시점에 되기 때문에 undefined가 아닌 에러를 발생한다</li> <li><b>const는 선언, 초기화, 할당이 런타임 시점에 동시에 진행</b>된다.</li> </ul> <p data-ke-size="size16">따라서 let과 var는 선언만 해두고 나중에 할당하는 것이 허용되지만, const는 선언만 이루어질 경우 에러가 발생한다. 선언과 동시에 할당하지 않았기 때문이다.</p><figure class="imageblock alignLeft" data-ke-mobileStyle="widthOrigin" data-origin-width="494" data-origin-height="369"><span data-url="https://blog.kakaocdn.net/dna/HpePK/btrJ6QGxCsY/AAAAAAAAAAAAAAAAAAAAAOppAFnR9KZNm8dTL34LeUugNJYGMpq32_0DE1LH8WD7/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=dBFM2I6euSR43k%2FkWrwjrfTVjos%3D" data-phocus="https://blog.kakaocdn.net/dna/HpePK/btrJ6QGxCsY/AAAAAAAAAAAAAAAAAAAAAOppAFnR9KZNm8dTL34LeUugNJYGMpq32_0DE1LH8WD7/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=dBFM2I6euSR43k%2FkWrwjrfTVjos%3D"><img src="https://blog.kakaocdn.net/dna/HpePK/btrJ6QGxCsY/AAAAAAAAAAAAAAAAAAAAAOppAFnR9KZNm8dTL34LeUugNJYGMpq32_0DE1LH8WD7/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=dBFM2I6euSR43k%2FkWrwjrfTVjos%3D" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FHpePK%2FbtrJ6QGxCsY%2FAAAAAAAAAAAAAAAAAAAAAOppAFnR9KZNm8dTL34LeUugNJYGMpq32_0DE1LH8WD7%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DdBFM2I6euSR43k%252FkWrwjrfTVjos%253D" 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';" loading="lazy" width="400" height="299" data-origin-width="494" data-origin-height="369"/></span></figure> <p data-ke-size="size16"> </p> <h4 data-ke-size="size20">[함수 레벨 스코프]와 [블록 레벨 스코프]</h4> <p data-ke-size="size16"><span style="color: #202122;">var와 let/const 키워드는 어디에서 선언 됐는지에 따라</span><span style="color: #202122;"> </span><span style="color: #202122;">다른 코드가 참조할 수 있는 유효범위(Scope)</span><span style="color: #202122;">가 다르다.</span></p> <ul style="list-style-type: disc;" data-ke-list-type="disc"> <li><b>var</b>의 경우 Script 가장 바깥쪽 단계에서 선언되면 이를 Global Scope(전역 스코프)에 저장,<br>함수에서 선언하면 Local Scope(function scope)에 저장한다. <br>-> 따라서<span> </span><b>var는 함수 레벨 스코프</b> <ul style="list-style-type: disc;" data-ke-list-type="disc"> <li><b>함수 스코프는 함수 내에서 선언된 변수만 그 지역 변수가 된다. </b></li> <li>여기서 전역 스코프는 말 그대로 전역적으로 존재하여, 스크립트 내 어디서 선언된 변수든지 Scope Chain 최하단에 항상 존재</li> </ul> </li> <li><b>let/const</b>는 스크립트 가장 바깥쪽에서 선언하면 Script Scope, <br>함수 내부에서 선언되면 Local Scope(function scope), <br>코드블록 { }(ex: 함수, for문, if문, while문, try/catch문 등을 의미)에서 선언되면 Block Scope(블록 스코프)에 저장한다 <br>-> 따라서<span> </span><b>let/const는 블록 레벨 스코프.</b> <ul style="list-style-type: disc;" data-ke-list-type="disc"> <li><b>블록 스코프는 모든 코드블록에서 선언된 변수는 코드블록 내에서만 유효하며 외부에서는 접근할 수 없다는 의미이다.</b></li> </ul> </li> <li><b>예문을 통해 확인해보자</b></li> </ul><figure class="imageblock alignLeft" data-ke-mobileStyle="widthOrigin" data-origin-width="475" data-origin-height="357"><span data-url="https://blog.kakaocdn.net/dna/bFmHcl/btrJ7rMIxOp/AAAAAAAAAAAAAAAAAAAAAKUe1r0YOFKP4lIaqSd2xbNNHAOfouvij5KkeaOe1vXo/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=zmVW6bM%2FwgGyE6TkUxr8fOBpkWs%3D" data-phocus="https://blog.kakaocdn.net/dna/bFmHcl/btrJ7rMIxOp/AAAAAAAAAAAAAAAAAAAAAKUe1r0YOFKP4lIaqSd2xbNNHAOfouvij5KkeaOe1vXo/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=zmVW6bM%2FwgGyE6TkUxr8fOBpkWs%3D"><img src="https://blog.kakaocdn.net/dna/bFmHcl/btrJ7rMIxOp/AAAAAAAAAAAAAAAAAAAAAKUe1r0YOFKP4lIaqSd2xbNNHAOfouvij5KkeaOe1vXo/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=zmVW6bM%2FwgGyE6TkUxr8fOBpkWs%3D" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbFmHcl%2FbtrJ7rMIxOp%2FAAAAAAAAAAAAAAAAAAAAAKUe1r0YOFKP4lIaqSd2xbNNHAOfouvij5KkeaOe1vXo%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DzmVW6bM%252FwgGyE6TkUxr8fOBpkWs%253D" 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';" loading="lazy" width="350" height="263" data-origin-width="475" data-origin-height="357"/></span></figure> <p data-ke-size="size16">예를 들어 if문 안에서 선언된 var는 if문 밖에서 참조 가능하다. 하지만 <b>let과 const는 중괄호 내부에서만 참조 가능</b>하다.</p><figure class="imageblock alignLeft" data-ke-mobileStyle="widthOrigin" data-origin-width="734" data-origin-height="440"><span data-url="https://blog.kakaocdn.net/dna/kSro0/btrJ590Wqcr/AAAAAAAAAAAAAAAAAAAAABhweIx0g42k769O8ueO28qlcgaSYzVCMaYjEgQzJ5S0/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=WsQ2pJvDGxOtV80NUmelXSXNMgE%3D" data-phocus="https://blog.kakaocdn.net/dna/kSro0/btrJ590Wqcr/AAAAAAAAAAAAAAAAAAAAABhweIx0g42k769O8ueO28qlcgaSYzVCMaYjEgQzJ5S0/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=WsQ2pJvDGxOtV80NUmelXSXNMgE%3D"><img src="https://blog.kakaocdn.net/dna/kSro0/btrJ590Wqcr/AAAAAAAAAAAAAAAAAAAAABhweIx0g42k769O8ueO28qlcgaSYzVCMaYjEgQzJ5S0/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1753973999&allow_ip=&allow_referer=&signature=WsQ2pJvDGxOtV80NUmelXSXNMgE%3D" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FkSro0%2FbtrJ590Wqcr%2FAAAAAAAAAAAAAAAAAAAAABhweIx0g42k769O8ueO28qlcgaSYzVCMaYjEgQzJ5S0%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DWsQ2pJvDGxOtV80NUmelXSXNMgE%253D" 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';" loading="lazy" width="350" height="210" data-origin-width="734" data-origin-height="440"/></span></figure> <p data-ke-size="size16">함수 선언문 안에서 선언된 var는 함수 밖에서 참조할 수 없다. (var가 유일하게 벗어날 수 없는 스코프가 함수이다.)<br> <br> <br><a href="https://www.youtube.com/watch?v=ocGc-AmWSnQ" target="_blank"><span>출처</span></a></p></div> <!-- System - START --> <!-- System - END --> <div class="container_postbtn #post_button_group"> <div class="postbtn_like"><script>window.ReactionButtonType = 'reaction'; window.ReactionApiUrl = '//kmyjn.tistory.com/reaction'; window.ReactionReqBody = { entryId: 700 }</script> <div class="wrap_btn" id="reaction-700" data-tistory-react-app="Reaction"></div><div class="wrap_btn wrap_btn_share"><button type="button" class="btn_post sns_btn btn_share" aria-expanded="false" data-thumbnail-url="https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2F4QHBa%2FbtrJWxAJtI4%2FAAAAAAAAAAAAAAAAAAAAAN_XDLYLR2mmf4tgbnsZoNo3r8_CQfJSiPvVr8y0dIja%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DO7X9%252BvjGx1FNPBb8fiGvv76KIL4%253D" data-title="[JS] var, let, const의 생성과정 3단계 (hoisting/TDZ/scope)" data-description="HTML 삽입 미리보기할 수 없는 소스 let, const 키워드 추가 (ES6+) 기존 var 키워드는 함수 레벨 스코프(유효범위)를 가지며, 암묵적 재할당이 가능 하였다. 이 단점을 보완하기 위해 블록 레벨 스코프를 가지는 let, const 키워드가 추가되었다. 변수의 중복 사용을 방지하기 위해 변수를 선언할 때 변하지 않는 값(상수)은 const, 변할 수 있는 값은 let 으로 선언해야 한다. let : let 없이 작성 시엔 가장 최근에 쓴 것으로 적용됨. ex) let name = "Sander"; const : 가급적 상수는 변수 이름을 대문자로 표기 ex) const MAX_SIZE = 100; / const PI = 3.14; / const BIRTH_DAY = '2020-01-01';.." data-profile-image="https://tistory1.daumcdn.net/tistory/2802327/attach/fc9f30ea82ca407db6f433c7905493c8" data-profile-name="kmyjn" data-pc-url="https://kmyjn.tistory.com/700" data-relative-pc-url="/700" data-blog-title="MumuandSander"><span class="ico_postbtn ico_share">공유하기</span></button> <div class="layer_post" id="tistorySnsLayer"></div> </div><div class="wrap_btn wrap_btn_etc" data-entry-id="700" data-entry-visibility="public" data-category-visibility="public"><button type="button" class="btn_post btn_etc2" aria-expanded="false"><span class="ico_postbtn ico_etc">게시글 관리</span></button> <div class="layer_post" id="tistoryEtcLayer"></div> </div></div> <button type="button" class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="2802327" data-url="https://kmyjn.tistory.com/700" data-device="web_pc" data-tiara-action-name="구독 버튼_클릭"><em class="txt_state"></em><strong class="txt_tool_id">MumuandSander</strong><span class="img_common_tistory ico_check_type1"></span></button> <div class="postbtn_ccl" data-ccl-type="6" data-ccl-derive="1"> <a href="https://creativecommons.org/licenses/by-nc/4.0/deed.ko" target="_blank" class="link_ccl" rel="license"> <span class="bundle_ccl"> <span class="ico_postbtn ico_ccl1">저작자표시</span> <span class="ico_postbtn ico_ccl2">비영리</span> </span> <span class="screen_out">(새창열림)</span> </a> </div> <!-- <rdf:RDF xmlns="https://web.resource.org/cc/" xmlns:dc="https://purl.org/dc/elements/1.1/" xmlns:rdf="https://www.w3.org/1999/02/22-rdf-syntax-ns#"> <Work rdf:about=""> <license rdf:resource="https://creativecommons.org/licenses/by-nc/4.0/deed.ko" /> </Work> <License rdf:about="https://creativecommons.org/licenses/by-nc/4.0/deed.ko"> <permits rdf:resource="https://web.resource.org/cc/Reproduction"/> <permits rdf:resource="https://web.resource.org/cc/Distribution"/> <requires rdf:resource="https://web.resource.org/cc/Notice"/> <requires rdf:resource="https://web.resource.org/cc/Attribution"/> <permits rdf:resource="https://web.resource.org/cc/DerivativeWorks"/> <prohibits rdf:resource="https://web.resource.org/cc/CommercialUse"/> </License> </rdf:RDF> --> <div data-tistory-react-app="SupportButton"></div> </div> <!-- PostListinCategory - START --> <div class="another_category another_category_color_gray"> <h4>'<a href="/category/coding%20tutorial">coding tutorial</a> > <a href="/category/coding%20tutorial/Java%20Script">Java Script</a>' 카테고리의 다른 글</h4> <table> <tr> <th><a href="/708">[JS] fetch API를 활용하여 원격 API 호출하기 (with promise)</a> <span>(0)</span></th> <td>2022.08.26</td> </tr> <tr> <th><a href="/702">[JS] module</a> <span>(0)</span></th> <td>2022.08.19</td> </tr> <tr> <th><a href="/698">[JS] 실행 컨텍스트(Execute Context), 스코프(Scope), 클로저(Closure)</a> <span>(0)</span></th> <td>2022.08.16</td> </tr> <tr> <th><a href="/659">[JS] call, apply, bind</a> <span>(0)</span></th> <td>2022.07.26</td> </tr> <tr> <th><a href="/658">[JS] 프로미스(Promise)</a> <span>(0)</span></th> <td>2022.07.26</td> </tr> </table> </div> <!-- PostListinCategory - END --> </div> <!-- article_content --> <div class="article_content"> <!-- <ul class="list_share list_sns"> <li class="item_share"><a href="#" class="link_share link_facebook" data-service="facebook"><span class="icon-Facebook"></span><span class="blind">페이스북</span></a></li> <li class="item_share"><a href="#" class="link_share link_twitter" data-service="twitter"><span class="icon-Twitter"></span><span class="blind">트위터</span></a></li> <li class="item_share"><a href="#" class="link_share link_story" data-service="kakaostory"><span class="icon-Story"></span><span class="blind">카카오스토리</span></a></li> <li class="item_share"><a href="#" class="link_share link_kakao" data-service="kakaotalk"><span class="icon-Kakao"></span><span class="blind">카카오톡</span></a></li> </ul> --> <!-- area_related --> <div class="area_related"> <h3 class="title_related">관련글</h3> <ul class="list_related"> <li class="item_related"> <a href="/708?category=1013667" class="link_related"> <span class="thumnail item-thumbnail" style="background-image:url('https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2F01SKB%2FbtrKCqOkfzp%2FAAAAAAAAAAAAAAAAAAAAAPzXKFFJ8rSOXXdQky25Q2eQJ0ZDnADHYfubumsBFpUf%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3D2JxQYRfwRum8FOTFTTi%252BiXjyS%252Fg%253D')"></span> <div class="box_content"> <strong>[JS] fetch API를 활용하여 원격 API 호출하기 (with promise)</strong> <span class="info">2022.08.26</span> </div> </a> </li> <li class="item_related"> <a href="/702?category=1013667" class="link_related"> <span class="thumnail item-thumbnail" style="background-image:url('https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FceNHC8%2FbtrJ3wogfHW%2FAAAAAAAAAAAAAAAAAAAAAMas5jJUAGJbfVLpq__eyWzSSrMR1su2yBnYSuAxHQYE%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DR96ye9YWu%252FhEmmkoUSoBSSIdNTY%253D')"></span> <div class="box_content"> <strong>[JS] module</strong> <span class="info">2022.08.19</span> </div> </a> </li> <li class="item_related"> <a href="/698?category=1013667" class="link_related"> <span class="thumnail item-thumbnail" style="background-image:url('https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fr5zrW%2FbtrJV6XrpZk%2FAAAAAAAAAAAAAAAAAAAAAC38JKB80D2fDw0yQ6rwJAkVsOAX2NZletxjTyMF0IEB%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3D4MUb2E7NjqAOLWbZk1AnDYYuBvI%253D')"></span> <div class="box_content"> <strong>[JS] 실행 컨텍스트(Execute Context), 스코프(Scope), 클로저(Closure)</strong> <span class="info">2022.08.16</span> </div> </a> </li> <li class="item_related"> <a href="/659?category=1013667" class="link_related"> <span class="thumnail item-thumbnail" style="background-image:url('https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbheCfD%2FbtrIioxDhix%2FAAAAAAAAAAAAAAAAAAAAAFJnnSWqoOEsUpsGXsYRH_Klz9Su28t0XHlVoVrCJu4j%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DUeL7U3MPr1pybAD4XxpjQV2ze1s%253D')"></span> <div class="box_content"> <strong>[JS] call, apply, bind</strong> <span class="info">2022.07.26</span> </div> </a> </li> </ul> </div> <!-- // area_related --> <!-- area_reply --> <div class="area_reply"> <div class="box_reply_info"> <a href="#rp" onclick="" class="reply_events">댓글 <span>0</span></a> </div> <!-- reply_content --> <div class="reply_content"> <button type="button" class="btn_more btn_replymore" style="display:none;">+ 이전 댓글 더보기</button> <div data-tistory-react-app="Namecard"></div> </div> <!-- // reply_content --> </div> <!-- // area_reply --> </div> <!-- // article_content --> </div> <!-- article_content --> </div> <!-- // area_view --> </main> </div> <!-- // container --> <!-- footer --> <footer id="footer"> <div class="inner_footer"> </div> <div> <address>© 2023 Ye-jin Kim</address> </div> </footer> <!-- // footer --> </div> <!-- // wrap --> <div class="#menubar menu_toolbar "> <h2 class="screen_out">티스토리툴바</h2> </div> <div class="#menubar menu_toolbar "><div class="btn_tool btn_tool_type1" id="menubar_wrapper" data-tistory-react-app="Menubar"></div></div> <div class="layer_tooltip"> <div class="inner_layer_tooltip"> <p class="desc_g"></p> </div> </div> <div id="editEntry" style="position:absolute;width:1px;height:1px;left:-100px;top:-100px"></div> <!-- DragSearchHandler - START --> <script src="//search1.daumcdn.net/search/statics/common/js/g/search_dragselection.min.js"></script> <!-- DragSearchHandler - END --> <div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-a73de51e390cf13289fe07f231e058ab5f6b3814/static/script/common.js"></script> <script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || [{channel_id: 'dk', channel_label: '{tistory}'}]</script> <script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async="async"></script> <script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"2802327-700","customProps":{"userId":"0","blogId":"2802327","entryId":"700","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"700","entryTitle":"[JS] var, let, const의 생성과정 3단계 (hoisting/TDZ/scope)","entryType":"POST","categoryName":"coding tutorial/Java Script","categoryId":"1013667","serviceCategoryName":null,"serviceCategoryId":null,"author":"3705695","authorNickname":"kmyjn","blogNmae":"MumuandSander","image":"kage@4QHBa/btrJWxAJtI4/R7KR9MvEYsdhV0ZLRhDsA0","plink":"/700","tags":[]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script> <script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index.js"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/polyfills-legacy.js" nomodule="true" defer="true"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index-legacy.js" nomodule="true" defer="true"></script> </body> <script> $('.article_view').find('table').each(function (idx, el) { $(el).wrap('<div class="table-overflow">') }) </script> </html>