🎯 호이스팅(Hoisting)으로 선언 순서에 상관없이 코드를 더 유연하게 작성할 수 있도록 하기 위해 생겨났습니다.

호이스팅

변수가 할당되기 전에도 참조가 가능한 상태로 모든 선언문이 Scope의 선두로 끌어올려진 현상을 뜻합니다.

Hoisting : 끌어 올리기; 들어올려 나르기.

var

선언, 초기화 → 할당

선언과 초기화가 동시에 되어 메모리에 올라가고, 값 할당은 나중에 실행됩니다.

• 초기화 전 접근 가능

• 재할당 가능

• 선언만 해도 변수 생성 가능

var 단점

1. var 키워드 생략 가능

변수 선언 시 var 키워드를 생략할 수 있어 의도치 않게 전역 변수가 생성될 수 있습니다.

one = 1; 
console.log(one); // 1

2. 중복 선언 가능

동일한 변수명을 여러 번 선언할 수 있습니다.

var num = 1;
var num = 2;
console.log(num); // 2

3. 변수 호이스팅

선언된 변수가 코드 상단으로 끌어올려지지만 초기값이 undefined로 설정됩니다.

console.log(num); // undefined
var num = 10;
console.log(num); // 10

4. 전역변수화

함수나 블록 내에서 선언된 var도 전역 변수로 취급되며, 의도치 않게 다른 코드에서 값이 변경될 수 있습니다.

function hoistingExample() {
  for (var i = 0; i < 3; i++) {
    console.log(i); // 0, 1, 2
  }
  console.log(i); // 3, 2에서 i++가 된 3인 상태에서 내려온 전역변수 i가 for문 밖에서 호출된 것
}
hoistingExample();

⚠️ var의 단점으로 인해 ES6 이후로 사용을 지양하고, const, let을 권장한다.

const

선언 → 초기화 → 할당

• 블록 스코프: 선언된 블록 내부에서만 접근 가능

• 초기화 전 접근 불가 (TDZ에 의해 제한)

• 값 수정 불가 (상수 변수)

• 선언과 동시에 값 할당 필수

let

선언 → 초기화 → 할당

• 블록 스코프: 선언된 블록 내부에서만 접근 가능

• 초기화 전 접근 불가 (TDZ에 의해 제한)

• 재할당 가능

• 선언만 해도 변수 생성 가능

var 🆚 const 🆚 let

특성	var	let	const
스코프	함수 스코프	블록 스코프	블록 스코프
호이스팅	O (초기값: undefined)	O (TDZ로 초기화 전 접근 불가)	O (TDZ로 초기화 전 접근 불가)
재선언	O	X	X
재할당	O	O	X
초기화	초기화 없이 선언 가능	초기화 없이 선언 가능	선언과 동시에 초기화 필요
일반적인 사용 목적	과거 코드 호환성	변수 선언	상수 선언 및 불변 변수

참고 링크
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/var
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let
https://www.w3schools.com/js/js_es6.asp