[JS] var vs let vs const 선택 방법

 

 

들어가며

JavaScript는 유연하고 강력한 프로그래밍 언어로, 다양한 환경에서 널리 사용되고 있습니다. 하지만 이러한 유연성은 때로는 개발자들에게 혼란을 줄 수 있습니다. 특히 변수를 선언하는 방법이 여러 가지(var, let, const)로 제공되면서, 각 키워드의 차이를 이해하지 못하면 의도치 않은 버그가 발생할 수 있습니다.

이 글에서는 JavaScript의 변수 선언 방식인 var, let, const의 차이를 이해하고, 언제 어떤 키워드를 선택해야 할지 명확히 정리해 보겠습니다. 올바른 변수 선언은 더 안전하고 유지보수하기 쉬운 코드를 작성하는 데 중요한 첫걸음이기 때문입니다.

함께 차근차근 알아보시죠! 🚀

 

 

 

기본 개념

JavaScript에서 변수를 선언할 때 사용할 수 있는 키워드는 var, let, const입니다. 각 키워드는 특정한 동작 방식과 특징을 가지고 있으며, 이를 이해하는 것이 올바른 변수 선언의 첫걸음입니다.

 

1. var 

• ES6 이전까지 사용한 유일한 변수 선언 키워드
• 함수 스코프를 따릅니다.
• 같은 이름의 변수를 재선언할 수 있습니다.
• 변수 선언이 코드 실행 이전에 처리되는 호이스팅 현상이 발생합니다.

function example() {
    console.log(x); // undefined (호이스팅)
    var x = 10;
    console.log(x); // 10
}
example();

 

2. let

 

• 블록 스코프를 따릅니다.
• 재선언은 불가능하지만 재할당은 가능합니다.
• **TDZ(Temporal Dead Zone)**의 영향을 받아 선언 전에 접근하면 에러가 발생합니다.

{
    console.log(y); // ReferenceError (TDZ)
    let y = 20;
    console.log(y); // 20
}

 

3. const

• 블록 스코프를 따릅니다.
• 재선언과 재할당이 모두 불가능합니다.
• 선언과 동시에 초기화가 필요합니다.

{
    const z = 30;
    console.log(z); // 30
    z = 40; // TypeError (재할당 불가)
}

 

키워드	스코프	재선언	재할당	초기화 필요	TDZ
var	함수 스코프	O	O	X	X
let	블록 스코프	X	O	X	O
const	블록 스코프	X	X	O	O

 

 

 

어느정도 개념을 이해하셨나요??

아마 TDZ 개념에 대해 이해하기 어려웠을 것이라고 생각합니다.

이 개념은 실행 컨텍스트에 대한 개념이 필요해서 나중에 다루도록 하고 간략하게 설명만 하고 넘어가겠습니다.

자바스크립트는 코드를 읽어 들어가기 전에 const, let, var와 같은 변수들을 먼저 선언하고 들어갑니다.(값 할당x)

이때 var같은경우에는 undefined로 저장을 하고, uninitialized로 저장을 합니다. 그래서 var는 에러가 발생하지 않고, let과 const 같은 경우에는 에러가 발생하게 됩니다.

---

실제 선택 기준

1. const를 기본으로 사용하라

• 상수 선언을 통해 변수의 불필요한 변경을 방
• 코드의 의도를 명확히 표현하여 유지보수에 용이
• 대부분의 변수는 선언 이후 값이 변경되지 않으므로 const를 사용하는 것이 권장됩니다.

+ 참고로 let 대신 사용하면 메모리를 아낀다고 생각할 수 있는데 그런 것은 아닙니다!

const PI = 3.14; // 상수 값 선언
const userName = "John";

 

 

2. 값이 변경되는 경우 let을 사용하라

• 변수 값이 변경될 필요가 있는 경우에만 let을 사용
• 예를 들어, for, 조건문에서 사용되는 카운터 변수 등이 이에 해당

+ 먼저 const를 지정한 후에 값이 변경될 사안이 있으면 let으로 바꾸는게 현명합니다!

let count = 0; // 값이 변경될 변수
for (let i = 0; i < 10; i++) {
    count += i;
}
console.log(count); // 45

 

3. var는 사용하지 말라

• 함수 스코프와 호이스팅으로 인해 예기치 않은 동작이 발생할 수 있음
• 기존 코드 유지보수 시 외에는 사용하지 않는 것이 권장됨

function example() {
    if (true) {
        var x = 10; // 블록 스코프가 적용되지 않음
    }
    console.log(x); // 10 (블록 밖에서도 접근 가능)
}
example();

 

 

 

---

 

 

 

마지막

참고자료 남겨놓고 사라지겠습니다..!

 

• Var, Let, and Const – What's the Difference? (FreeCodeCamp):
  • https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/
  • 초보자도 쉽게 이해할 수 있도록 설명한 훌륭한 자료입니다.
• ECMAScript 6 - Let and Const in Depth:
  • https://exploringjs.com/es6/ch_variables.html
  • let과 const의 내부 동작에 대한 심화된 내용을 다룹니다.