JavaScript의 ES 모듈 시스템에서는 as 키워드를 사용해 가져오기(import)와 내보내기(export) 시 이름을 자유롭게 바꿀 수 있습니다. 모듈 내부의 원래 이름은 그대로 유지하면서, 가져오는 쪽에서는 더 짧거나 의미가 분명한 이름을 사용할 수 있고, 서로 다른 모듈 사이에서 같은 이름이 충돌하는 문제도 손쉽게 피할 수 있습니다.
아래 예제는 내보낼 때 testImport 함수를 test라는 이름으로 내보내고, 가져올 때 tellTime 함수를 showTime으로 이름을 바꿔 가져오는 과정을 보여줍니다.
참고 − ES 모듈은 브라우저 보안 정책(CORS)의 제약 때문에 file:// 경로로 직접 열면 동작하지 않습니다. 따라서 이 예제를 실행하려면 반드시 로컬호스트(localhost) 서버 환경이 필요합니다.
예제
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>Renaming imports and exports in JavaScript</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to execute the imported function</h3>
<script src="script.js" type="module"></script>
</body>
</html>
script.js
import {test,tellTime as showTime} from "./sample.js";
let resultEle = document.querySelector('.result');
document.querySelector('.Btn').addEventListener('click',()=>{
resultEle.innerHTML+=test();
resultEle.innerHTML+=showTime();
})
sample.js
function testImport() {
return "Module testImport has been imported" + "<br>";
}
function tellTime() {
return new Date();
}
export { testImport as test, tellTime };
코드 설명
- 내보내기에서 이름 바꾸기 − sample.js의
export { testImport as test, tellTime }구문은testImport함수를test라는 새 이름으로 내보냅니다. 모듈 내부에서는 여전히 원래 이름인testImport로 호출됩니다. - 가져오기에서 이름 바꾸기 − script.js의
import { test, tellTime as showTime }구문은tellTime을showTime이라는 이름으로 가져옵니다. 이렇게 하면 한 파일 안에서 이름 충돌 없이 원하는 이름을 자유롭게 사용할 수 있습니다. - 버튼을 클릭하면 가져온 두 함수가 차례로 실행되고, 그 반환값이
.result영역에 순서대로 출력됩니다.
출력 결과
'CLICK HERE' 버튼을 클릭하면 −
