[JS] var, let, const 비교해보기! (Feat. 호이스팅)

 

var, let, const는 크게 변수의 범위(스코프) / 중복 선언 / 호이스팅으로 구분하여 비교할 수 있다.

---

변수의 범위로 보는 차이점

 

1. var는 함수 스코프(function scope)를 가지는 변수이다. 즉, 변수를 선언한 함수 내에서만 유효하고, 함수 밖에서는 접근할 수 없다.

    함수 바깥에서 선언하면 전역 변수(global variable)로 취급된다.

     * 함수 스코프에서만 가지므로 if문이나 for문 등에서는 적용이 되지 않는다.

function sayHi () { 
  var say = 'Hi';
  console.log(say);  // Hi 출력
}
console.log(say);  // Error 발생

if(true) {
  var title = 'JavaScript';
  console.log(title);  // JavaScript 출력
}
console.log(title);  // JavaScript 출력

for(var i = 1; i < 4; i++;) {
  console.log(i);  // 1부터 3까지 출력
}
console.log(i); // 4 출력

   

2. let, const은 블록 스코프(block scope)를 가지므로, 변수를 선언한 {} 안에서만 유효하고, 그 밖에서는 접근할 수 없다.

function sayHi () { 
  let say = 'Hi';
  console.log(say);  // Hi 출력
}
console.log(say);  // Error 발생

if(true) {
  const title = 'JavaScript';
  console.log(title);  // JavaScript 출력
}
console.log(title);  // Error 발생

for(let i = 1; i < 4; i++;) {
  console.log(i);  // 1부터 3까지 출력
}
console.log(i); // Error 발생

---

중복 선언

 

1. var는 같은 이름으로 선언된 변수를 다시 선언할 수 있다.

    중복 선언 시에는 나중에 선언된 값으로 덮어씌워진다.

var title = 'JavaScript';
console.log(title);  // JavaScript 출력

var title = 'HTML';
console.log(title);  // HTML 출력

title = 'CSS';
console.log(title);  // CSS 출력

 

2. let는 같은 스코프 내에서 같은 이름의 변수는 다시 선언할 수 없다.

let title = 'JavaScript';
console.log(title);  // JavaScript 출력

let title = 'HTML';
console.log(title);  // Syntax Error

title = 'CSS';
console.log(title);  // CSS 출력

 

3. const도 같은 스코프 내에서 같은 이름의 변수는 다시 선언할 수 없다.

    또한, 선언 후 재할당이 불가능하고, 한번 값이 할당되면 그 값을 변경할 수 없다.

    하지만 객체나 배열 같은 참조형 데이터의 경우, 객체의 속성이나 배열의 요소를 변경할 수 있다.

const title = 'JavaScript';
console.log(title);  // JavaScript 출력

const title = 'CSS' // Syntax Error
title = 'HTML'; // Type Error

const obj = { name: 'Alice' };
obj.name = 'Bob'; // 가능

---

호이스팅(Hoisting)

 

[호이스팅이란? 🔍]

호이스팅은 자바스크립트의 변수 선언과 함수 선언이 코드 실행 전에 끌어올려지는 현상이다.

자바스크립트는 코드를 실행하기 전에 선언을 먼저 처리하고, 그 다음에 실제 코드 실행을 처리한다는 특징이 있다.

하지만 호이스팅이 어떻게 작동하는지에 따라 다르게 동작할 수 있다.

---

1. var로 선언된 변수는 선언만 호이스팅되고 초기화는 되지 않는다.

    즉, 변수가 함수의 제일 위로 끌어올려지지만 값은 할당되지 않은 상태로 올라간다.

console.log(title);  // undefined 출력

var title = 'This is title';

 

2. let, const으로 선언된 변수도 호이스팅이 일어나지만, 변수 선언 전에 접근하면 ReferenceError가 발생한다.

    초기화 전까지는 Temporal Dead Zone (TDZ)에 있기 때문에 값을 참조할 수 없다.

console.log(title);  // Reference Error
console.log(name);   // Reference Error

let title = 'This is title';
const name = 'My name is name';

---

요약 정리

특성	var	let	const
범위(scope)	함수 스코프	블록 스코프	블록 스코프
재선언	가능	불가능	불가능
재할당	가능	가능	불가능
호이스팅	선언만 호이스팅 (값은 undefined)	선언 및 초기화 전까지 접근 불가 (TDZ)	선언 및 초기화 전까지 접근 불가 (TDZ)