자바스크립트의 변수형 3가지 var, let, const

자바스크립트에서 변수를 선언하는데 사용되는 키워드는 3가지가 있습니다.

1. var

2. let

3. const

---

먼저 var 변수는 블록 범위를 벗어나도 유효합니다. 즉 함수안에서 선언되어 사용됐다고 할때, 함수 밖에서도 값이 계속 유지가 됩니다.

let, const는 블록범위를 벗어나면 존재 자체가 사라집니다.

예시입니다:

function foo() {
  var x = 10; // var는 블록 범위를 벗어나 함수 스코프까지 유효
  console.log(x); // 10 출력
}

foo();
console.log(x); // ReferenceError: x is not defined

var는 함수가 종료되어도 남아있으므로 출력 결과가

10
10

이 됩니다.

반면 let이나 const를 사용하게 되면,

function foo() {
  let x = 10; // let는 블록 범위 내에서만 유효
  console.log(x); // 10 출력
}

foo();
console.log(x); // ReferenceError: x is not defined

10
error:::::

함수 안에 변수 let에서 10은 출력되지만 함수 밖에는 존재하지 않으므로 에러가 발생하게됩니다.

---

그렇다면 함수 밖에서는 사용이 안되는 let과 const는 같은거 아닌가?
무슨 차이가 있는거지?

-> 재할당 부분에서 차이가 있습니다.

let변수는 선언 후에 값을 재할당할 수 있습니다.

let x = 10;
x = 20;
console.log(x); // 20 출력

const변수는 선언 후 값을 재할당할 수 없습니다.

const y = 10;
y = 20; // TypeError:
-> y는 값이 10으로 고정

---

마지막으로 변수 선언 시에 값 할당을 신경써야합니다.

var 변수는 선언시 암시적으로 undefined 값으로 초기화됩니다.

let과 const 변수는 선언 시 반드시 값으로 초기화해야 합니다.

var x;
console.log(x); // undefined 출력

let y;
console.log(y); // TypeError: 값으로 할당해야함!!

const z = 10;
console.log(z); // 10 출력