let 과 var 의 차이 - window 속성에서 차이 중요

이 두 키워드는 변수의 스코프(scope)와 호이스팅(hoisting) 동작 방식에서 중요한 차이점을 가지고 있습니다. 

var - 함수 스코프

함수 스코프(Function Scope):

var로 선언된 변수는 함수 스코프를 가집니다. 즉, 함수 내에서 선언된 변수는 함수 전체에서 유효합니다.

function example() {
  if (true) {
    var x = 5;
  }
  console.log(x); // 5, 블록{} 외부에서 접근 가능
}
example();

 

호이스팅(Hoisting):

var로 선언된 변수는 선언이 변수의 정의 전에도 사용될 수 있습니다. 이는 변수 선언이 실제 코드의 최상단으로 끌어올려지는 것처럼 동작하기 때문입니다.

console.log(x); // undefined 에러는 아님
var x = 5;
console.log(x); // 5

 

중복 선언 가능:

같은 스코프 내에서 var로 변수를 중복 선언해도 에러가 발생하지 않습니다.

var x = 5;
var x = 10;
console.log(x); // 10

 

let - 블록 스코프  - ES6(ECMAScript 2015) 에서 도입

블록 스코프(Block Scope):

let으로 선언된 변수는 블록 스코프를 가집니다. 즉, 블록({}) 내에서 선언된 변수는 해당 블록 내에서만 유효합니다.

function example() {
  if (true) {
    let y = 5;
    console.log(y); // 5
  }
  console.log(y); // ReferenceError: y is not defined 에러 발생
}
example();

호이스팅(Hoisting):

let으로 선언된 변수도 호이스팅되지만, 변수가 선언되기 전에는 사용할 수 없습니다. 이를 "Temporal Dead Zone(TDZ)"이라고 합니다.

console.log(z); // ReferenceError: Cannot access 'z' before initialization
let z = 5;
console.log(z); // 5

중복 선언 불가:

같은 스코프 내에서 let으로 변수를 중복 선언하면 에러가 발생합니다.

let a = 5;
let a = 10; // SyntaxError: Identifier 'a' has already been declared 에러

let b = 5;
b = 10; // 바른 사용 예

 

중요

모든 전역 JavaScript 객체, 함수 및 변수는 window 객체의 속성으로 간주됩니다. 그러나 두 속성은 다음과 같은 차이가 있습니다.

 

var person = "John";
consle.log(person) // 'John'
console.log(window.person) //'John'


let name = "Park";
console.log(name) // "Park"
console.log(window.name) // undefined