[JavaScript] 자바스크립트 var, let, const 차이점

자바스크립트에서 변수를 선언할 때 var, let, const를 사용할 수 있다. 이 세 개는 약간씩 다른 기능을 하므로 셋의 차이점을 알아두고 제대로 사용해야 한다!

var

- ES6 나오기 이전에 자주 썼던 가장 오래된 방식이다. 

- 중복 선언과 재할당이 모두 가능하다.

var letter = 'first';
console.log(letter); // first

var letter = 'second';
console.log(letter); //second

letter = 'third';
console.log(letter);//third

코드를 보면, 중복 선언이 가능하고, 가장 마지막으로 할당된 값이 최종 변수에 저장되는 것을 볼 수 있다.

 

- 함수에서 선언된 변수는 함수 내에서만 유효한 함수 스코프를 가진다.

var x = 10;
function letter() {
  var x = 20;
  console.log(x); // 20
}
console.log(x); // 10

- TDZ가 없다.

 

var는 중복 선언이 가능하기 때문에 복잡한 코드의 경우, 위에서 선언한 줄 모르고 밑에서 또 선언해버려도 오류가 안 뜬다는 단점이 있다. 그래서 ES6에서 등장한 게 let과 const이다. 

 

let

- 중복 선언은 안 되지만 재할당은 가능하다.

let letter = 'first';
console.log(letter); // first

let letter = 'second';
console.log(letter); ////Uncaught SyntaxError: Identifier 'letter' has already been declared

letter = 'third';
console.log(letter);//third

코드를 보면, 중복 선언을 하면 syntaxError가 뜨는 것을 볼 수 있다. 재할당은 가능하다!

- 블록 스코프를 가진다.

- TDZ가 존재한다.

 

const

- 중복 선언과 재할당이 모두 불가하다.

const letter = 'first';
console.log(letter); // first

const letter = 'second';
console.log(letter); ////Uncaught SyntaxError: Identifier 'letter' has already been declared

letter = 'third';
console.log(letter);////Uncaught TypeError: Assignment to constant variable

코드를 보면, 중복 선언, 재할당 시 모두 에러가 뜨는 것을 볼 수 있다.

 

const x = 10;
x = 20;
console.log(X) //Uncaught TypeError: Assignment to constant variable

const arr = [1, 2, 3];
arr.push(4);
console.log(arr) // [1,2,3,4]

하지만, const로 선언된 객체, 배열의 내부 요소는 수정이 가능하다!

- 블록 스코프를 가진다.

- TDZ가 존재한다.

 

var, let, const 차이점

정리하자면 위 세 가지 방식의 차이점은 변수 선언 방식, 스코프, 변수 호이스팅 방식 이렇게 세 가지가 있다.

이 세 가지 방식의 차이점을 잘 알아두어야 한다..!

 

변수 선언 방식

var를 보완한 게 let, const이기 때문에 var는 안 쓰는 걸 추천하고, 재할당이 가능해야 할 때는 let, 재할당이 필요 없을 때는 const를 쓰면 된다.

• var : 중복 선언 O, 재할당 O
• let : 중복 선언 X, 재할당 O
• const: 중복 선언 X, 재할당 X

스코프(scope)

유효한 참조 범위를 스코프라고 한다.

• var : 함수 레벨 스코프(function-level scope)
• let, const : 블록 레벨 스코프(block-level scope) => 중괄호{} 안에서만 유효하다고 생각하면 된다.

function example() {
  var x = 10;
  if (true) {
    var y = 20; // 함수 스코프
    let z = 30; // 블록 스코프
  }
  console.log(x); // 10
  console.log(y); // 20
  console.log(z); // error
}

 

변수 호이스팅(Hoisting) 방식

자바스크립트의 변수 처리 과정은 3단계로 진행된다.

1. 선언 단계(Declaration phase)
   • 변수 객체를 생성하고 등록한다.
2. 초기화 단계(Initialization phase)
   • 변수 객체에 등록된 변수를 메모리에 할당한다
   • 이때 변수는 undefined으로 초기화된다.
3. 할당 단계(Assignment phase)
   • undefined로 초기화된 변수에 실제값을 할당한다.

호이스팅?

자바스크립트 엔진은 코드를 실행하기 전 모든 선언(var, let, const, function, class ... )을 스코프에 등록한다.

이때 코드를 실행하기 전 선언 단계가 해당 스코프의 최상단으로 끌어올려지는 것 같은 “현상”(실제로 끌어올리는 게 아님) 을 호이스팅이라고 한다.

자바스크립트의 모든 선언은 호이스팅이 일어난다. 하지만 let, const, class는 호이스팅이 일어나지 않는 것처럼 동작한다. var는 선언+초기화 단계가 한 번에 일어나는 반면, let과 const는 초기화되지 않은 채로 선언만 메모리에 저장되기 때문에 참조 에러(reference error)를 발생시킨다. 

let과 const가 호이스팅이 안 일어나는 게 아니다!! reference error가 뜬다는 것도 호이스팅 때문이다.

 

var

선언 단계와 초기화 단계가 한 번에 이루어진다. 따라서 참조 에러가 아닌 undefined를 반환한다. 이후 코드가 실행된 뒤에 값이 할당된다.

console.log(a);  // undefined
var a = 10;
console.log(a);  // 10

 

let, const

• 선언 단계와 초기화 단계가 나눠서 진행된다. 변수를 선언만 하고 초기화는 코드 실행 후에 실행된다. 따라서 초기화 이전에 변수에 접근하려고 하면 참조 에러가 발생한다.
• 스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없는데, 이 구간을 TDZ(Temporal Dead Zone, 일시적 사각지대)라고 한다.

console.log(a);  // ReferenceError: a is not defined
console.log(b);  // ReferenceError: b is not defined
let a = 10;
const b = 20;

 

🌟null 🆚 undefined 🆚 undeclared

• 변수 선언 유무
  • null, defined : 변수 선언 O
  • undeclared : 변수 선언 X
• null
  • 값이 없음, 무효를 나타내는 값이다!!
• undefined
  • 변수가 선언되었지만 값을 할당하지 않았을 때 나타난다.
  • var로 할당한 변수 호이스팅에서 undefined이 뜨는 이유는 변수가 선언+초기화 단계를 코드 실행 전 수행해 undefined 상태로 만들어놓기 때문이다.
• undeclared
  • 선언되지 않은 변수에 접근할 때 나타난다.
  • let, const로 할당한 변수 호이스팅에서 뜨는 참조에러(ReferenceError)가 undeclared 상태이다.