var let 차이와 특성

let을 사용하는 것이 요즘 표준이 된 이유는, var가 가진 예측하기 어려운 문제점들을 해결하기 위해서입니다. 핵심적인 차이는 '스코프(Scope, 유효 범위)'와 '호이스팅(Hoisting)'이라는 두 가지 개념에 있습니다.

---

var의 문제점: 너무 넓은 활동 범위와 이상한 행동

var는 초창기 자바스크립트부터 존재했던 변수 선언 방식이지만, 몇 가지 고질적인 문제를 가지고 있습니다.

1. 함수 스코프 (Function Scope)

var로 선언된 변수는 함수 전체에서 유효합니다. {} 블록(if, for, while 등)을 무시하고 밖으로 빠져나가는 특징이 있어, 개발자의 의도와 다르게 동작할 때가 많습니다.

• 비유: var는 '유령' 같아서, 자기가 선언된 방({})을 마음대로 드나들며 건물 전체(함수)를 돌아다닙니다.

👎 var의 문제점을 보여주는 예시

function testVar() {
  for (var i = 0; i < 5; i++) {
    console.log(i); // 0, 1, 2, 3, 4 잘 출력됨
  }
  console.log("루프가 끝난 후 i:", i); // 루프가 끝났는데도 i가 살아있음! 결과: 5
}

testVar();

for 문 안에서만 사용하려고 만든 i 변수가 루프가 끝난 후에도 살아남아 값을 가지고 있습니다. 이는 의도치 않은 버그의 원인이 됩니다.

2. 호이스팅 (Hoisting)

var로 선언된 변수는 해당 스코프의 가장 위로 '끌어올려지는' 것처럼 동작합니다. 하지만 선언만 끌어올려지고 할당은 그 자리에 남아있어, 변수를 선언하기도 전에 사용하는 이상한 코드가 가능해집니다.

👎 var의 이상한 호이스팅 동작

console.log(myVar); // 에러가 나는 대신 'undefined'가 출력됨
var myVar = "Hello";
console.log(myVar); // "Hello"

코드는 아래와 같이 해석됩니다.

var myVar; // 선언이 맨 위로 끌어올려짐 (호이스팅)
console.log(myVar); // undefined
myVar = "Hello"; // 할당은 원래 자리에
console.log(myVar); // "Hello"

---

let의 해결책: 예측 가능한 행동과 명확한 규칙

ES6(2015년)에서 도입된 let과 const는 var의 이런 문제점들을 해결하기 위해 등장했습니다.

1. 블록 스코프 (Block Scope)

let으로 선언된 변수는 자신이 선언된 {} 블록 안에서만 유효합니다. 블록을 벗어나면 바로 사라지기 때문에, 변수의 생명주기를 예측하고 제어하기가 매우 쉬워집니다.

• 비유: let은 '모범생' 같아서, 자신이 선언된 방({})을 절대 벗어나지 않습니다.

👍 let의 명확한 스코프

function testLet() {
  for (let i = 0; i < 5; i++) {
    console.log(i); // 0, 1, 2, 3, 4 잘 출력됨
  }
  // console.log("루프가 끝난 후 i:", i); // 바로 에러 발생! (ReferenceError: i is not defined)
}

testLet();

i는 for 문 블록 안에서만 존재하므로, 외부에서 접근하면 명확한 에러를 발생시켜 실수를 방지합니다.

2. 호이스팅이 없는 것처럼 동작 (TDZ)

let도 호이스팅이 되지만, **'일시적 사각지대(Temporal Dead Zone, TDZ)'**라는 개념이 적용됩니다. 이는 변수가 선언된 라인에 코드가 도달하기 전까지는 해당 변수에 접근할 수 없도록 막는 규칙입니다.

👍 let의 안전한 동작

 

// console.log(myLet); // 명확한 에러 발생! (ReferenceError: Cannot access 'myLet' before initialization)
let myLet = "Hello";
console.log(myLet); // "Hello"

undefined라는 애매한 값 대신, 초기화 전에 접근할 수 없다는 명확한 에러를 보여주므로 버그를 즉시 찾을 수 있습니다.

---

결론: 왜 let을 사용해야 하는가?

구분	var	let
스코프(Scope)	함수 스코프 (블록 {}을 무시함)	블록 스코프 (블록 {} 안에서만 유효함)
호이스팅	선언만 위로 끌어올려져 undefined 출력	호이스팅 되지만 TDZ 때문에 선언 전에 접근 시 에러 발생
재선언	같은 이름으로 여러 번 선언 가능	같은 이름으로 재선언 불가능
결과	예측이 어렵고 버그 발생 가능성 높음	예측 가능하고 안정적이며 실수를 방지해 줌

 

