[JS] var, let, const

자바스크립트는 변수를 선언할 때 별도로 자료형 명시하지 않는다.
변수에 입력되는 값에 의해 자료형이 판별되기에
수나 객체를 선언할 때는 ES5 전에는 「var」라는 키워드를 사용했다.

Number ➡️ var int_data = 1;
String ➡️ var character1 = 'a';
Boolean ➡️ var result2 = true;
Array ➡️ var array1 = [1, 2, 3];

그러나 「var」 의 문제점을 있어서 이를 보완할 「let」과 「const」키워드가 도입되었다.

---

⚠️  「var」 주의사항

1. Function Scope

변수를 선언한 함수 내에서만 유효한 함수 스코프를 가지기 때문에 블록 스코프를 무시한다.

function exampleScope() {
  if (true) {
    var x = 10;
  }
  console.log(x); // x는 함수 스코프이므로 if 블록 외부에서도 접근 가능
}

exampleScope(); // 10 출력

 

2. Hoisting

변수 선언이 호이스팅되어, 해당 스코프의 최상단으로 끌어올려진다.

한마디로, 변수가 선언되기 전에도 접근 가능하다. 

console.log(y); // 에러가 아닌 undefined 출력
var y = 5;
console.log(y); // 5 출력

 

3. 재선언 허용

변수는 같은 스코프 내에서 오류 없이 여러 번 선언할 수 있다.

var a = 3;
var a = 6; // 오류 없이 변수를 재선언할 수 있음

---

 

let: 변수

1. 변수

선언 이후에 재할당이 가능하다.

let PI = 3.14;
PI = 3.14159;

let r;
r = 5;

 

 

2. 블록 스코프

중괄호({}) 내에서만 유효한다.

if (true) {
	let PI = 3.14;
    console.log(PI); // 3.14
}

console.log(PI); // 에러

 

 

3. 호이스팅

변수 선언이 호이스팅되어, 해당 스코프의 최상단으로 끌어올려진다.

하지만 초기화 전에 변수에 접근하면 ReferenceError가 발생한다.

console.log(PI);

let PI = 3.14;

 

const: 상수

1. 상수

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

const PI = 3.14;
PI = 3.14159;  // 에러

const r;  // 에러

 

2. 블록 스코프

중괄호({}) 내에서만 유효한다.

if (true) {
	const PI = 3.14;
    console.log(PI); // 3.14
}

console.log(PI); // 에러

 

3. 호이스팅

변수 선언이 호이스팅되어, 해당 스코프의 최상단으로 끌어올려진다.

하지만 초기화 전에 변수에 접근하면 ReferenceError가 발생한다.

console.log(PI);

let PI = 3.14;