[Javascript/자바스크립트] var, let, const 차이점 / 호이스팅(hoisting)이란?

---

교육할 때는 var, let, const 에 대해서 모두 배우긴 했지만 대부분 var를 기준으로 코딩하고 배워서 let, const의 차이점에 대해 한번 정리해야 할 필요가 있어서 정리.

 

변수를 선언할 때 var, const, let로 가능한데, 원래는 var만 사용하다가 ES6부터 const, let 키워드가 추가되었다. 

※ ES6란? ECMAScript의 약자이고 숫자 6은 여섯번째 ES라고 생각하면 됨. (ECMAScript는 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어) ES는 프로그래밍 언어가 아니라 스크립트 언어들에 대한 표준, 규격임. 

 

---

var

• 변수 중복 선언 가능, 변수 재할당 가능.

var ddururi = "뚜루리";
var ddururi = "뚜루리2"; //변수 중복선언 가능
ddururi = "뚜루리3"; // 변수 재할당 가능

• 변수가 선언되지 않았는데 참조 가능 (변수 호이스팅)

console.log(ddururi); // error가 아닌 undifiend가 뜸.
var ddururi = "뚜루리";
console.log(ddururi); // 결과값 : 뚜루리

 

[기존 var의 문제점]

• 변수 중복 선언이 가능하여, 예기치 못한 값을 반환할 수 있음.
• 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역변수로 됨.
• 변수 선언문 이전에 변수를 참조하면 언제나 undifined를 반환함. => 변수 호이스팅

※ 변수 호이스팅은 중요한 개념이라, 뒤에 자세히 기술함. 

 

이 문제점들을 해결한 것이 let과 const.

 

let

• 변수 중복 선언은 불가능. 변수 재할당은 가능. 

let name = "뚜루리";
let name = "뚜루리2"; // error. 변수 중복선언 불가능
name = "뚜루리3"; // 변수 재할당 가능

 

const

• 반드시 선언과 초기화를 동시에 진행되어야 함.
• 변수 중복선언 불가능, 변수 재할당 불가능.
• But, 배열의 요소 및 객채의 속성은 변경 가능.

const name = "뚜루리";
const name = "뚜루리2"; // error. 변수 중복선언 불가능
name = "뚜루리3"; // error. 변수 재할당 불가능

 

 

---

 

변수 호이스팅(Hoisting)?

호이스팅을 이해하려면 일단 변수 생성에 대해 알아야 함. 변수 생성은 선언 -> 초기화 -> 할당 총 3단계로 이루어진다. 

• 선언 단계 : 변수를 실행 컨텍스트에 변수 객체에 등록, 이 변수 객체는 스코프가 참조하는 대상이 됨.
• 초기화 단계 : 변수 객체 등록된 변수를 위한 공간을 메모리에 확보. 이 단계에서 변수는 undefined로 초기화 됨.
• 할당 단계 : undefined로 초기화된 변수에 실제 값을 할당.

 

호이스팅은 '선언이 먼저 메모리에 저장되었다'라는 의미.  즉, 모든 '선언이 끌어올려진다.' 라는 뜻.

즉, 변수 선언이 어디에 있든 상관없이 다른 코드보다 먼저 실행되는 특징.

 

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것

 

1) var의 경우

선언과 초기화(undefined)가 한 번에 이루어져 메모리에 저장된다. 그래서 변수를 참조해도 에러가 나지 않고 undefined를 반환함. 예를 보자.

console.log(ddururi); // 선언 + 초기화가 된상태. undefined는 뜨지만 에러는 안남.
var ddururi = "뚜루리"; // 선언 + 초기화 + 할당된 상태.
console.log(ddururi); // 출력값 : 뚜루리

 

 

2) let의 경우

초기화 되지 않은 상태에서 선언만 메모리에 저장된다. 초기화되지 않으면 변수를 참조할 수 없기 때문에 변수를 참조하면 에러를 일으킴.

console.log(ddururi); // error. 선언은 되었지만 초기화가 안되서 참조가 불가능하여 에러.
let ddururi; // 초기화 단계 진행.

 

3) const 의 경우

const ddururi; // error. const는 선언과 동시에 할당해야 함.

const의 경우 재할당도 불가능함은 물론이고 선언과 동시에 할당해야 하는데 그렇게 안해서 error.

 

[여기서 참고해야 할 점]

• 여기서 중요한 지점은 이 호이스팅이라는 용어가 ‘선언이 먼저 메모리에 저장되었다.’는 것을 의미하기 때문에 즉, ‘선언이 끌어올려진다’는 의미이기 때문에 모든 선언은 호이스팅이 일어난다는 말은 참이된다.

• 자바스크립트의 모든 선언에는 호이스팅이 일어나지만 let, const, class를 이용한 선언문을 호이스팅이 발생하지 않는 것처럼 동작한다.
• 즉, 호이스팅이 파일의 맨 위로 끌어올려진 것 같은 현상을 의미할 때 선언문 이전에 참조해서 에러를 발생시킨다고 호이스팅이 일어나지 않은 것은 아니라는 의미이다.

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

 

 

 

---

출처 및 참고

https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

• https://medium.com/@su_bak/javascript-var-let-const%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90-9fab5c264c9c
• https://www.howdy-mj.me/javascript/var-let-const/
• https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/