JavaScript - 변수, 호이스팅, TDZ 그리고 var, let, const

안녕하세요! 오늘은 웹 개발의 필수 언어인 JavaScript의 기본 요소 중 하나인 '변수'에 대해 이야기해볼까 합니다. 특히 JavaScript에서 제공하는 세 가지 변수 선언 방식인 var, let, const의 특성에 초점을 맞추어 볼 것입니다.

1. JavaScript와 변수의 세계

JavaScript는 웹 브라우저에서 동작하는 유일한 프로그래밍 언어로, 웹 개발에 있어 핵심적인 역할을 합니다. 이 중 변수는 프로그래밍의 기본 구조를 이루는 요소로, 데이터를 저장하고 참조하는데 필요한 고유한 이름을 가지고 있습니다.

그렇다면, JavaScript에서 제공하는 var, let, const 중 어떤 것을 사용해야 할까요? 상황에 따라 적절하게 선택하여 사용하면 됩니다. 값이 변경되지 않는 상수를 선언할 때는 const를, 값이 변할 수 있는 변수를 선언할 때는 let을, 호이스팅을 이용해야 할 때는 var를 사용합니다.

2. 변수 선언: var, let, const

그럼 이제 JavaScript에서 제공하는 각 변수 선언 방식에 대해 좀 더 자세히 살펴보겠습니다.

2.1 var와 호이스팅

var 키워드를 사용하여 변수를 선언하면, '호이스팅(hoisting)'이라는 현상이 발생합니다. 호이스팅은 JavaScript에서 var로 변수를 선언하면, 그 변수의 선언부가 현재 스코프의 최상단으로 끌어올려지는 현상을 말합니다.

console.log(name); // undefined
var name = "JavaScript";
console.log(name); // "JavaScript"

위 코드에서 볼 수 있듯이, var로 선언된 변수는 선언되기 전에 접근할 수 있지만, 그 값은 undefined입니다.

2.2 let과 TDZ

다음으로 let에 대해 알아보겠습니다. let 키워드를 사용하여 변수를 선언하면, 'Temporal Dead Zone(TDZ)'라는 개념이 등장합니다. 이는 let으로 선언된 변수가 초기화되기 전까지의 구간을 말하며, 이 시간 동안 변수에 접근하려고 하면 ReferenceError가 발생합니다.

console.log(name); // ReferenceError
let name = "JavaScript";
console.log(name); // "JavaScript"

2.3 const의 특징

마지막으로 const에 대해 살펴보겠습니다. const는 상수를 선언하는 키워드로, 한 번 값이 할당된 후에는 그 값을 변경할 수 없습니다. 정말로 값을 변경할 수 없을까요? 네, 그렇습니다. const 키워드로 선언된 변수는 한 번 값이 할당된 후에는 그 값을 변경할 수 없습니다.

const name = "JavaScript";
name = "JS"; // TypeError
console.log(name); // "JavaScript"

const로 선언된 변수에 다른 값을 재할당하려고 하면, TypeError가 발생합니다.

3. 마무리: 변수 선언의 best practice

JavaScript에서 변수를 사용할 때 주의해야 할 점은 무엇일까요? 변수를 선언할 때는 해당 변수가 어떤 목적으로 사용되는지, 그리고 그 변수의 값이 변경될 수 있는지를 먼저 고려해야 합니다. 또한, var, let, const 각각의 특징을 잘 이해하고 사용하는 것이 중요합니다.

오늘은 JavaScript의 변수와 그 선언 방식인 var, let, const에 대해 알아보았습니다. 개발을 하면서 이러한 개념을 이해하고 활용하는 것은 매우 중요하므로, 잘 기억해두시기 바랍니다.

추가적으로 더 알고 싶은 내용이 있으면 문서를 확인해보시고 다른 개발에 대한 내용을 보고 싶으시면 제 블로그 글을 확인 해주세요~!

다음 시간에는 JavaScript의 다른 주제에 대해 다루도록 하겠습니다. 감사합니다!