미고렝 코딩

1. 변수 선언 방식

var는 한번 선언한 변수일지라도 중복해서 선언을 할 수 있는 특징이 있다.

var a = 1;
console.log(a)//1
var a = 2;
console.log(a)//2

위와 같이 한번 선언을 한 a 변수 일지라도 var태그를 사용하여 선언 하면 다시 선언을 할 수 있다. 이는 간단한 테스트에는 편리할 수 있으나 코드량이 많아진다면 어디에서 사용했었는지 파악하기가 어렵고 기존의 값이 바뀌어 버그가 발생할 수 있다.

이와 달리 let과 const는 재선언이 불가능하다. 하지만 이 둘에도 차이점이 있는데, 그것은 immutable여부이다.

let은 변수에 재할당이 가능하고, const는 불가능하다.

2. 호이스팅

호이스팅(Hoisting)이란, var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다.

자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const function function*, class)을 호이스팅한다.

하지만, var 로 선언된 변수와 달리 let로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생한다.

console.log(foo);//undefined
var foo;

console.log(bar); //Error: Uncaught ReferenceError: bar is not defined
let bar;

이는 let 로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문이다.

참고로 변수는 선언 단계 > 초기화 단계 > 할당 단계에 걸쳐 생성되는데,

var 으로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다. 하지만 let으로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.

//스코프의 선두에서 선언 단계와 초기화 단계가 실행된다.
//따라서 변수 선언문 이전에 변수를 참조할 수 있다.

console.log(foo);

var foo;
console.log(foo);
foo = 1; //할당문에서 할당 단계가 실행된다.
console.log(foo); //1

//스코프의 선두에서 선언단계가 실행된다.
//아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다.
//따라서 변수 선언문 이전에 변수를 참조할 수 없다.

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

let foo; //변수 선언문에서 초기화 단계가 실행된다
console.log(foo); //undefined

foo = 1; //할당문에서 할당 단계가 실행된다.
console.log(foo); //1

3. 정리

변수 선언에는 기본적으로 const를 사용하고, 재할당이 필요한 경우에 한정해 let을 사용하는것이 좋다.

그리고 객체를 재할당하는 경우는 생각보다 흔하지 않다. const를 사용하면 의도치 않은 재할당을 방지해 주기 때문에 보다 안전하다.

var, let, const의 차이점

1. var는 함수 레벨 스코프이고 let, const는 블럭 레벨 스코프입니다.

2. var로 선언한 변수는 선언 전에 사용해도 에러가 나지 않지만 let, const는 에러가 발생합니다.

3. var는 이미 선언되어있는 이름과 같은 이름으로 변수를 또 선언해도 에러가 나지 않지만 let, const는 이미 존재하는 변수와 같은 이름의 변수를 또 선언하면 에러가 납니다.

4. var, let은 변수 선언시 초기 값을 주지 않아도 되지만 const는 반드시 초기값을 할당해야 합니다.

5. var, let은 값을 다시 할당할 수 있지만 const는 한번 할당한 값은 변경할 수 없습니다(단, 객체 안에 프로퍼티가 변경되는 것까지 막지는 못합니다).

함수레벨 스코프란?

// var는 function-scope이기 때문에 for문이 끝난다음에 i를 호출하면 값이 출력이 잘 된다.
// 이건 var가 hoisting이 되었기 때문이다.
for(var j=0; j<10; j++) {
  console.log('j', j)
}
console.log('after loop j is ', j) // after loop j is 10


// 아래의 경우에는 에러가 발생한다.
function counter () {
  for(var i=0; i<10; i++) {
    console.log('i', i)
  }
}
counter()
console.log('after loop i is', i) // ReferenceError: i is not defined