다른 파일에 있는 자바스크립트의 기능을 특정 파일에서 사용할 수 있는 것을 의미합니다.
export 변수, 함수
다른 파일에서 가져다 쓸 변수나 함수의 앞에 export
라는 키워드를 붙입니다.
익스포트된 파일은 임포트로 불러와 사용할 수 있습니다.
import { 불러올 변수 또는 함수 이름 } from '파일 경로';
export let pi = 3.14;
export function sum(a, b) {
return a + b;
}
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;