var, let, const 차이

var, let, const

FrontEnd 개발을 하면서 개발을 처음 시작할 땐 항상 var키워드를 사용하여 변수를 선언하면서 개발을 진행했었는데 요즘은 const키워드를 많이 쓰는 것 같다.

ES6 이후 let, const가 생겼다고 하지만 var가 완전히 사라진게 아니고 그렇다고 var를 사용하는 일은 없지만 모두 변수를 선언하고 사용하는 키워드라는 공통점이 있어 세개의 키워드가 어떤 차이가 있는지, 어떻게 사용되는지 정리하려고 한다.

 

키워드 알아보기

var

• Function-scoped: var로 선언된 변수는 현재의 실행 컨텍스트 내에서 사용 가능하며, 이는 보통 현재의 함수 블록을 의미한다. 즉, 함수 외부에서 선언된 var 변수는 전역 변수로 취급된다.
• Hoisting: var로 선언된 변수는 호이스팅(Hoisting) 된다. 이는 변수 선언이 해당 스코프의 가장 위로 끌어올려진 것처럼 동작한다는 것을 의미하지만, 할당은 원래 위치에서 이루어진다.
• 재선언 가능: 같은 스코프 내에서 동일한 이름의 변수를 다시 선언할 수 있다.

function testVar() {
  if (true) {
    var num = 10; // 여기에서 num을 선언
  }
  console.log(x); // 10 출력: 변수 num은 함수 스코프를 가지므로 if 블록 밖에서도 접근 가능하다
}
testVar();


console.log(five); // y는 호이스팅되었기 때문에 에러가 발생하지 않지만, 값이 할당되지 않았으므로 undefined가 출력된다
var five = 5;

 

let

• Block-scoped: let으로 선언된 변수는 블록 스코프를 가진다. 따라서, {} (중괄호)로 둘러싸인 블록 내에서만 사용 가능하다.
• Hoisting: let으로 선언된 변수도 호이스팅되지만, 선언 전에 변수에 접근하려고 하면 ReferenceError가 발생한다.
• 재선언 불가능: 같은 스코프 내에서 동일한 이름의 변수를 다시 선언하려고 하면 오류가 발생한다.

if (1 === 1) {
  let num = 20; // 여기에서 num을 선언
}
console.log(num); // num은 블록 스코프를 가지므로 if 블록 밖에서 접근 불가능하다

console.log(num2); // num2는 호이스팅되었지만 접근 불가능 하다
let num2 = 30;

 

const

• Block-scoped: const도 let처럼 블록 스코프를 가진다.
• Hoisting: const로 선언된 변수도 호이스팅된다. 그러나 선언 전에 변수에 접근하려고 하면 ReferenceError가 발생한다.
• 재선언 및 재할당 불가능: const로 선언된 변수는 초기에 할당된 값이 변경될 수 없으며, 또한 같은 스코프 내에서 동일한 이름의 변수를 다시 선언하려고 하면 오류가 발생한다.
• 상수: const는 상수를 의미하는 것처럼 보이지만, 객체나 배열과 같은 참조 타입의 변수는 내부 요소를 변경할 수 있다. 따라서 객체의 속성이나 배열의 요소는 변경 가능하다.

if (1 === 1) {
  const num = 40; // 여기에서 num을 선언
  num = 50; // const로 선언된 변수의 값을 변경할 수 없으며 에러가 출력된다
}
console.log(num); // num은 블록 스코프를 가지므로 if 블록 밖에서 접근 불가능하다

const obj = { name: '이름' };
obj.name = '네임'; // 객체의 속성 값은 변경할 수 있다.
obj = { name: 'Charlie' }; // const 변수 자체를 재할당하는 것이기 때문에 에러가 발생한다.

 

호이스팅(Hoisting)?

자바스크립트에서 변수와 함수 선언이 그들의 스코프의 상단으로 끌어올려지는 특성

 

예시

변수 호이스팅

console.log(num); // undefined
var num = 5;
console.log(num); // 5

위의 코드를 실행할 때 첫 번째 console.log(num)은 오류를 발생시키지 않는다. var num 선언이 스코프의 상단으로 끌어올려지기 때문인데, 이것이 호이스팅이다. 그러나 할당된 값 5는 호이스팅되지 않으므로 첫 번째 로그는 undefined를 출력한다.

 

함수 선언의 호이스팅

func(); // "Hello!"
function func() {
    console.log("Hello!");
}

함수 선언도 호이스팅 되는데, 이는 함수 선언 전에 함수를 호출할 수 있음을 의미한다.

 

let 및 const의 호이스팅

console.log(num); // ReferenceError: foo is not defined
let num = 5;

let과 const 선언도 호이스팅되지만, 변수가 선언되는 위치와 초기화되는 위치 사이의 코드 부분에서 변수에 접근하려고 하면 오류가 발생하게 되며, 이를 Temporal Dead Zone (TDZ)라고 한다.

 

TDZ ???

Temporal Dead Zone (TDZ)는 let과 const 변수 선언에만 존재하는 개념이다.

TDZ는 변수가 선언된 위치와 변수가 초기화되기 시작하는 위치 사이의 코드 영역을 일컫는데, 이 영역에서는 해당 변수를 참조하려고 시도하면 오류가 발생하게 된다.

 

동작 순서

1. 변수는 호이스팅되어 스코프의 시작 부분에서 메모리 공간을 할당받는다.
2. 이 변수는 그 위치에서 초기화가 시작되기 전까지 TDZ에 있게 된다.
3. 변수가 초기화되면 (즉, 값이 할당되면) TDZ에서 벗어나게 된다.

 

존재 목적

TDZ의 주요 목적은 변수에 대한 안전한 사용을 강조하고 예기치 않은 동작을 방지하는 것이다. var 선언의 경우, 변수를 선언하기 전에 참조하면 값이 undefined로 설정되지만, let과 const로 선언된 변수를 TDZ에 있을 때 참조하려고 시도하면 참조 오류가 발생하여 이런 실수를 더 명확하게 파악할 수 있다.

 

정리하면서

정리된 글을 통해 var는 함수 스코프를 가지며 호이스팅되지만, 초기화되지 않은 상태에서는 undefined로 출력된다.

반면에 let과 const는 블록 스코프를 가지며, 호이스팅은 발생하지만 초기화 전에 접근하려고 하면 에러가 발생하게 되고, const로 선언된 변수는 재할당이 불가능하지만, 객체나 배열과 같은 참조 타입의 경우 내부 요소는 변경할 수 있다.

호이스팅은 자바스크립트의 중요한 개념 중 하나이며, 이를 이해하면 예상치 못한 오류를 피할 수 있다. 하지만 되도록이면 변수와 함수를 사용하기 전에 선언하는 것이 좋다.

Temporal Dead Zone은 let과 const로 선언된 변수의 안전한 사용을 보장하기 위한 중요한 메커니즘이며, 이를 통해 프로그래머가 코드의 특정 영역에서 변수를 조기 참조하는 것을 방지하도록 도와준다.