[javascript] var, let, const, 호이스팅, 스코프에 관하여

* 호이스팅(Hoisting)이란

var로 선언된 변수, 함수가 어떤 코드 보다 위로 끌어올려져 실행되는 자바스크립트가 갖는 특징을 말한다.

var 변수 선언과 var로 선언된 함수선언문에서만 호이스팅이 일어난다.

일어나는 순서는 1. var 변수 선언 2. var로 선언된 함수선언문

 

* 함수선언문

var inner = function(){}

let inner2 = function(){}

 

* 함수 표현문

function funcName(){}

 

* 선언, 초기화, 할당, 참조
- 선언 : 자바스크립트 엔진에게 해당 변수 존재를 알려줌
- 초기화 : 값을 저장하기 위한 메모리 공간 확보
- 할당 : 변수에 값을 저장
- 참조 : 변수에 저장된 값을 읽어 들이는 것

 

* 브라우저별 사용하는 자바스크립트 엔진

- 크롬 : V8
- 파이어폭스 : SpiderMonkey
- 사파리 : Wekit
- 익스플로러, 엣지 : Chakra(차크라)

 

* var , let, const 차이점
- var : 중복 선언(자바스크립트 엔진에 변수명을 알림) 가능, 선언과 동시에 undefined라는 정의되지않은 값 초기화됨. 재할당 가능
- let : 중복선언 불가능, 재할당 가능. 선언후 초기화를 하지않는 변수 접근하면 error 뿜음.
- const : 중복선언 불가능, 재할당 불가능.
선언과 동시에 초기화가 진행되어야하며 그렇지 않을경우 Cannot access 'name' before initialization 에러 문구 뜸.
원시 값에 재할당을 금지할 뿐, 불변이 아니다. 객체에 재할당은 가능하다.

 

* 원시값이란

const name = 'name';
name = 'name2' // Uncaught TypeError

 

* 객체의 재할당

const name = {
	tool: 'tool'
}
name.tool = 'tool2';
console.log(name); // output: {tool: 'tool2'}

 

* let, const 를 써야하는 이유
자바스크립트는 var로 선언된 변수, 함수가 어떤 코드보다도 위로 끌어올려져 실행(호이스팅)이 되므로

중복선언, 재할당이 모두 가능한 var를 사용할경우 예상치 못한 값이 나올 수 있다.
따라서 let, const를 사용하고 변수 선언 및 초기화를 참조 앞에 두는 것이 좋다.

 

* 스코프(유효 범위)
- 블록 레벨 스코프 : if, for, while, try/catch등 지역스코프를 만든다.
- 함수 레벨 스코프 : var 변수가 갖는 특징. 함수 안에서 선언되지 않은 변수는 전역변수로 취급. 중복 선언이 가능한 var 변수는 그 변수(전역에도 선언한 변수)를 사용한 함수를 벗어나도 함수 안에서 중복 선언된 값이 나온다.

함수 레벨 스코프의 예

var num = 5;
function name(){
	var num = 7;
}
console.log(num); // 7

---

아래의 두 블로그 글을 읽고 이해한 부분을 기록해둔 것이므로, 다를수도 있음을 밝힌다.

참고 :
https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html
https://www.howdy-mj.me/javascript/var-let-const/

[JavaScript] 호이스팅(Hoisting)이란 - Heee's Development Blog

var, let, const의 차이 ⏤ 변수 선언 및 할당, 호이스팅, 스코프