[Javascript] var와 let차이 / 호이스팅

Javascript를 이용하여 변수를 선언할 때 var로 선언하여 자주 사용한다.

필자도 var를 사용하지만 오늘은 var와 let의 차이점에 대해 정리해보고자 한다.

 

우선, var보다는 let을 사용하기를 권장한다고 한다.

 

var

var로 선언한 후 정수를 넣으면 정수형, 문자열을 넣으면 문자열로 선언된다.

//정수형
var nNum = 1;

//문자열
var sText = "Dev Log";

JAVA처럼 사용할 변수의 유형에 따라 다르게 선언하지 않아도 된다는 장점이 있다.

하지만, 복잡한 소스에서 해당 변수의 타입이 어떤지 파악하기는 쉽지 않다.

그래서 변수명을 명명할 때 헝가리안 표기법을 사용한다.

---

호이스팅

'코드를 실행하기 전 변수 선언, 함수 선언이 해당 #스코프의 최상단으로 끌어올려진 것 같은 현상'

※주의) 끌어 올려진 것 같은 것이지 올린 것이 아니다.

 

예시

var sText = "Dev Log";
console.log(sText);

console.log(sReturnText);
var sReturnText = "Developer Log";
console.log(sReturnText);

 

두 번째 출력은 선언하지 않은 변수를 출력했기 때문에 에러가 발생해야 하지만 그렇지 않다.

 

결과

//Dev Log
//undefined
//Developer Log

이유는 호이스팅때문이다.

 

이해를 돕기 위해 소스코드로 작성해 보겠다.

(실제 이렇게 동작한다는 것이 아니다. 마지막에서 다시 정리하도록 하겠다.)

var sText;
var sReturnText;

sText = "Dev Log";
console.log(sText);

console.log(sReturnText);
sReturnText = "Developer Log";
console.log(sReturnText);

---

let

위에 예시처럼 선언하지 않은 변수를 사용하였지만 에러가 나지 않고 정상 동작되는 현상이 해결된다.

 

예시

let sText = "Dev Log";
console.log(sText);

console.log(sReturnText);
let sReturnText = "Developer Log";
console.log(sReturnText);

결과

//sText
//ReferenceError : Cannot access 'sReturnText' before initialization

let을 사용하여 변수를 선언하니 초기화되지 않아 접근할 수 없다는 에러 메시지가 출력된다.

---

정리

- 호이스팅은 '코드를 실행하기 전 변수 선언, 함수 선언이 해당 스코프의 최상단으로 끌어올려진 것 같은 현상'이다.

  정확히는 선언이 코드 실행 전에 메모리에 저장되었다는 의미다.

 

- var 사용 : undefined로 초기화되어 메모리에 저장된다.

- let 사용 : 초기화되지 않은 상태로 메모리에 저장된다.