[JS] hoisting

오늘 받은 면접질문 중 하나가 hoisting이었는데,
아직 hoisting에 대해 정확히 이해를 못한 것 같아서
다시 정리해봐야겠다.

변수

1) var는 한번 선언된 변수를 다시 선언할 수 있다.

var name = 'A';
console.log(name); //A
var name = 'B';
console.log(name);//B

//let은 안된다.
let name = 'A';
console.log(name); 
let name = 'B';
console.log(name);
//Uncaught SyntaxError: Identifier 'name' has already been declared 

2) var는 선언하기 전에 사용할 수 있다.

console.log(name); //C
var name = "C";

var name;
console.log(name);
name = "C"
//이렇게 동작하는 원리와 같다. 
//name변수가 최상위로 올라간 것처럼 작동하는데 이것이 hoisting이다.

//let은 안된다.
console.log(name);
let name = 'D';
//Uncaught ReferenceError: Cannot access 'name' before initialization
//let은 할당하기 전에 사용할 수 없다. 
//호이스팅은 스코프단위(함수 내부)로 실행

hoisting

변수의 선언과 초기화 분리 후 선언만 코드의 최상단으로 옮기는 것.
변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미.

호이스팅의 장점: 예측가능한 코드 작성 , 버그 방지

변수의 생성단계

1. 선언단계
2. 초기화 단계 (undefined를 할당해주는 단계)
3. 할당 단계

var는 1,2번 선언,초기화가 동시에 일어난다.
let은 1,2,3번 순서대로 이뤄진다.
즉, 선언만 하고 초기화를 하지 않으면 ReferenceError가 발생한다.
const는 1,2,3번 동시에 이뤄진다. 선언하면서 할당해줘야한다.

변수 스코프 비교

• var : 함수 스코프(function-scoped)
  -> 함수 스코프 안에서 변수 선언되면 함수 바깥에서 사용할 수 없음.
• let, const : 블록 스코프(block-scoped)
  ex. 함수, if문, for문, while문, try/catch문
  -> 블록 스코프 안에서 변수 선언되면 그 외부에서 사용불가.

코딩앙마 유투브 참고
자바스크립트 중급 강좌 #1 - 변수, 호이스팅, TDZ(Temporal Dead Zone)