Hoisting 이해하기

[자바스크립트/JavaScript] Hoisting 의 이해

 

 

Hoisting이란, 자바스크립트에서 아직 선언되지 않은 함수/변수를 '끌어 올려서' 사용할 수 있는 자바스크립트의 작동 방식을 의미한다.

myFunction();

function myFunction() {
  console.log('hello world!');
}

위 코드에서 myFunction 함수를 선언하기 전에, myFunction( ) 를 호출해주었다.

함수가 아직 선언되지 않았음에도 불구하고 코드는 정상적으로 작동하게 된다. 

 

이게 잘 작동하는 이유는, 자바스크립트 엔진이 위 코드를 해석하는 과정에서 다음과 같이 받아들이게 되기 때문이다.

function myFunction() {
  console.log('hello world!');
}

myFunction();

 

console.log(number);
var number = 2;
// console>> undefined

위와 같이 var를 이용해서 Hoisting 될 경우 작동이 되지만, const와 let은 Hoisting이 발생하지 않고, 에러가 발생하게 된다.

Codesandbox와 같이 자바스크립트가 Babel이라는 도구에 의하여 const와 let이 var로 변환되는 경우 오류가 발생하지 않는다.

 

Hoisting은 자바스크립트 엔진이 갖고 있는 성질이며, Hoisting을 일부러 할 필요는 없지만 방지하는 것이 좋다.

왜냐하면 Hoisting이 발생하는 코드는 이해하기 어렵기 때문에 유지보수도 힘들어지고 의도치 않는 결과물이 나타나기 쉽기 때문이다.

Hoisting을 방지하기 위해서 함수의 경우 꼭 선언 후에 호출을 하도록 주의하고, var 대신 const, let을 위주로 사용한다.

 

+) 추가적으로 나중에 자바스크립트 개발을 본격적으로하게 될 때에는 ESLint 라는 것을 사용하여 Hoisting이 발생하는 코드는 에디터 상에서 쉽게 발견해낼 수 있다.