[JS] javascript 변수에 대하여 - hosting, scope

기본적으로 javascript에는 var, let, const 이렇게 세가지 변수를 제공한다.
그런데 공식적으로 var를 사용하지 마라고 권장한다. 그 이유는 무엇일까?

변수의 hosting

var는 기본적으로 let과 사용방법이 비슷한다.
그러나 약간의 차이가 있는데, var는 한번 선언된 변수를 다시 선언할 수 있다.

var myName = 'kang';
console.log(myName); 

var myName = 'kim'; 
console.log(myName)

동일한 내용을 let으로 작성해보면

let myName = 'kang'; 
console.log(myName); 

let myName = 'kim'; 
console.log(myName)

에러가 나오는것을 확인할 수 있다.

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

console.log(myName);
var myName = 'kang';

할당된 'kang'이 나오는게 아니라, undefined가 나오는데 그이유는 바로 hoisting이라는 것 때문이다.
hoisting은 스코프 내부 어디서든 변수선언은 최상위에 선언된 것처럼 행동하는 동작 방식을 의미한다.
호이스팅은 스코프 단위로 일어난다. 잘 기억하자

아래 코드를 보자.

var myName; 
console.log(myName); 
myName = 'kang';

하지만 동일하게 let을 사용하면 에러가 난다.

console.log(myName); 

let myName = 'kang';

그렇다면 let과 const는 호이스팅이 되지 않는 것일까?
그건 아니다.

그렇다면 왜 이런 에러를 내는 것일까? 그건 바로 TDZ(Temporal Dead Zone) 때문이다.

위의 영역은 TDZ 영역인데, TDZ 영역은 사용할수가 없다.

var 같은 경우는 TDZ 영역에 관련이 없는데 이때문에 var를 쓰면 잠재적인 버그를 만나게 될 무서운 상황이 존재할 수 있다.

각 변수의 생성 과정

let의 생성 단계는
선언 - 초기화 - 할당 이렇게 3단계를 거친다.

그런데 var의 경우는
선언 & 초기화 - 할당 이렇게 2단계만을 거친다. 앞서 var가 undefined를 출력한 이유이다.

const는
선언 & 초기화 & 할당 이 모두 한 단계에서 끝난다.

let a; 
a = 'a'; 

var b; //undefined 로 초기화 
b = 'b'; 

const c = 'c';

 

변수의 스코프

let과 const는 블록 스코프 (block-scoped) 이다.
블록스코프는 함수, if문 , while문, for문, try/catch문등 코드 블록에서 선언된 변수는 코드 블록 내에서만 유효함을 의미한다.

var는 함수 스코프(function-scoped) 인데,
함수스코프는 함수블록 내에서만 유효함을 의미한다.

아래 코드를 보면 위의 말을 잘 이해할 수 있다.

let num = 10; 

if (num>0) { 
    var result ='ok'; 
} 

console.log(result);

var가 함수 스코프이기 때문에, if 의 블락에는 영향을 받지 않는다.

만약 if 내부의 변수가 let이라면

let num = 10; 

if (num>0) { 
    let result ='ok'; 
} 

console.log(result);

이렇게 에러가 떨어진다.

var 역시 함수내부에 선언된 변수는 외부에서 사용할 수가 없다.

function testFunc() { 
    var input = 'a'; 
} 

console.log(input);