질문2 var, let, const의 차이점은 무엇인가요?

초점: 다양한 변수 선언 방식과 스코프, 호이스팅에 대한 이해를 묻는 질문입니다.

 

대답:

 

var는 함수 스코프를 가지며 호이스팅 시 변수 선언만 최상단으로 끌어올려집니다.

선언 전에 undefined로 되어있어 접근이 가능합니다.

반면, let과 const는 블록 스코프를 가지고, 호이스팅되지만 '일시적 사각지대'에 빠져 선언 전에는 접근할 수 없습니다.

 

let은 변수 재할당이 가능하지만, const는 초기 할당 이후 변수의 재할당을 허용하지 않습니다.

그러나 const로 선언된 객체 내부의 속성 변경은 가능합니다.

 

(※ 호이스팅은 함수와 변수를 코드 실행전에 메모리에 저장하는 것. )

---

상세설명1.

var은 함수 스코프이다. 함수에서의 var변수 선언은 외부에서의 사용을 제한할 수 있지만

if문 같은 블록스코프에서의 선언 때는 바깥에서의 사용 제한이 불가하다.

function functionScopeExample() {

  var x = "I am inside a function";

  console.log(x); // "I am inside a function"

}

 

functionScopeExample();

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

 

if (true) {

  var x = "I am inside an if statement";

}

console.log(x); // "I am inside an if statement"

 

 

const, let은 블록 스코프이다.

함수든, if문 같은 블록스코프이든 안에서 선언한 것을 바깥에서 사용할 수 없다.

---

상세설명2.

호이스팅은 함수와 변수를 코드 실행전에 메모리에 저장하는 것.

그런데 var은 변수선언이 최상단에 끌어올려지니, 그 변수선언 이전에 함수에 그 변수를 넣어 사용해도 사용이 안됨.

x를 선언하기 전에 접근해도 ReferenceError가 발생하지 않고 undefined가 출력됩니다.

오류 검출이 안됨.

console.log(x); // undefined

var x = 5;

console.log(x); // 5

 

 

---

let과 const로 선언된 변수도 호이스팅되지만, var와는 다르게 "일시적 사각지대(Temporal Dead Zone, TDZ)"에 빠집니다. TDZ는 변수가 선언되기 전의 구간을 말하며, 이 구간에서 변수에 접근하려고 하면 ReferenceError가 발생합니다.

아래와 같은 에러를 발생시켜준다. 코드 오류를 잘 찾아줌.

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

let y = 5;

console.log(y); // 5