Post

var, let, const 차이

var, let, const 차이

소개

JavaScript에서 변수를 선언하는 방법은 var, let, const 세 가지가 있습니다. 각 선언 방식은 스코프, 재할당 가능성, 호이스팅 등의 측면에서 차이가 있습니다. 이 문서에서는 이 세 가지 선언 방식의 차이점을 설명합니다.

var

특징

  • 함수 스코프(Function Scope): var로 선언된 변수는 가장 가까운 함수 스코프 내에서 유효합니다.
  • 재선언 가능: 동일한 스코프 내에서 여러 번 선언할 수 있습니다.
  • 호이스팅(Hoisting): 변수 선언이 스코프의 상단으로 끌어올려지는 것처럼 동작합니다. 하지만 초기화는 호이스팅되지 않습니다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
function varExample() {
  console.log(x); // undefined
  var x = 1;
  console.log(x); // 1
}
varExample();

function varRedeclarationExample() {
  var x = 1;
  var x = 2; // 재선언 가능
  console.log(x); // 2
}
varRedeclarationExample();

let

특징

  • 블록 스코프(Block Scope): let으로 선언된 변수는 가장 가까운 블록 스코프 내에서 유효합니다.
  • 재선언 불가: 동일한 스코프 내에서 여러 번 선언할 수 없습니다.
  • 호이스팅(Hoisting): 변수 선언이 호이스팅되지만, 초기화 전에 변수를 사용할 수 없습니다. 이를 일시적 사각지대(TDZ, Temporal Dead Zone)라고 합니다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function letExample() {
  // console.log(y); // ReferenceError: Cannot access 'y' before initialization
  let y = 1;
  console.log(y); // 1
}
letExample();

function letRedeclarationExample() {
  let y = 1;
  // let y = 2; // SyntaxError: Identifier 'y' has already been declared
  y = 2; // 재할당 가능
  console.log(y); // 2
}
letRedeclarationExample();

const

특징

  • 블록 스코프(Block Scope): const로 선언된 변수는 가장 가까운 블록 스코프 내에서 유효합니다.
  • 재선언 불가: 동일한 스코프 내에서 여러 번 선언할 수 없습니다.
  • 재할당 불가: 선언과 동시에 초기화되어야 하며, 이후 재할당할 수 없습니다.
  • 호이스팅(Hoisting): let과 마찬가지로 호이스팅되지만, 초기화 전에 변수를 사용할 수 없습니다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function constExample() {
  // console.log(z); // ReferenceError: Cannot access 'z' before initialization
  const z = 1;
  console.log(z); // 1
}
constExample();

function constRedeclarationExample() {
  const z = 1;
  // const z = 2; // SyntaxError: Identifier 'z' has already been declared
  // z = 2; // TypeError: Assignment to constant variable.
  console.log(z); // 1
}
constRedeclarationExample();

주요 차이점

  1. 스코프: var는 함수 스코프를 가지며, letconst는 블록 스코프를 가집니다.
  2. 재선언 가능성: var는 동일한 스코프 내에서 재선언이 가능하지만, letconst는 불가능합니다.
  3. 재할당 가능성: varlet은 재할당이 가능하지만, const는 불가능합니다.
  4. 호이스팅: 세 가지 모두 호이스팅되지만, letconst는 초기화 전에 접근할 수 없으며, 이는 TDZ로 인해 발생합니다.

결론

JavaScript에서 var, let, const는 각각 다른 특성을 가지고 있으며, 올바른 변수를 선택하여 사용하면 코드의 가독성과 유지보수성이 향상됩니다. 일반적으로 const를 기본으로 사용하고, 재할당이 필요한 경우 let을 사용하며, var는 가능한 사용하지 않는 것이 좋습니다.

다음시간에 계속…

image

This post is licensed under CC BY 4.0 by the author.