[javascript] var, let, const와 호이스팅

 

자바스크립트에서 사용되는 변수 타입과 스코프에 대해서 알아보겠습니다.

 

기본적으로 자바스크립트 또한 다른 언어와 같이 지역변수와 전역변수 개념이 존재합니다.

따라서 전역변수를 함수 내에서 변경하면, 함수 바깥에서도 변경된 값이 사용된다던가 .. 하는 등의 기본적인 개념이 적용됩니다.

 

다만 자바스크립트에서는 이런 통상적인 스코프에서 예외적인 변수 선언 타입이 있는데, 이러한 내용들을 지금부터 다뤄보고자 합니다.

 

 

우선 자바스크립트는 var, let, const의 변수 타입을 주로 사용합니다.

 

 

 

- let

 

 

let은 기본적으로 선언한 후에 값을 변경할 수 있고,

같은 스코프 내에서는 재선언을 할 수 없습니다.

 

아래처럼 선언한 변수에 다시 값을 할당할 수 있습니다.

let temp = "hello"
console.log(temp)
temp = "modified hello"
console.log(temp)

//result:
//hello
//modified hello

 

아래와 같이 같은 변수명으로 재선언을 하게 되면 오류를 출력합니다.

let temp = "hello"
console.log(temp)
temp = "modified hello"

let temp = "error!"

//error:
//이미 temp가 선언되어있으므로 에러

 

 

 

- var

 

 

자바스크립트에서 사용되는 변수 타입 중에 가장 유의해서 사용해야 하는 것이 바로 var입니다.

기본적으로 쓰임새는 let과 크게 다르지 않지만, 스코프가 다르기 때문입니다.

 

그 이유는 바로 호이스팅이 가능하기 때문인데요,

먼저 호이스팅이란 무엇인지에 대해서 먼저 다뤄보겠습니다.

 

 

호이스팅?

호이스팅은 if문, while문과 같은 블록 안에 선언이 되어도, 그 바깥 범위까지 계속 유효하게 남아있는 것을 의미합니다.

 

아래와 같은 코드를 실행시켜보겠습니다.

if (true){
  var varTemp = "hoisting!";
}

console.log(varTemp);

 

 

해당 코드를 실행시켜보면 hoisting!이라는 문장이 출력됩니다.

그 이유는 바로 var 타입이 갖고 있는 스코프는 function-scoped, 즉 함수 내의 어디든 선언만 된다면 마치 제일 위에 선언한듯한 유효범위를 가지게 됩니다.

그렇기 때문에 if 블록 내에 선언이 되었어도, 마치 상단에 선언하고 if블록와 그 바깥에서 사용한 것 같은 결과를 내는 것입니다.

 

 

그렇다면 다음에서도 hoisting이 출력될까요?

function fun(){
  var varTemp = "hoisting!";
}

console.log(varTemp);

 

위의 코드를 실행시켜보면 에러가 납니다.

이는 단순히 var 타입이 무조건 모든 곳에서 쓰인다는 것이 아니고,

function 내부의 전범위가 유효범위임을 알 수 있습니다.

 

 

 

var이 갖고 있는 두번째 특징은 재선언이 가능하다는 점입니다.

즉, 아래와 같은 코드가 오류 없이 실행됩니다.

 

var varTemp = "value";
var varTemp = "modified value"

console.log(varTemp);

//result:
//modified value

 

이렇듯 var은 함수 스코프 기반이기도 하고, 재선언 또한 가능하기 때문에

예상치 못하게 중간에 다른 사람이 변수를 재할당 하는 등의 오류가 생길 수 있습니다.

따라서 var보다는 let을 사용하여 변수를 선언하도록 권장하고 있습니다.

 

 

 

- const

 

 

const는 let과 비슷하지만 한 번 선언할 때에 다시 값을 할당할 수 없고,

선언과 동시에 값을 정의해야합니다.

 

const pi = 3.14;
console.log(pi);

//result:
//3.14

 

따라서 const에는 함수나, PI과 같은 고정적인 값들을 정의하는 데에 잘 사용됩니다.