[Node.js] 호이스팅(hoisting)

 

 

---

서론

컴파일러 언어가 아닌 vscode [IDE 통합 개발 환경]와 같은 개발자 도구에서 콘솔 창으로 명령어를 사용하는 javascript는 인터프리터 언어이다.

이러한 인터프리터 언어는 전체 코드를 모두 읽어낸 이후에 사용하는 컴파일러와 다르게 한 줄 한 줄 읽어가며 명령을 실행한다.

 

호이스팅이란?

javascript에서는 변수를 var 또는 let, const로 선언하게 된다.

var로 선언하는 경우 코드를 불러왔지만 사전에 변수에 값이 정의되지 않으면 undefined로 변수를 초기화하고 프로그램의 최상단으로 올려주면서 다른 곳에서 호출하여 사용할 수 있게 되는 것을 호이스팅이라 한다.

 

다시 조금 겹치지만 다른 설명으로 접근하면 호이스팅이란 변수가 한 줄 한 줄 읽어가는 인터프리터 언어에서 선언되기 이전에 다른 변수에서 호출의 경우 자동으로 사용할 수 있게 메모리 공간에 undefined라는 값을 미리 할당하여 최상단으로 끌어올려 주면서 그 값이 최상단부터 내려오면서 변수 값이 저장되지 않은 위치에서 호출되는 경우 undefined라는 값을 대입하여 출력하는 것을 얘기한다.

 

x = 1;
console.log(x + " " + y);
 
const y = 2;
 
a = '크랜';
b = '베리';
 
console.log(a + "" + b);

 

처음 javascript를 배울 때 자습서나 다른 얘기들을 많이 들어보면 var로 선언하는 것 자체가 현업에서 쓰이기 어렵다고들 한다. 많은 자료에서도 높은 비율로 var를 선언하지 않는 것으로 보인다. var로 선언한 경우 언제 어디서 어떻게 에러가 발생할지 모르는 부분이 가장 크며, 전역 변수로 지정되면서 코드 규모가 커지면 자칫 잘못하는 경우 이상한 값을 불러오는 경우가 있기 때문으로 알고 있다.

그런 var를 대체적으로 let이나 const 변수로 초기화하여 사용하게 되는데 let과 const 자체도 호이스팅이 안 되는 것이 아니다.

MDN에 나와있는 내용 용어는 한글보다 영어를 보는 것이 좋다하여 영문 표기를 진행한다.

코드가 디버깅 되면서 끌어 올려서 호이스팅이 되지만 위에 언급된 것과 같이 undefined로 선언되지 않기 때문에 참조 값이 발생하지 않는다. 그래서 ReferenceError가 발생하게 되는 것이다.

 

마지막으로 덧붙이면 호이스팅으로 인한 에러의 문제도 있지만 var와 let 태그를 최상단에서 초기화하면 let 태그는 지역변수지만 var 태그는 전역 변수가 되기 때문에 자칫 잘못 구현하면 스파게티 코드가 될 수 있어서 가독성과 유지 보수성에 영향을 많이 주기 때문에 let과 const가 권장된다.

 

 

---

잘못된 부분이 있는 경우에 댓글 부탁드리겠습니다.

감사드립니다. 다음 포스팅 때 뵙겠습니다.

- 참조 자료 -

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

호이스팅 - 용어 사전 | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let#%EC%8B%9C%EA%B0%84%EC%83%81_%EC%82%AC%EA%B0%81%EC%A7%80%EB%8C%80

let - JavaScript | MDN