[JS] 호이스팅

호이스팅이란?

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.
출처 : MDN

간단 예제

호잇호잇();

호잇호잇 = () => {
	console.log("호잇~~~");
}

실체는?

JS엔진에는 사실 실행 시점에서 변수나 함수만 상단으로 끌어올릴만한 능력 자체가 없다, 즉 실행 전에 어떠한 과정을 거쳐서 정보를 알고있어 가능한것이다

답은 컴파일러에 있다

JS는 코드를 실행전에 따로 컴파일 과정을 거친다 즉 고수준의 언어를 컴퓨터가 이해가능한 저수준으로 쪼개는 과정인데, 이 과정에서 JS엔진에서 모든 스코프를 탐색하면서 변수와 식별자들을 수집한다

즉 실행 시점으로 넘어가기 전에 선언된 식별자에 대한 정보를 알고 있기에 스코프의 어느 지점이든 상관없이 참조를 할 수 있는것이다.

호이스팅의 Rule

호이스팅은 크게 함수와 변수 호이스팅으로 나뉘고 해당 개념에대한 규칙을 요약하자면 아래와 같다.

• 선언된 함수는 상단에서 참조와 호출이 가능하다.
• 선언된 var는 상단에서 참조,할당이 가능하다
• 선언된 let,const는 상단 참조,할당이 불가능하다

함수 호이스팅

함수 호이스팅은 다른 행동들보다 가장 먼저 이루어진다.
함수 호이스팅은 선언문에만 해당이 되는데 즉, 함수 표현식 자체는 어떠한 변수로 함수를 할당하는 모양이라 이것 또한 변수 호이스팅에 가깝기 때문이다.

let value = 'value';
let func = function () {};

변수 호이스팅

변수는 프로그램 내에서 크게 세가지의 단계를 거친다.

• 선언 : 변수 객체가 변수에 대한 식별자들을 수집한다.
• 초기화 : 식별자에 메모리를 할당하고 undefined를 부여한다
• 할당 : 변수 안에 직접 값을 넘겨 준다.

var 호이스팅

호이스팅이 발생하면 선언과 초기화가 동시에 이루어진다.
실행 시점의 스코프 최상단에서 메모리가 살아있기때문에 어디서든지 참조와 할당이 가능해진다.

let, const 호이스팅

호이스팅이 발생하면 선언만 이루어지고, 실행시점에서 선언부가 생길때까지 초기화가 이루어지지 않는다 즉, 해당 변수에 대한 메모리가 없기에 선언부 위에서 참조와 할당이 불가능하다

호이스팅 사용법

추상화 수준으로 나뉜 여러 함수를 어떤 식으로 나열 해볼지 고민하면 사용법에대한 의미를 알수있게 된다.

function handler() {
	util();
}

function util() {}

/*  이렇게도 사용이 가능  */

let util = () => {}
let handler = () => { util(); };

하지만 변수 호이스팅은 필요하지 않으면 "사용하지않는것"이 일반적이다.

{
  const a = 1;
  let b = 2;
  // codes...
}

---

마무리

함수에대한 호이스팅을 적절히 사용한다면 간결한 코드를 만들 수 있지만, 변수에대한 호이스팅이 발생할 수 있기에 사용에 주의를 기하자.

참고한곳
호이스팅에 대한 오해와 진실
MDN 호이스팅