자바스크립트 - 변수, 호이스팅, TDZ(Temporal Dead Zone)

변수

자바스크립트 변수 선언에는 let, const, var가 있습니다. 이 3가지의 변수 선언의 차이를 알아보겠습니다.

 

var

var는 한번 선언된 변수를 다시 선언할 수 있습니다. 

var name = 'Mike';
console.log(name); // Mike

var name = 'Jane';
console.log(name); // Jane

 

그리고 var는 선언하기 전에 사용 할 수 있습니다. 

아래와 같은 코드는 에러를 일으키지 않습니다. 

console.log(name); //undefined 
var name = 'Mike';

 

var로 선언된 변수는 코드가 실제로 이동하지는 않지만 아래처럼  끌어 올린것처럼 실행됩니다. 이를 호이스팅(hoisting)이라고 합니다. 위의 코드에서 undefined가 뜨는데 이유는 선언은 호이스팅 되지만 할당은 호이스팅되지 않기 때문입니다.  

var name;
console.log(name);
name='Mike';

let 

let은 중복선언이 불가능합니다. 그러나 재할당이 가능합니다. 즉, let은 다시 선언을 해주면 에러를 일으킵니다. 

 

 

const

const는 중복선언이 불가능하고 재할당도 불가능합니다. 

 

호이스팅 

스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동합니다. 그리고 호이스팅은 스코프 단위로 일어납니다.

그럼 let도 var처럼 에러를 일으키지 않을까요?

아닙니다 아래의 코드를 실행하면 var처럼 동작하지 않고 에러를 발생시킵니다. 이유는 바로 TDZ(Temporal Dead Zone)때문입니다. 

console.log(name);  // ReferenceError
let name = 'Mike';

 

TDZ

TDZ(Temporal Dead Zone)란, 한글로 직역하자면 일시적인 사각지대라는 뜻입니다. 이 일시적인 사각지대는 스코프의 시작지점부터 초기화 시작지점까지의 구간을 TDZ라고 합니다. 즉 변수가 선언되고 변수의 초기화가 이루어지기 전까지의 구간이라고 말할 수 있습니다. 

 

변수의 생성과정 

변수의 생성과정은 다음과 같이 3단계로 이루어집니다. 

 

1. 선언 단계

2. 초기화 단계 (undefined를 할당해주는 단계)

3. 할당 단계

 

var

Var는 선언과 초기화가 동시에 일어납니다. 즉 ,

1. 선언 및 초기화 단계

2. 할당 단계 

 

let

let은 선언단계와 초기화단계가 분리되어서 일어납니다. 즉, 호이스팅되면서 선언단계가 이루어지지만 초기화단계는 실제 코드에 도달했을때 실행됩니다. 따라서 위의 코드에서 error가 발생한것입니다. 

 

1. 선언 단계

2. 초기화 단계

3. 할당 단계

 

const

const는  선언 + 초기화 + 할당 

즉 3개가 동시에 일어납니다. 어찌보면 당연합니다. const는 값을 처음 선언한 후 바꿀 수 없기때문입니다. 

 

다시말해 let과 const는 tdz의 영향을 받습니다. 

 

스코프

스코프(scope)는 함수가 실행될때, 함수 내에서 변수에 대한 접근이 어떻게 되는지를 나타내는 용어입니다.

 

함수 스코프

함수가 선언되면 하나의 스코프(접근 범위)가 발생하는데 이걸 함수 스코프라고 합니다. 함수 스코프는 함수에서 선언한 변수는 해당 함수 내애서만 접근가능하다는 걸 의미합니다. 

var : 함수 스코프(function-scoped)를 따릅니다. 

함수스코프는 그 함수 내에서만 선언된 변수만 지역변수가 됩니다.  함수 외부에서 선언한 변수는 모두 전역변수로 취급합니다. 

 

블록 스코프

블록 스코프는 블록{} 내부에서 선언된 변수는 해당 블록에서만 접근 가능한 걸 말합니다. 

let, const : 블록 스코프(block-scoped)입니다.

블록스코프는 모든 코드 블록에서 선언된 변수는 코드블록 내에서만 유효합니다. 즉 지역변수입니다.  -> 함수, if문, for문, while문, try/catch 문 등 

 

예를 들어보겠습니다. 

if문 안에서 var로 선언한 변수는 if문 밖에서도 사용가능합니다. 하지만 let과 const는 저 중괄호 블록내에서만 실행가능합니다. 

const age = 30;

if(age > 19)
{
  var txt='성인';
}

cosole.log(txt); //성인

 

var도 아래와 같이 함수내부에서 선언하면 함수 밖에서 사용할 수 없습니다. 즉 유일하게 벗어날 수 없는 스코프가 함수 스코프라고 생각하면 됩니다. 

function add(num1, num2){
  var result = num1 + num2;
  }
  
add(2,3);

console.log(result); -> error

 

정리

그래서 이게 뭐야? 라고 생각하시는 분들이 많을거 같습니다. 정리하자면

var를 쓰지말고 let, const를 쓰는것이 좋습니다. 

let과 const를 사용하게 되면 변수의 이름이 중복되는 것을 방지할 수 있고 변수의 값이 할당되기 전에 사용할 때 예기치 못한 오동작을 방지합니다.