JavaScript 를 공부하고 있는데 var, let, const도 확실하게 구분 못하는 내 자신을 보면서 반성을 많이 하게 된다.. ^_^
이번에 확실하게 짚고 넘어가자!
var
var의 첫 번째 문제: 함수 스코프
함수 스코프를 지니기 때문에 for 문, while 문, switch 문, if 문 내부에서 정의된 변수가 반복문이 끝난 이후에도 계속 남는 문제가 있다.
var의 두 번째 문제: 호이스팅
변수를 정의하기 전에 사용해도 에러가 발생하지 않음 (undefined로 나옴)
호이스팅
'끌어올리다'라는 의미로, 변수 정보를 수집하는 과정을 쉬운 방법으로 대체한 가상의 개념
자바스크립트 엔진은 식별자들을 최상단으로 끌어올려놓은 다음 실제 코드를 실행한다. 그렇기 때문에 변수 수집 과정을 모두 마쳐도 실행컨텍스트가 관여할 코드들은 실행되지 전의 상태
console.log(myVar) // undefined
var myVar = 1;
위 코드를 호이스팅 후에는 아래와 같이 된다고 생각하자.
var myVar = undefined;
console.log(myVar); // undefined
myVar = 1;
var 변수는 호이스팅 결과로 가장 최상단에서 선언되고 undefined로 초기화된다. 그러므로 1로 할당 하기 전에 사용하면 undefined가 나온다는 사실!var의 세 번째 문제: 재정의 가능
변수를 정의한다는 것은 이전에 없던 변수를 생성한다는 의미이다. 하지만 var는 이전에 있던 변수도 재정의 할 수 있음 → 직관적이지 않음, 버그로 이어질 확률
var의 네 번째 문제: 재할당 가능
상수처럼 쓸 값도 무조건 재할당 가능한 변수로 만들어짐 → 코드 복잡, 가독성 떨어짐
let & const 공통점
블록 스코프
재정의 불가능
호이스팅
변수가 정의된 시점보다 먼저 변수를 사용하면 에러가 발생함 (참조 에러)
let과 const도 호이스팅? 이 된다!
변수가 할당되는 과정은 3단계를 거친다. 선언, 초기화, 할당
var는 선언(호이스팅)과 동시에 초기화가 되는 반면, let과 const는 선언과 초기화가 분리된다.
그리고 var와는 다르게 임시적 사각지대가 존재하게 된다.
임시적 사각지대(Temporal Dead Zone)란?
임시적 사각지대는 변수 초기화 전에 사용하는 것을 막는다.
EX) let, const, class
const foo = 1;
{
console.log(foo); // 참조에러
const foo = 2;
}만약 두 번째 foo가 호이스팅되지 않았다면 참조 에러는 발생하지 않고 첫 번째 foo의 값을 출력될 것이다. 하지만 두 번째 foo의 호이스팅 때문에 출력된 값은 두 번째 foo를 참조하게 되어 참조에러가 발생하는 것이다.
let vs const 다른 점
let은 재할당 가능 but const는 재할당 불가능
재할당 불가능한 변수는 프로그램의 복잡도를 상당히 낮춰주기 때문에 되도록이면 const를 사용하는 것이 좋음
