npm 호이스팅과 js 호이스팅

Hoisting 개념 정리 (JavaScript vs npm)

배경

“호이스팅(hoisting)”이라는 용어는 JavaScript 언어와 npm 패키지 관리에서 모두 사용된다.
동일한 단어를 사용하지만, 적용 대상과 목적, 동작 방식은 서로 다르다.

핵심 질문

• JavaScript에서 말하는 호이스팅은 무엇인가?
• npm에서 말하는 의존성 호이스팅은 무엇인가?
• 두 개념은 어떻게 연결되고, 왜 혼동되는가?

논의 요약

1. JavaScript의 Hoisting

• JavaScript 엔진은 실행 전에 선언(declaration)을 먼저 처리한다.
• 코드가 실제로 이동하는 것은 아니며, 실행 컨텍스트 생성 단계에서 선언을 스코프 상단에 등록한다.

특징

• var
  • 선언은 호이스팅됨
  • 초기화는 호이스팅되지 않음 → undefined
• let, const
  • 선언은 호이스팅되지만 TDZ(Temporal Dead Zone) 로 접근 불가
• 함수 선언문
  • 선언 + 정의 전체가 호이스팅됨

요약

“아래에 선언된 변수를 코드 상단에서도 사용할 수 있게 보이게 만드는 언어 동작”

---

 

2. npm의 의존성 Hoisting

• npm은 여러 패키지가 공통으로 사용하는 의존성을
  상위 node_modules 디렉토리로 끌어올리는 설치 전략을 사용한다.

목적

• 중복 패키지 설치 감소
• 모듈 탐색 경로 단순화
• 설치 구조 최적화

부작용

• 유령 의존성(Phantom Dependency) 발생
• package.json에 선언하지 않은 패키지도 import 가능해지는 문제

---

 

3. 두 Hoisting 개념의 공통점과 차이

구분	JavaScript Hoisting	npm Hoisting
대상	변수, 함수 선언	패키지 의존성
위치	스코프 최상단	node_modules 상단
목적	실행 가능성 확보	중복 제거, 설치 최적화
문제점	TDZ 등 혼동	유령 의존성
본질	언어 실행 모델	패키지 배치 전략

 

공통점:

• “아래에 있던 것을 위에서도 접근 가능하게 만든다”

---

 

4. pnpm과의 연결점

• pnpm은 npm식 의존성 hoisting을 구조적으로 제한
• package.json에 명시된 의존성만 접근 가능
• 의존성 오류를 런타임이 아니라 설계 단계에서 차단

 

결정 사항

• JavaScript 호이스팅과 npm 호이스팅은 같은 개념이 아님으로 명확히 구분한다.
• “호이스팅”이라는 단어는 비유적 유사성 때문에 재사용된 용어로 이해한다.
• 의존성 안정성을 중시하는 환경에서는 pnpm 방식이 더 적합하다고 판단한다.