JavaScript 에서 변수 선언할때 var만 쓰면 되지.. 왜 let과 const가 있는 걸까?
var name = "Hello";
let name = "Hello";
const name = "Hello;
똑같은 변수 선언 같아 보이지만 다른 3가지 변수 선언 방법에 대해 정리해 놓으려고 한다.
Var
let과 const는 모두 var이 생긴 이후, ES6에 추가된 변수 선언 방식이다. 즉, var 방식의 단점을 보완하기위해 추가된 방법인 것이다.
var의 단점
1. hoisting : 인터프리터가 변수와 함수가 선언 되기 전에 메모리 공간에 미리 할당 하는 것을 의미한다. var은 이 hoisting 방식이 적용되어 있다.
console.log(name);
var name = "Hello?";
위 방식으 코드를 실행하면 error가 아닌 undefined가 출력된다. error가 나야되는 상황에서 error가 나지 않는 것은 예측하기 어렵고 관리하는데 어려움을 준다.
2. 전역레벨 스코프( Global scope )
변수가 의도하지 않고 전역 변수로 선언되면, 변수 이름이 중복될수 있고, 의도치 않은 재할당으로 코드를 예측하기 어렵게 만든다.
Let / Const
위와 같은 var의 문제점을 보완하기 위해 ES6부터 let과 const를 지원한다. 그 특징은 다음과 같다.
1. hoisting 문제 해결
hoisting을 지원하지 않는다. 변수 선언전에 변수를 호출하면 Error가 뜨면서 실행 되지 않는다. Temporal dead Zone(TDZ)이라고 정의 되며, 변수가 선언되고 초기화 되기 전까지 변수에 접근 할 수 없게 하여 Error를 발생 시킨다.
2. 블록 레벨 스코프 ( Block level scope )
선언된 변수는 코드 블록(fuction, if, for, while ... )에서만 유효하며 외부에서는 참조 할 수 없다.
Const
그 외 let과 다르게 const 에는 재할당을 방지 해주는 기능이 있다. 비록 객체를 선언후 객체 내용을 변경하면 변경되긴 하지만, 기본적으로 int, string 등의 타입들의 재할당을 방지 해 준다.
'JavaScript' 카테고리의 다른 글
실행 컨텍스트 딥다이브 (2) | 2024.12.08 |
---|---|
[Javascript/React] URL Params를 통해 데이터가 원하는데로 전달되지 않을때? ( URL Encoding ) (2) | 2024.10.24 |
CORS policy와 Import/Export (0) | 2022.10.10 |
Element의 기준으로 다른 요소를 찾기 (0) | 2022.10.08 |
Element의 기준으로 요소 삽입 (0) | 2022.04.16 |