안녕하세요.
이번에 배민 자바스크립트 코딩테스트를 준비하면서, 자바스크립트에 대해서 많이 공부하게 되었습니다.
자료구조인 Array, Queue, Priority Queue, Stack, 이진탐색 등을 공부하고 있습니다.
그런데 공부하면서 계속 햇갈리는 것이 있었습니다. 변수 선언할 때 사용하는 var, let 그리고 const였습니다. 이 세가지의 차이도 모르는 채로 계속 var를 사용하고 있었고, for문에서는 let으로 변수를 선언하니까, for문 정도에서만, let을 사용하였습니다. 그러다가 안되겠다 싶어서 처음으로 되돌아가는 마음으로 var, let 그리고 const의 정의와 사용법을 마음먹고 알아보게 되었습니다.
여러 블로그를 찾아보던 중... 정말 이해하기 좋은 글을 찾아내었습니다.
https://poiemaweb.com/es6-block-scope
let, const | PoiemaWeb
ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다. var 키워드로 선언된 변수는 아래와 같은 특징이 있다. 이는 다른 언어와는 다른 특징으로 주의를 기울이지 않으면 심각한 문제를 일으킨다. 대부분의 문제는 전역 변수로 인해 발생한다. 전역 변수는 간단한 애플리케이션의 경우, 사용이 편리한 면이 있지만 불가피한 상황을 제외하고 사용을 억제해야 한다. 전역 변수는 범위(scope)가 넓어서 어디에서 어떻게 사용될 지 파악하기
poiemaweb.com
바로 저 링크입니다.
저 글을 보고 명확하게 변수 선언 키워드들을 이해할 수 있었습니다.
지금부터 요약적으로 내용을 정리해보려고 합니다.
변수 선언 키워드
var
* 중복 변수 허용됩니다.
* 어디든 선언이 가능하고, 변수 값 할당도 어디서든 가능합니다.
let
* 중복 변수가 허용되지 않습니다.
* 블록안에서만 유효합니다. 블록 외부에서 참조가 불가능합니다.
해당 스코프에서 호이스팅되고 코드 블록의 선두부터 초기화가 이루어지는 지점까지 일시적 사각지대(TDZ)에 빠진다. 따라서 전역 변수 foo의 값이 출력되지 않고 참조 에러(ReferenceError)가 발생한다.
const
* 중복 변수가 허용되지 않습니다.
* 블록안에서만 유효합니다. 블록 외부에서 참조가 불가능합니다.
* 변수 선언과 값 할당이 동시에 이루어져야 합니다.
* 지정된 값은 수정할 수 없습니다.
* 원시값이 들어가는 변수에 사용에 적합합니다.
호이스팅
호이스팅(Hoisting)이란, var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다.
결과적으로는..
- ES6에서는 var를 사용하지 않습니다.
- const를 우선적으로 사용하되, 객체나 변수의 재할당이 필요한 경우에만 let을 사용하도록 합니다.
- 변수의 유효 범위(scope)를 최대한 좁게 사용해서, 변수를 건드릴 일을 최대한 줄여야합니다.
느낀점
- 뭐든... 알고! 써야한다는 것을 깨달아 버렸습니다.
- function-level-scope는 지양하고, block-level-scope를 지향하자고 느꼈습니다.
댓글