부족한 점이 있을 수 있습니다만 너그럽게 읽어주시면 감사하겠습니다.
혹시 틀린 점이나 수정해야 할 부분이 있다면 댓글로 남겨주세요.🙏
ES6에서 let과 const가 소개되면서 개발자들은 필요에 맞게 변수를 정의할 수 있게 되었습니다. 먼저 세가지 변수의 차이점을 간단하게 살펴보겠습니다.
기본 차이점
var
JavaScript에서 var로 선언된 변수는 함수 스코프에 종속 됩니다. for문과 if문 안에서 선언이 되었다 할지라도 이 변수를 for문 밖에서도 사용할 수 있습니다. 두가지 예시 코드를 통해 살펴보겠습니다.
for (var i = 0; i < 100; i++) {
var a = "나는 변수";
}
console.log(a)
// 나는 변수위 코드를 보게 되면for문 밖에서도 변수에 접근에 가능합니다.
function printFunc(){
var b = "나는 변수";
console.log(b);
}
printFunc();
// 나는 변수
console.log(b);
// ReferenceError: b is not defined하지만 function 밖에서 isFunctionScoped에 접근하게 되면 에러가 발생하게 됩니다.
let
let으로 선언된 변수는 블록 스코프로 종속 됩니다. 즉, 변수가 선언된 하위 블록 안에서만 사용할 수 있습니다.
let a = "전역 변수";
if (a === "전역 변수") {
let a = "지역 변수";
console.log(a); // 지역 변수
}
console. log(a); // 전역 변수
위 코드에서 보는 것과 같이 블록 내에서 새로운 let 변수를 선언했지만 블록 밖의 변수의 값은 변하지 않는 것을 확인할 수 있습니다.
const
let과 마찬가지로 const로 선언된 변수는 블록 스코프로 종속이됩니다. 하지만 차이점은 재할당을 통해 값을 변경할 수 없고 재선언 될 수도 없다는 점입니다.
const a = "나는 const 변수"
a = "나"
// TypeError: Assignment to constant variable.위 코드와 같이 재할당을 하려고 할때 에러를 발생시키게 됩니다.
const가 객체일 때
const burger = {
name: '클래식 버거',
price: 7900,
};
burger.price = 9000;
console.log(burger.price); // 9000이 경우에 변수 전체를 재할당하는 것이 아니라 속성 중 하나만 변경하는 것이기 때문에 에러가 발생하지 않는다. 괜찮음!
(속성이 변경되지 않게 하려면 Object.freeze() 메서드를 사용하면 된다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze)
일시적 비활성 구역(TDZ)
TDZ(Temporal Dead Zone)에 대해서 살펴보도록 합시다.
코드가 실행이 될때, var는 정의되기 전에 변수에 접근이 가능합니다. 하지만 값에는 접근할 수 없기 때문에 일시적으로 undefined를 갖게 됩니다.
let과 const는 정의가 되기 전에 변수에 접근하려고 하면 ReferenceError가 발생하게 됩니다.
예시를 통해 알아보겠습니다.
console.log(a);
var a = "var변수";위 두줄 을 실행해보면 "var변수"가 출력됩니다.
console.log(b);
let b = "let변수";하지만 위 코드를 실행한다면 ReferenceError 가 발생합니다.
세 변수 타입 모두 호이스팅의 대상이다.
세 변수 모두 코드가 실행되기 전에 처리됩니다.
var가 가지는 가장 큰 차이점은 정의되기 전에 접근할 수 있다는 점입니다. 반면 let과 const는 변수가 선언될 때까지 TDZ에 있게 됩니다. 그러므로 해당 변수에 접근하려고 할때 에러가 발생하기 때문에 디버깅 측면에서도 var 보다는 좋을 수 있습니다.
그래서 무슨 타입의 변수를 써야하는가?🤔
장단점이 존재하고 정답은 없는 것 같습니다.
개인적으로는 const로 변수를 선언하고 재할당이 필요한 경우에만 let을 사용하고 있습니다. 하지만 실제로 변수가 정의 및 선언되는 동작방식에대해서 알고있다면 필요에 맞게 사용할 수 있을 것 같습니다.
글 중간에 스코프, 호이스팅 개념이 나왔는데 다음에 자세히 다뤄볼 수 있도록 하겠습니다.
읽어주셔서 감사합니다😀
