[JavaScript] 변수 선언 : 'var', 'let', 'const'

1. 'var'

'var'은 가장 오래된 자바스크립트 변순 선언 키워드로, ES5까지 주로 사용되었다.

• 스코프: 함수 스코프(function-scoped)를 가진다.
  
  • 함수 내에서 선언된 'var'은 함수 전체에서 유효하며,
  • 함수 외부에서 선언되면 전역 변수가 된다.
• 호이스팅:
  • 선언과 초기화가 함께 호이스팅되어 코드의 상단에서 이루어진 것처럼 동작한다.
• 재선언 및 재할당 가능:
  • 동일 스코프 내에서 여러번 선언할 수 있고,
  • 값의 변경도 자유롭게 할 수 있다.
• 예시

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

function test() {
    var y = 10;
    console.log(y); // 10
}
test();
console.log(y); // y is not defined

 

2. 'let'

'let'은 ES6에서 도입됬고, 블록 스코프(block-scoped) 변수를 선언하는데 사용된다.

• 스코프: 블록 스코프(block-scoped)를 가진다.
  
  • 'if', 'for', 'while' 블록 내에서 선언된 'let' 변수는 해당 블록 내에서만 유효하다.
• 호이스팅:
  • 호이스팅은 발생하비만 초기화는 발생하지 않아,
  • 선언 전에 접근하면 ReferenceError가 발생한다.
• 재선언 불가, 재할당 가능:
  • 같은 스코프 내에서는 재선언할 수 없지만,
  • 재할당은 가능하다.
• 예시

let a = 20;
if (true) {
    let a = 30; // 이는 외부의 a와는 다른 변수입니다.
    console.log(a); // 30
}
console.log(a); // 20

 

3. 'const'

'const'은 도 ES6에서 도입됬고, 상수를 선언할 때 사용한다.

• 스코프: 'let'과 같은 블록 스코프(block-scoped)를 가진다.
• 호이스팅:
  • 'let'과 같이 호이스팅이 된다.
  • 그러나 초기화는 되지 않는다.
• 재선언 불가, 재할당 불가:
  • 재선언과 재할당이 모두 불가능하다.
  • 단, 객체나 배열의 내용은 변경할 수 있다.
• 예시

const b = 50;
b = 60; // TypeError: Assignment to constant variable.

 

4. 비교 표

특성	var	let	const
스코프	함수 스코프	블록 스코프	블록 스코프
호이스팅	선언과 초기화가 호이스팅됨	호이스팅은 되는데 초기화 안됨	호이스팅은 되는데 초기화 안됨
재선언	가능	불가능	불가능
재할당	가능	가능	불가능

 

5.참고

• 사용 팁
  • 'const'를 사용해서 값을 변경할 필요가 없는 변수를 선언하고
  • 'let'은 필요한 경우에만 사용한다.
  • 'var'은 오래도니 코드베이스나 특정 함수 스코프가 필요할때 빼고는 사용을 지양한다
• 결론
  • 'var', 'let', 'const'는 각 다른 특성이 있어서 상황에 따라 적절히 선택해서 사용할 필요가 있다.
  • 보통은 'let'과 'const'의 사용을 권장하고 있으며 이는 코드의 가독성과 유지보수성을 향상시키는데 크게 기여한다.

---

끝