[3주차] 위클리 페이퍼 - var, let, const 를 서로 비교해 설명해 주세요.

한 줄 요약

• var: 전역 변수(코드 전체에서 작동하는 변수)를 선언하는 키워드
• let: 지역 변수(블록 안에서 작동하는 변수)를 선언하는 키워드
• const: 지역 변수(블록 안에서 작동하는 변수)이면서, 값이 변하지 않는 변수를 선언하는 키워드

코드 예시

• var

var a = 1

function testFunc(){
  a = 2
  console.log(a) // 출력: 2
}

console.log(a) // 출력: 2

• let

function testFunc(){
  let a = 1;
  if(true) {
    let a = 2;  // 새로운 블록 스코프의 a
    console.log(a); // 출력: 2
  }
  console.log(a); // 출력: 1
}

• const

const a = 1

function testFunc(){
  a = 2 // 에러 발생: const로 선언된 변수는, 값을 변경할 수 없음
  console.log(a)
}

console.log(a)

추가 설명

1. var

• 중복 선언 허용: var로 선언된 변수는 같은 스코프 내에서 중복 선언이 가능합니다. 이는 코드의 유지보수를 어렵게 하고 예상치 못한 버그를 발생시킬 수 있습니다.
• Scope: var는 함수 레벨 스코프를 가집니다. 함수 내부에서 선언된 var 변수는 해당 함수 전체에서 접근할 수 있으며, 함수 외부에서 선언되면 전역 변수로 간주됩니다.
• Hoisting: var 선언은 호이스팅 되어 스코프의 최상단으로 끌어올려집니다. 그러나 초기화는 실제 코드 위치에서 수행되므로, 선언 전에 변수를 사용하면 undefined 값을 반환합니다.

2. let

• 중복 선언 허용: let으로 선언된 변수는 같은 스코프 내에서 중복 선언이 불가능합니다. 이미 선언된 변수 이름으로 다시 선언을 시도하면 SyntaxError를 발생시킵니다.
• Scope: let은 블록 레벨 스코프를 가집니다. {}로 둘러싸인 어떤 블록(조건문, 반복문, 또는 단순 블록) 내에서 선언된 let 변수는 그 블록 내부에서만 유효합니다.
• Hoisting: let 변수도 호이스팅은 발생하지만, 초기화가 선언 위치에서 이루어지므로, 초기화 이전에 변수에 접근하려고 하면 ReferenceError가 발생합니다. 이는 let 변수가 "일시적 사각지대(TDZ)"에 놓이기 때문입니다.

3. const

• 중복 선언 허용: const로 선언된 변수도 let과 마찬가지로 같은 스코프 내에서 중복 선언이 불가능합니다. 중복 선언을 시도할 경우 SyntaxError가 발생합니다.
• Scope: const 역시 블록 레벨 스코프를 따릅니다. 따라서 선언된 블록 내에서만 변수에 접근할 수 있습니다.
• Hoisting: const 선언도 호이스팅이 적용되지만 TDZ에 속하기 때문에 선언 전에 접근하면 ReferenceError가 발생합니다. const는 선언과 동시에 초기화를 반드시 해야 하며, 후에 값의 재할당이 불가능합니다.

기타

• 어느 프로그래밍 언어를 사용해도 그렇듯, 전역변수의 사용은 지양되는 편이다. 전역변수는 프로그램이 종료될 때까지 메모리에 상주하기 때문이며, 프로그램의 로직/순서를 망가뜨릴 위험이 (작지만) 존재하기 때문이다.
• 변하지 않는 상수 값은 const 변수를 이용해 관리한다. 왜냐면, 어쩌다가 변수를 건들였을 때, 그 값을 보존하기 위함이다.

참고 자료

• 인용한 페이지
  • var: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/var
  • let: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let
  • const: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const
  • 추가 설명: https://www.codeit.kr/topics/fs-paper2/lessons/8628