개념 정리

• 차이점을 알기 전에 var, let, const 가 무엇인지 먼저 알아본다.

- var

• ES6 에 추가된 let, const 이전 사용되던 변수 선언 방식이다.
• var 는 전역 스코프를 가질 수 있고, 함수 내부에서 선언된 변수는 함수 스코프를 가진다.
• 현재 사용하지 않는 이유는, var 의 큰 단점 때문인데,
  var 를 사용한 변수 선언의 경우 할당되는 값이 유동적으로 변경될 수 있다는 점이다.
• 이말은 즉 중복선언이 가능하고, 값이 재 할당 될 수 있다는 뜻이다.
• 아래 코드를 보자.

var name = "leesu";
console.log(name) // 출력결과: leesu

var name = "su";
console.log(name) // 출력결과: su 

• 다음과 같이 name 이라는 변수를 두번 선언했는데도, 에러가 나지 않고 각기 다른 값이 출력되고 있다.
• 하지만 ES6 에 추가된 let 과 const 는 위와 같은 단점을 막은 선언 방식이다!

- let

• let 은 블록 스코프를 가지는 변수를 선언하는데 사용된다.
  • +) 블록 스코프란, 변수가 선언된 중괄호({}) 내에서만 유효하며, 중괄호 밖에서는 접근할 수 없다는 의미이다.
• let 으로 선언된 변수의 값은 재 할당이 가능하다.
• 아래 코드를 보자.

let hi = "hi~~";
let number = 2;

if ( number > 1 ) {
	let hello = "hello~~";
    console.log(hello); // 출력결과: hello~~
}

console.log(hello) // 출력결과: hello is not defined

• 위의 코드처럼 중괄호로 감싸진 hello 변수가 정의된 블록 외부에서 사용될 경우 에러가 반환된다.

- const

• const 로 선언된 변수는 상수이므로, 선언 후 변수 값을 변경할 수 없다.
• 재 선언, 재 할당이 불가하다!
• let 과 const 의 차이점은 변수의 immutable(불변의, 바꿀수 없는) 여부이다.
• 아래의 코드를 보자.

// - let 

let hi = "hi"  // 출력결과: hi
let hi = "hi2" // 출력결과: Uncaught SyntaxError: Identifier 'hi' has already been declared
hi = "hi3" // 출력결과: hi3

// - const

const hi = "hi" // 출력결과: hi
const hi = "hi2" // 출력결과: Uncaught SyntaxError: Identifier 'hi' has already been declared
hi = "hi3" // 출력결과: Uncaught TypeError:Assignment to constant variable.

• 위의 코드에서 볼 수 있듯, hi 의 값을 재 할당하는 과정에서 let과 const 의 값이 다르다.
• const 예시에서 나온 출력결과는 "const 는 상수라 값이 변하지 않아! 재할당 할수없어!" 의 오류이다.
• 그러니 재 할당이 필요한 변수는 let 을 사용하자.

var, let, const 의 차이점?

- 유효 범위의 차이

• var 는 전역 범위 또는 함수 범위이며, let 과 const 는 블록 범위이다.

- 중복선언 및 할당의 차이

• var 변수는 재 할당 및 중복선언을 할 수 있다.
• let 변수는 재 할당은 가능하지만, 중복선언은 할 수 없다.
• const 변수는 재할당 및 중복선언이 불가하다.

- 호이스팅 차이

• 먼저, 호이스팅이란, 변수나 함수를 선언하기 전에 참조할 수 있다는 것을 의미한다.
• 세가지 모두 최상위로 호이스팅 되지만, var 변수만 undefined 으로 초기화되고 let 과 const 는 초기화되지 않는다.
• 아래의 코드를 보자.

- var

console.log(hi);
var hi = "hi~~";

↓
// 자바스크립트가 해석한 방식

var hi;
console.log(hi); // 출력결과: hi is undefined
hi = "hi~~";

• 위와 같이 var 는 undefined 로 초기화 되기 때문에 출력 결과 또한 undefined 이다.

- let

const hoisting = () => {
	console.log(hi);
    let hi = "hi";
}
hoisting(); // 출력결과: ReferenceError: name is not defined

• let 으로 하니 오류가 발생한다. 왜일까?
• let 키워드로 선언한 변수는 선언 단계와 초기 단계가 분리되어 진행된다.
• 즉, 런타임 이전에 자바스크립트에 의해 선언 단계가 먼저 실행되지만, 초기화 단계가 실행되지 않았을 때 변수에 접근하려고하면 '참조 에러'가 뜬다.
• 따라서, let 키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 단계 시작 지점까지 변수를 참조할 수 없는 일시적 사각지대(TDZ:Temporal Dead Zone) 구간에 존재한다.

- const

const hoisting = () => {
	console.log(hi);
    const hi = "hi~";
}
hoisting(); // 출력결과: Uncaught ReferenceError: Cannot access 'hi' before initialization

• let 의 경우, 런타임 이전에 선언이 되어 자바스크립트 엔진에 존재는 하지만 초기화가 되지 않아 undefined가 떴다.
• 그러나 const 의 경우 선언과 초기화가 동시에 이루어져야하지만 런타임 이전에는 실행될 수 없다.
• 따라서 초기화가 진행되지 않은 상태이기 때문에 항목을 초기화 전에 접근했다고 에러를 반환하는 것이다.

---

참고한 사이트
참고자료_1
참고자료_2