[ES6] 호이스팅과 var , let , const 비교 +예시 더 추가하기

💡 변수의 생성 단계

1. 선언단계(Declaration phase)

     변수 객체에 변수를 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다.

2. 초기화 단계 (Initialization phase)

    변수 객체에 등록된 변수를 메모리에 할당한다. 이 단계에서 변수는 undefined로 초기화 된다.

3. 할당 단계( Assignment phase)

    undefined로 초기화된 변수에 실제 값을 할당한다.

💡 var의 문제점

1. 함수 레벨 스코프(Function-level scope)

   - 전역 변수 남발

   - for문 초기화식에서 사용한 변수를 외부에서 참조할 수 있다.

2. var 키워드 생략 허용

    - 의도하지 않은 변수의 전역화

3. 중복 선언 허용

   - 의도하지 않은 변수값 변경

4. 변수 호이스팅

   - 변수를 선언하기 전에 참조가 가능하다

💡 호이스팅(Hoisting)이란?

- 호이스팅은 var , let , const, function 등 모든 선언을 유효범위(scope)에 따라 가장 위로 끌어올리는 것이다.

- 호이스팅으로 초기화 된 값은 제외하고 선언만 끌어 올린다.

- 선언과 할당의 분리라고 생각하면 쉽다.

- 유효범위에는 '함수레벨 스코프'와 '블럭레벨 스코프'로 구성되어 있다.

- var는 함수레벨 스코프이고 let,const는 블럭 레벨 스코프이다. 

- var는 초기 값이 없다면 선언와 동시에 undefined로 초기화 되기 때문에 선언 전에도 사용이 가능하다.

💡 var , let , const 비교

	var	let	const
재선언가능여부	가능	불가능	불가능
스코프	함수레벨	블럭레벨	블럭레벨
초기값	선택	선택	필수
값 재할당 여부	가능	가능	불가능
선언 전 사용	가능	불가능	불가능

 

💙 const 와 let  값 변경 여부에서 헷갈릴수 있는 부분이 있어서 첨언해보자면 (나도 헷갈렸다.)

      여기서 변경은 값의 변경이 아니라 '메모리 주소'의 변경이다.

       let 은 메모리 주소 변경이 가능 하고 const 는 메모리 주소 변경이 불가능하다.

let Arr = [];
Arr.push(1);
Arr.push(2);
Arr.push(3);

//	Arr 배열안에서 값이 추가되지만 메모리 주소는 바뀌지 않는다.
//	그래서 const를 사용해도 된다.

const Arr = [];
Arr.push(1);
Arr.push(2);
Arr.push(3);

💡 예시 

console.log(num);		// undefined
var num;

 

참고

poiemaweb.com/es6-block-scope

let, const | PoiemaWeb