호이스팅(hoisting)

🥸 호이스팅은 코드가 실행되기 전에 변수나 함수를 선언했을 때 해당 선언이 스코프의 최상단으로 끌어 올려지는 현상으로, 선언이 코드 실행 전에 메모리에 저장되었다는 의미입니다. 모든 선언은 호이스팅이 일어납니다.

🍒 변수

1. var

선언과 초기화가 동시에 진행된다.

console.log(x); // undefined

var x = 10;
// 초기화 단계에서 undefined로 

2. let/const

선언과 초기화가 분리되어 진행된다.

console.log(x); // cannot access 'x' before initialization

let x = 10;
// 초기화 되지 않으면 변수 참조 불가

---

🍒 함수

1. 함수 선언식

선언과 할당이 동시에 진행된다.

test(); // 10

function test() {
	console.log(10);
}

2. 함수 표현식/화살표 함수

선언과 할당 분리되어 진행된다.

test(); // test is not defined

const test = function() {
	console.log(10);
}

🔥 let과 const는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간인 '일시적 사각지대(TDZ: Temporal Dead Zone)'가 존재하는데, 자바스크립트는 일시적 사각지대에 있는 변수에 접근을 허용하지 않기 때문에 참조 에러가 발생한다.

---

🍒 우선순위

동일한 이름의 변수와 함수를 선언할 때에는 우선순위가 존재한다.

1. 변수 할당 > 함수 선언

변수 할당이 함수 선언보다 우선 순위가 높다.

var test = 'Hello';

function test() {
  console.log('Hi');
}

console.log(typeof test); // string

function test() {
  console.log('Hi');
}

var test = 'Hello';

console.log(typeof test); // string

2. 함수 선언 > 변수 선언

함수 선언은 변수 선언보다 우선 순위가 높다.

var test;

function test() {
  console.log('Hi');
}

console.log(typeof test); // function

function test() {
  console.log('Hi');
}

var test;

console.log(typeof test); // function

🧐 해당 글은 책 모던 자바스크립트 deep dive를 참고하여 작성하였습니다.