본문 바로가기
컴퓨터/Frontend

[Javascript] 호이스팅

by stdFrog 2023. 3. 15.

호이스팅은 자바스크립트의 특징인데 간단하게 얘기하면 함수 선언식으로 만들어진 함수들을
프로그램 실행 전에 코드의 최상단으로 끌어올려 해석하는 것을 말한다.

예를 들어 다음과 같이 작성할 수 있다는 뜻이다.

console.log(displayText());

function displayText(){
	return "Hello World";
}


선두에선 어떠한 함수를 호출하여 그 결과값을 콘솔에 출력하고 있다.

호출되는 함수는 출력 함수 뒤에 위치해 있는데 이 구문이 실행되려면 상식적으로 출력 함수 앞에 위치해 있어야 할 것이다.


그런데, 자바스크립트에선 위와 같이 함수 선언식(정규)으로 만든 함수는 소스 코드 내부에서 어느곳에 위치하건 최상단으로 끌어올려 먼저 해석한 후 프로그램을 순차적으로 실행한다는 특징을 갖고 있다.

다시 말해 다음과 같이 해석하고 실행한다는 것이다.

function displayText(){
	return "Hello World";
}

console.log(displayText());


C에선 함수의 형태를 최상단에 알리고 후미에 실제 코드를 작성하곤 했다.
긴 코드를 작성하다가 수정해야 될 때 간혹 함수를 최상단으로 끌어올려 다시 작성해야 하는 번거로움을 덜어준 것이다.

단, 함수 선언식에 대해서만 이렇게 동작하며 함수 표현식으로 작성된 함수에 대해서는 위와 같은 동작을 하지 않는다.


실제 모듈로 포함되지 않는 그저 실행하는 구문(표현식)에 대해선 호이스팅이 동작하지 않으며, 모듈 형태를 가진 구문(선언식)에 대해서만 동작하는 것으로 보인다.

 

이에 대해선 조금 더 깊게 연구해보고 추가 자료를 올려야겠다.

반응형

'컴퓨터 > Frontend' 카테고리의 다른 글

[Javascript] 객체와 프로퍼티  (0) 2023.03.15
[Javascript] 콜백함수  (0) 2023.03.15
[Javascript] 백틱과 템플릿 리터럴  (0) 2023.03.15
[Javascript] var와 let의 차이  (0) 2023.03.15
[Javascript] 함수 표현식  (0) 2023.03.15

댓글