let, const 그리고 var

1.  let

• let은 블록 레벨 스코프를 갖는다. 즉 let으로 선언된 변수는 블록 "{}" 내에서만 접근 할 수 있다.
• let으로 선언된 변수는 호이스팅이 발생하지만 변수가 선언되기 전에 접근하려고 하면 ReferenceError가 뜨게 된다. 이를 임시적 사각 지대(Temporal Dead Zone, TDZ)라고 부른다. (변수 선언과 초기화가 분리되어 있다.)
• let으로 선언된 변수는 재할당이 가능하지만, 재선언은 불가능하다.
• 예시 코드

console.log(name); // ReferenceError: name is not defined

{
  console.log(name); // ReferenceError: Cannot access 'name' before initialization
  let name = "John";
  console.log(name); // 출력: John
}

console.log(name); // ReferenceError: name is not defined

• 위의 코드처럼 name 변수는 블록 스코프를 가지므로 선언된 블록 "{}" 내에서만 접근할 수 있다. name 변수가 선언되기 전에 접근하려고 하면 ReferenceError: Cannot access 'name' before initialization 이런 오류가 발생하는데 바로 임시적 사각 지대에 해당합니다. name이라는 변수가 호이스팅되어 메모리에 할당되었지만, 초기화되지 않은 상태이다.
• 위와 같이 let을 쓰면 변수 사용에 엄격한 제약을 부여해서 실수를 줄일 수 있게 도와준다. 
• 호이스팅은 다음 글에서 다루겠다!

 

2. Const

• const도 블록 레벨 스코프를 갖는다. let과 동일하게 선언된 블록"{}" 내에서만 접근할 수 있다.
• const로 선언된 변수도 호이스팅이 발생하지만, let과 마찬가지로 변수가 선언되기 전에 접근하려고 하면 ReferrenceError가 발생한다. 임시적 사각 지대(TDZ)가 let처럼 존재한다.
• const로 선언된 변수는 재할당 및 재선언이 불가능하다. 따라서 선언과 동시에 초기화가 필요하며, 변하지 않는 상수 값을 저장할 때 사용된다.
• 예시 코드

console.log(age); // ReferenceError: Cannot access 'age' before initialization

const age = 30;

console.log(age); // 출력: 30

 

 

3. Var

• Var는 let, const와 다르게 함수 레벨 스코프를 갖는다. 즉, var로 선언된 변수는 함수내에서 어디서든 접근할 수 있다. 함수 외부에서 선언된 경우 전역변수가 된다.
• Var로 선언된 변수는 호이스팅이 발생한다. 변수 선언이 함수의 맨 위로 올라가지만 값 할당은 원래 위치에서 이루어진다. 따라서 선언 전에 변수에 접근하면 undefined 값을 얻게 된다. (변수 선언과 초기화가 동시에 이루어진다.)
  • let, const와 다르게 변수에 메모리 공간을 할당하고 기본값을 undefined로 설정한다. 
• var로 선언된 변수는 재할당 및 재선언이 가능하다.

console.log(greeting); // 출력: undefined

var greeting = "Hello, World!";

console.log(greeting); // 출력: Hello, World!

 

4. 왜 요즘 자바스크립트에서 var를 쓰지 않을까?

• ES6(ECMAScript 2015)에서 도입된 let과 const가 var보다 더 나은 스코프 및 호이스팅 관리를 제공하기 때문이다. 
• let과 const를 사용하면 코드의 가독성이 높아지고, 예기치 않은 버그를 방지할 수 있다.
• var의 문제점
  • 함수 레벨 스코프: var로 선언된 변수는 함수 레벨 스코프를 가지기 때문에, 블록 내에서만 유효한 변수를 만들기 어렵다. 이로 인해 변수가 예상치 못한 범위에서 접근되거나 수정될 가능성이 높다. 
  • 호이스팅: var로 선언된 변수는 호이스팅되어 변수 선언이 함수의 맨 위로 올라가게 된다. 이 때문에 변수가 선언되기 전에 사용되면 undefined 값을 반한화게 되어, 의도치 않은 결과를 초래한다. 
  • 재선언 허용: var로 선언된 변수는 같은 스코프 내에서 재선언이 가능하다. 이는 실수로 동일한 이름의 변수를 여러 번 선언하는 경우 덮어쓰여서 버그를 발생할 수 있다.