JavaScript 변수

자바스크립트에서 변수를 선언할 때 var, let, const 키워드를 사용할 수 있다. 이 세 가지 키워드는 변수의 범위, 호이스팅, 재할당 가능성에 있어서 서로 다르다. 아래에서 이들의 주요 차이점에 대해 알아보자.

🔍Var

✔ 범위

: 함수 내부에서 선언되면 해당 함수 내부 어디서든 접근할 수 있다. 함수 밖에서 선언된 경우 전역 변수가 된다.

✔ 호이스팅

: 선언문 이전에도 변수를 참조할 수 있으나 선언 이전에는 undefined 로 초기화된다.

✔ 재할당

: 재할당이 가능하다.

🔍let

✔ 범위

: 블록 범위를 가진다. 즉, 변수는 선언된 블록(함수, if, loop 등) 내에서만 접근 가능하다.

✔ 호이스팅

: 호이스팅은 되지만 선언된 블록의 시작부터 선언문까지의 구간에서는 일시적 사각지대에 빠져 사용할 수 없다.

✔ 재할당

: 재할당이 가능하다.

🔍const

✔ 범위

: 블록 범위를 가진다.

✔ 호이스팅

: let과 같이 호이스팅되며 선언전에는 TDZ에 빠진다.

✔ 재할당

: 재할당이 불가능하다. 즉, 초기 선언 시 할당된 값이 변경될 수 없다. 그러나 객체나 배열을 const로 선언했을 경우 객체의 속성이나 배열의 요소는 변경할 수 있다.

일반적으로 var는 호이스팅과 함수 범위로 인해 예상치 못한 오류를 발생시킬 수 있어 현대 자바스크립트 개발에서는 권장되지 않는다. 대부분의 경우 const를 사용하여 값을 재할당할 필요가 없음을 명시하고, 필요한 경우에만 let을 사용하는 것이 좋다.

❔ 호이스팅
=> 자바스크립트에서 변수 선언과 함수 선언을 코드의 상단으로 끌어올리는 것을 의미한다. 이는 코드 실행 전에 자바스크립트 엔진에 의해 처리되므로 코드 상의 위치와 상관없이 선언된 변수나 함수를 사용할 수 있게 한다. 호이스팅은 선언 자체만 끌어올리고 초기화나 할당은 끌어올려지지 않는다.

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

❔ 일시적 사각지대(Temporal Dead Zone, TDZ)
=> let과 const로 선언된 변수는 호이스팅이 발생하지만, 코드 실행 시 변수 선언문에 도달할 때가지 접근할 수 없는 상태가 된다. 이를 일시적 사각지대라고 한다. TDZ는 변수를 안전하게 사용할 수 있도록 설계된 개념으로, 초기화되지 않은 변수에 접근하여 발생할 수 있는 오류를 방지하기 위해 존재한다.

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 5;

호이스팅을 이해하면 변수와 함수가 코드 내 어디에 선언되었는지에 상관없이 접근 가능하다는 것을 알 수 있다. 그러나 이로 인해 불분명한 코드가 작성될 수 있으므로, 가능한 선언과 함께 초기화를 진행하는 것이 좋다. let과 const의 TDZ는 변수 사용 시 오류를 사전에 방지할 수 있는 좋은 방법을 제공한다. 변수를 사용하기 전에 반드시 선언되어야 한다는 것을 강제하여 더욱 안전하고 예측 가능한 코드를 작성하게 돕는다.