이러한 이유로 현대 자바스크립트 개발에서는 더 이상 var를 사용하지 않는 것이 표준적인 규칙이 되었습니다.

• let: 값이 변경될 수 있는 변수를 선언할 때 사용합니다.
• const: 값이 변경되지 않는 상수(상수)를 선언할 때 사용하며, let보다 우선적으로 사용하는 것을 권장합니다.

---

추가 학습 

C, Java처럼 자료형을 명시하지 않는 JavaScript, 정말 비효율적인 걸까?

프로그래밍을 처음 시작할 때, C나 Java 같은 언어를 배우면 변수를 선언할 때마다 int, double, String 등 자료형을 명시해야 합니다. 이는 메모리를 효율적으로 관리하기 위한 필수적인 과정이라고 배우죠. 그런데 자바스크립트는 let이나 const만 사용해서 변수를 선언합니다.

"어? 그럼 메모리 낭비가 심한 비효율적인 언어가 아닌가?"

이러한 의문은 매우 합리적입니다. 결론부터 말씀드리면, 자바스크립트는 메모리 효율성보다는 개발의 편의성과 유연성을 우선시한 설계 철학을 가지고 있기 때문입니다.

1. 유연성을 위한 '동적 타이핑' 🤝

C나 Java는 변수에 할당될 데이터의 크기를 미리 정해놓는 정적 타이핑(Static Typing) 방식입니다. 마치 가구를 놓을 자리에 미리 '이곳은 소파 자리'라고 표시해두는 것과 같습니다. 이 자리에 다른 가구(예: 테이블)를 놓으려면 자리를 다시 정해야 합니다.

반면, 자바스크립트는 **동적 타이핑(Dynamic Typing)**을 사용합니다. 변수를 선언할 때 let이나 const로 일단 '가구를 놓을 수 있는 공간'을 확보해두고, 그 공간에 숫자, 문자열, 객체 등 어떤 종류의 가구든 자유롭게 놓을 수 있습니다.

웹 환경은 사용자의 입력이나 서버의 응답 등 어떤 종류의 데이터가 들어올지 예측하기 어려운 경우가 많습니다. 이러한 상황에서 동적 타이핑은 개발자가 유연하게 코드를 작성할 수 있도록 돕습니다.

---

2. 개발 편의성을 위한 선택 🚀

자바스크립트는 1995년 웹페이지에 간단한 동적 기능을 추가하기 위해 단 10일 만에 만들어진 언어입니다. 당시의 목표는 전문 프로그래머가 아니더라도 웹 디자이너나 기획자가 쉽고 빠르게 코드를 작성할 수 있도록 하는 것이었습니다.

만약 변수 하나를 선언할 때마다 어떤 자료형을 써야 할지 고민해야 했다면, 웹 개발의 진입 장벽은 훨씬 높아졌을 것입니다. 자바스크립트는 이러한 고민을 없애고, 개발자가 '무엇을 만들지'에만 집중할 수 있도록 설계된 것입니다.

---

3. 성능은 자바스크립트 엔진이 해결한다! ⚙️

물론, 초창기에는 이러한 동적 타이핑이 성능 저하를 야기했습니다. 그러나 오늘날의 자바스크립트 엔진(예: Chrome의 V8, Firefox의 SpiderMonkey)은 매우 정교하게 발전했습니다. 이 엔진들은 JIT(Just-In-Time) 컴파일러와 같은 기술을 사용해 코드가 실행될 때 변수의 타입을 추론하고, 최적화된 방식으로 메모리를 할당합니다.

결과적으로, 개발자가 직접 메모리를 관리하는 수고를 덜면서도, 대부분의 웹 애플리케이션에서는 성능 저하를 거의 느끼지 못할 만큼 효율적으로 동작하게 되었습니다.

---

결론: 시대의 요구에 맞춰 진화한 언어

자바스크립트의 설계는 C나 Java처럼 극한의 메모리 효율성을 추구하지 않습니다. 대신 개발 속도와 유연성이라는 웹 환경의 요구사항을 충족하는 데 집중했습니다. 이 독특한 설계 철학 덕분에 자바스크립트는 빠르게 웹의 표준 언어로 자리 잡을 수 있었습니다.

물론, 대규모 프로젝트에서는 이러한 동적 타이핑이 오히려 버그를 유발하고 유지보수를 어렵게 만드는 단점이 부각되기도 합니다. 이러한 문제를 해결하기 위해 등장한 것이 바로 **타입스크립트(TypeScript)**입니다. 타입스크립트는 자바스크립트에 정적 타이핑 기능을 추가하여, 두 가지 장점을 모두 취하려는 현대적인 시도입니다.