호이스팅

호이스팅이란 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상을 의미합니다. 자바스크립트에서 함수는 실행되기 전 필요한 변수값들을 모아 유효범위의 최상단으로 끌어올리게 됩니다.

1. 호이스팅의 대상 : 함수 선언문

이러한 호이스팅은 var변수와 함수 선언문에서만 일어나게 됩니다.

함수 선언문으로 작성된 함수 사용 시에는 호이스팅이 발생하여 함수 먼저 호출 가능합니다. 함수선언문의 경우 함수 선언, 초기화, 할당이 한번에 이루어지 때문입니다.

함수 선언문

const a = 7

double() // 값: 14

function double() {
  console.log(a * 2)
}

함수 표현식
함수 선언문과 달리 함수 표현식은 인터프리터가 해당 코드에 도달할 때만 로드가 되기 때문에 함수 사용 전에 호출이 불가합니다.

const a = 7

double() // TypeError: double is not a function

const double = function () {
  console.log(a * 2)
}

2. 호이스팅의 유용성

• 현재 예시로 든 함수의 경우 복잡한 로직이 들어가지 않았지만, 프로젝트를 진행하고 코드를 실제로 작성하면 함수 안에는 복잡한 로직이 얼마든지 들어갈 수 있습니다.
• 그런데 이러한 함수를 호출 전에 작성을 하게 되면 함수가 어디에서 실행이 되는지를 찾기전에 복잡한 로직을 지나야합니다. 따라서 해석하는 것이 그다지 좋지 않습니다.
• 하지만 자바스크립트의 호이스팅을 이용하면 함수의 이름만 보고도 대략적인 함수의 로직을 추측해볼 수 있기 때문에 대체로 함수가 직접적으로 만들어진 부분은 전체 코드의 최하단에 작성을 하곤 합니다.