JavaScript 에는 변수 선언시 사용하는 방법이 여러가지가 있다.
var, let, const가 바로 그것이다. 기존에는 var로 사용을 많이 했으나, ECMAScript 6 (2015) 이후로는 let과 const가 추가되었다.
| 재선언 | 재할당 | 스코프 | |
|---|---|---|---|
var | O: 재 선언시 덮어쓰기 | O | 함수 |
let | X | O : 기존 변수에 재할당 | 블록 |
const | X | X : 불변 함수 | 블록 |
접두어 (var, let, const) 없이 생성하는 경우
이 경우, 생성되는 변수는 암시적 전역 변수로 생성이 된다고 한다.
JS Engine의 수행동작에 따른 차이점
JS Engine은 JS를 수행할 때, 2개의 페이즈로 나뉜다고 한다. 바로 Creation Phase와 Execution Phase 인데, var 와 let, const는 해당 페이즈마다 처리하는 방식에 따라 나뉜다.
호이스팅이란?
변수와 함수 선언이 코드의 최상단으로 끌어올려지는 것처럼 동작하는 현상을 말한다. 실제 코드의 위치가 바뀌는 것은 아니지만, 자바 스크립트 엔진이 실행 컨텍스트를 생성할 때, 변수와 함수 선언을 먼저 처리하기 때문에 발생하는 현상이다.먼저 사용됐지만, 생성 페이즈에서 var 타입의 변수는 선언 및 초기화를 진행하기 때문에 undefined로 출력됨.
Creation Phase
- 변수와 함수 선언 및 호이스팅 : 변수와 함수 선언이 코드 상단으로 불러와짐(호이스팅). var로 선언된 변수는
undefined로 초기화. let 과 const는 선언은 되나, 초기화는 되지 않고 TDZ 존에 놓임. - 함수 선언에 대한 메모리 할당 : 함수 전체가 메모리에 로드됨. (함수가 선언되는 곳을 Lexical Scope 라고 함)
- 전역 객체와 this 바인딩 : 전역 컨텍스트에서 전역 객체(window 혹은 Global)와 this를 바인딩함.
Execution
- 변수 값 할당 : let, const의 경우는 여기서 초기화와 할당을 수행한다. var의 경우도 여기서 변수가 할당됨.
- 함수 실행 : 메모리에 로드 된 함수가 실행되고, 실행되며 내부의 코드도 실행됨.
- 조건문과 반복문 실행
var
var의 경우, 생성 페이즈(Creation Phase)에서 생성과 함께 초기화 되기 때문에 다음과 같은 결과가 나온다
맨 위의 console.log(a)는 a 변수가 선언되지 않았음에도 변수를 찾을 수 없다는 에러가 아닌, undefined가 출력된다. 다른 프로그래밍 언어와는 조금 다른 특색인데, 생성 페이즈에서 var a를 이미 생성 및 초기화를 진행했기 때문에 저렇게 출력이 된다. 이처럼 순서대로 처리하는 언어임에도 변수나 함수의 생성이 제일 위로 올라와있어서 처리 된 것처럼 보이는 것을 호이스팅 이라고 한다.
또한 var는 뒤에서 var로 선언해도 같은 변수에 재 할당이 된다.
함수 안에서 var를 사용하여 선언할 경우, 해당 변수는 함수의 스코프를 가지게 된다.
let
let 의 경우, 생성 페이즈에서 선언은 되지만, 초기화는 되지 않는다. 그렇기 때문에 다음과 같은 결과가 나온다.
참조 에러라고 한다. let 의 경우 생성 페이즈에서 선언은 하지만, 초기화는 하지 않기 때문에 값 할당 전에 사용하려 하면 정의되지 않았다고 한다.
let은 또한 재사용이 가능한 변수이다. var처럼 또 할당하고 또 let으로 할당하면 이미 선언된 변수라고 에러가 출력된다.
그렇기 때문에 let 을 사용하여 변수를 선언할 땐, 최초 선언시에만 let을 사용하고, 나머지는 let을 사용하지 말아야 한다.
또한 let은 블록의 범위를 가지고 있다. 블록이라 함은, {}를 이용한 걸 블록이라고 하는데, 이 대괄호를 사용하는 if나 switch, for문에도 적용이 된다고 한다.
const
const는 let에서 재할당이 불가능한 특성만 가지고 있다. 자바의 public final static 속성과 비슷한 것 같다.
확실히 기존 코드 문법들 보단 좀 자유분방 한 것 같다. 상황에 맞게 잘 써보도록 하자.
📑 출처 및 참조
[ASAC] 강의 자료
Chat GPT
