모듈화
다른 파일에 있는 자바스크립트의 기능을 특정 파일에서 사용할 수 있는 것을 의미합니다.
Import & Export
- 임포트(Import)와 익스포트(Export)는 자바스크립트의 코드를 모듈화 할 수 있는 기능
기본 문법
export 변수, 함수-
다른 파일에서 가져다 쓸 변수나 함수의 앞에
export라는 키워드를 붙입니다. -
익스포트된 파일은 임포트로 불러와 사용할 수 있습니다.
import { 불러올 변수 또는 함수 이름 } from '파일 경로';예제
- math.js
export let pi = 3.14;
export function sum(a, b) {
return a + b;
}- app.js
import { pi } from './math.js';
console.log(pi); // 3.14
import { sum } from './math.js';
sum(10, 20); // 30사용하는 이유
-
자바스크립트의 유효 범위는 전역으로 시작 합니다.
-
파일마다 고유의 영역이 나누어 지지 않기 때문에 같은 변수로 이름을 작성하면 변수의 유효범위가 분리되지 않기 떄문에
-
변수가 덮어 씌어지거나 예상치 못한 상황을 만날 수 있습니다.
<!-- index.html -->
<body>
<script src="a.js"></script>
<script src="b.js"></script>
<script>
getTotal(); // 200
</script>
</body>// a.js
var total = 100;
function getTotal() {
return total;
}var total = 200;참고
현재 블로그 : https://choi-hyunho.com/