변수선언 키워드 var, let, const의 특징과 주의점

 

 

var, let, const 키워드는 변수를 선언할 때 사용되는 키워드로, 특징과 사용시의 주의점을 명확히 알고 있어야 한다.

 

0. 시작하기 전에

| 호이스팅(hoistion) 

호이스팅은 변수 선언이 스코프 내에서 최상단으로 끌어올려지는 현상이다.

 

| 스코프(Scope)

스코프는 변수와 함수의 유효 범위를 나타내는 개념으로, 코드 내에서 변수나 함수에 접근할 수 있는 범위를 결정하며, JavaScript에서는 크게 전역 스코프(Global Scope)와 지역 스코프(Local Scope)로 나눌 수 있다.

 

 

1. var

'var'는 ES6 이전의 문법이므로 현대적인 JavaScript에서는 let과 const를 주로 사용한다.

 

function example() {
  if (true) {
    var y = 10;
  }
  console.log(y); // 10
}

 

- 함수 스코프(Function Scope) : var는 함수 스코프를 가지고 있어 블록 스코프가 없다. 함수 내에서 선언한 변수는 함수 내에서만 유효하며, 함수 외부에서는 접근할 수 없다. 그러나 중첩 함수가 외부 함수의 스코프에 접근할 수 있고 이로 인해 변수 충돌이나 예상치 못한 동작이 발생할 수 있다.

 

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

 

- 호이스팅(Hoisting): 호이스팅이 발생한다. 변수를 선언하기 전에 사용하면 오류가 발생하지 않고 undefined가 된다.

이는 문제가 될 수 있기 때문에 var를 더이상 사용하지 않는 이유중에 하나라고 할 수 있다. 

 

 

2. let

변수의 값이 변경될 수 있는 경우 let을 사용하며, 특히 블록 스코프를 고려해야 하는 경우에 유용하다.

 

if (true) {
  let z = 20;
  console.log(z); // 20
}
console.log(z); // 에러: z is not defined

 

- 블록 스코프(Block Scope) : 블록 스코프를 가지고 있어 블록 내에서 선언한 변수는 해당 블록 내에서만 유효하다.

 

console.log(w); // 에러: Cannot access 'w' before initialization
let w = 30;

 

- 호이스팅 : let도 호이스팅이 발생하지만, 변수가 선언되기 전에 사용하면 ReferenceError가 발생한다.

 

 

 

3. const

변수의 값이 변하지 않고 상수로 사용하고자 할 때 사용한다.

 

const PI = 3.14;
PI = 3; // 에러: Assignment to constant variable

 

- 선언 후에는 값을 변경할 수 없다. 

- var, let은 선언만 해도 되지만 const는 선언만 하면 에러가 뜬다. 할당을 해주어야 한다.

 

if (true) {
  const language = 'JavaScript';
  console.log(language); // JavaScript
}
console.log(language); // 에러: language is not defined

 

- 블록 스코프(Block Scope) : 블록 스코프를 가지고 있어 블록 내에서 선언한 변수는 해당 블록 내에서만 유효하다.

 

console.log(c); // 에러: Cannot access 'c' before initialization
const c = 42;

 

- 호이스팅 : const도 호이스팅이 발생하지만, 변수를 선언하기 전에 사용하면 ReferenceError가 발생한다.