JS 모듈의 범위

프로젝트 표준화 도중 모듈이 브라우저로 import 되기는 하지만 브라우저 개발자도구에서는 접근이 안되는 현상이 있었다.

그 이유를 찾아보니 모듈자체의 범위를 가지고 있기 때문이였다.
즉, 모듈내에 정의된 변수와 함수는 전역(window)에서 사용할 수 없다. 그래서 콘솔과 같은 모듈 외부에서 접근할 수 없었던것

콘솔에서 확인하고 싶으면 window객체를 사용하여 명시적으로 전역 변수에 할당할 수 있다.

모듈이 자체범위를 가지고 있는 이유 :

모듈은 전역 범위와 별개인 자체 개인 범위를 만듦
이를 통해 모듈은 기능을 캡슐화하고 애플리케이션의 다른 부분과의 이름 충돌을 피한다.

debugger 를 이용해 중단점을 잡아주면 확인가능하다.

<script type="module">  
	import example from "./common/example.js";  
	// window.example = example;  
	  
	document.addEventListener('DOMContentLoaded', () => {  
		// debugger
		document.querySelector('p').innerText = example.getMsg();  // 안녕
		
		function test(str) {  
			let result = str.concat('하세요.');  
			console.log(result);  
		}  
		  
		test(example.getErrReason());  // 안녕하세요.
	});
</script>

> example
x > Uncaught ReferenceError: validator is not defined
    at <anonymous>:1:1