[JavaScript] JavaScript 함수 - 호이스팅

- 호이스팅(Hoisting)이란?

자바스크립트 문법에서 변수나 함수를 선언 이전에 사용할 수 있다는 뜻이다. 실제로 코드가 끌어올려지는 것은 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하기 때문에 실제 메모리에서는 변화가 없다.

 

📌 함수 표현식

 원래 자바스크립트는 위에서부터 아래로 해석되어 읽혀진다. 그래서 아래 사진처럼 함수가 호출되는 부분을 윗부분으로 옮기게 되면 아직 함수가 만들어졌지 않았기 때문에 콘솔에 오류가 떠 실행이 불가능하다. 함수표현식은 함수선언문과 달리 선언과 호출 순서에 따라서 정상적으로 함수가 실행되지 않을 수 있다. 변수에 할당된 함수표현식은 끌어 올려지지 않기 때문에 이때는 변수의 스코프 규칙을 그대로 따른다.

함수 표현식

 

📌 함수 선언문

그러나 함수 표현식이 아닌 함수 선언문이면 호이스팅이 발생해서 가능해진다.

호이스팅은 함수선언문과 함수표현식에서 서로 다르게 동작하기 때문에 주의해야 한다. 함수선언문은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.

 

함수를 밑에서 선언한다면 해석하기가 좋지 않고 가독성이 떨어진다. 호이스팅 현상을 이용해 함수 이름만 보고도 대략적으로 로직을 유추해볼 수 있기 때문에 이러한 방법을 많이 사용하게 된다. 

함수 선언문

 

[JavaScript] 호이스팅(Hoisting)이란 - Heee's Development Blog