★ 결론을 먼저 말하면 var 보다는 let, const를 사용하자 !
var과 let은 js에서 변수를 선언할 때 사용되는 키워드이지만
두 변수에는 중요한 차이가 존재한다.
호이스팅 (Hoisting)
💡 JavaScript에서 변수 및 함수 선언이 소스 코드의 상단으로 끌어올려지는 것.
이는 코드가 실행되기 전에 변수 및 함수 선언이 메모리에 할당되는 것을 의미한다.
📃 let과 var
var
변수 선언은 해당 스코프의 맨 위로 "호이스팅" 된다.
즉, 변수가 선언되기 전에 변수를 참조해도 에러가 발생하지 않음
그러나 초기화는 호이스팅되지 않아 변수가 선언된 위치는 위로 올라가지만, 초기값은 그 자리에 그대로 남는다.
let
let으로 선언된 변수는 호이스팅되지만, TDZ(Temporal Dead Zone)라는 개념에 따라 초기화 전에 접근하면 에러가 발생한다.
(TDZ는 변수가 선언된 위치에서 초기화되기 전까지의 범위를 의미)
예시)
console.log(x); // undefined
var x = 10;
console.log(x); // 10
console.log(y); // ReferenceError: y is not defined
let y = 20;
console.log(y); // 20var로 선언된 x는 호이스팅되어 undefined로 초기화 된다.
let으로 선언된 y는 초기화되기 전에 접근하려 하므로 TDZ에 의해 에러가 발생한다.
💡 위 코드에서 console.log(x)를 호출하기 전에 var x = 10;이 있는데
이것이 호이스팅에 의해 변수 선언이 코드 상단으로 끌어올려지기 때문에
오류가 발생하지 않지만 x의 값은 아직 할당되지 않았으므로 undefined가 출력되는 것!
범위 (Scope)
스코프(Scope)란 ?
변수가 유효한 범위
JavaScript에서 스코프는 변수가 선언된 위치에 따라 결정된다.
변수의 가시성과 유효범위를 결정
-
var
함수 단위의 스코프를 가진다.
함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 접근할 수 없다. -
let
블록 단위의 스코프를 가진다.
블록 내에서 선언된 변수는 블록 내에서만 유효하며 블록 외부에서는 접근할 수 없다.
예시
// 전역 스코프
let globalVar = 'I am global';
function myFunction() {
// 로컬 스코프
let localVar = 'I am local';
console.log(globalVar); // 전역 변수에 접근 가능
console.log(localVar); // 로컬 변수에 접근 가능
}
myFunction();
console.log(globalVar); // 전역 변수에 접근 가능
console.log(localVar); // ReferenceError: localVar is not defined- globalVar는 전역 스코프에 선언되어 어디서든 접근 가능
- localVar는 myFunction 내부에서만 접근 가능
- 함수 외부에서 localVar에 접근하면 ReferenceError 발생한다.
📑 var 보다 let을 사용하면 좋은 이유 !
1. 블록 스코프
let은 블록 내에서만 유효한 변수를 선언할 수 있으므로
블록 내부에서만 변수가 유효하고 외부에서는 접근할 수 없게 되므로
코드의 가독성을 높이며 블록 스코프는 변수의 유효범위를 더욱 명확하게 제어할 수 있다.
2. 호이스팅의 방지
let은 호이스팅되지만 TDZ라는 개념에 따라 초기화되기 전에 접근하면 에러를 발생시켜 변수가 실제로 선언되고 초기화되기 전에 사용되는 경우를 방지한다.
이로 인해 코드의 안전성이 향상된다.
3. 재할당
let으로 선언된 변수는 재할당이 가능하지만, var로 선언된 변수는 재선언도 가능하므로 실수로 같은 이름의 변수를 재선언하여 예기치 않은 동작을 발생시키는 것을 방지한다.
4. Strict 모드
let은 자동으로 strict 모드를 적용한다.
strict 모드에서는 더 엄격한 규칙을 적용하여 코드의 안전성을 높인다.
결론
🔎 코드의 가독성과 안전성을 높이기 위해서는 let을 사용하는 것이 좋다.
특히 블록 스코프의 장점을 활용하여 변수의 유효범위를 명확하게 제어할 수 있다는 점 !!!
++ let으로 주로 사용하고 자주 변하지 않을 값을 담을 때는 const로 지정해주자요 !!
js 관련해서 찾아본 자료들
https://youtu.be/fETYLCU2YYc?si=WD-zqi17V_vhW3eg
https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90
https://velog.io/@elma98/%EA%B8%B0%EC%88%A0-%EB%A9%B4%EC%A0%91-%EB%8C%80%EB%B9%84-var-let-const%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90%EA%B3%BC-Hoisting
https://july7k.tistory.com/184
