[JavaScript] 8. 모듈 사용

외부 파일에 선언한 변수를 import해서 사용할 수 있다.

 

 

 

먼저, html 문서에서 <script type="module">로 설정한 후, 변수명에 맞게 import해준다.

<script type="module">
    import {title, mul} from './cal.js';
    console.log(title);
    console.log(mul(10, 2));
</script>

 

 

 

곱셈을 계산하는 모듈을 가져와 사용하려고 한다.

다른 곳에서 사용하도록 설정하는 방법에는 2가지 방법이 있다.

 

1. 외부에서 사용하도록 허가할 변수마다 export 키워드 붙이기

export const title = "계산기 모듈";

export function mul(i, j) {
    return i * j;
}

function off() { //외부에서 사용 불가
    console.log("종료");
}

 

 

2. 마지막에 외부에서 사용하도록 허가할 변수들을 모아서 한 번에 export 키워드 붙이기

//cal.js
const title = "계산기 모듈";

function mul(i, j) {
    return i * j;
}

function off() {
    console.log("종료");
}

export { title, mul };

 

 

+) export default 키워드

해당 파일을 호출하는 곳에 default로 넘기는 값으로, 중복해서 사용할 수 없다.

default로 넘어오는 값은 { }를 적지 않고, 이름을 마음대로 지정해서 받아올 수 있다.

또한, 넘어오는 값의 이름은 'as'를 이용해 변경해서 쓸 수 있다.

<script type="module">
    import info, {mul as multiple} from './cal.js';
    console.log(info.title);
    console.log(info.add(2, 3));
    console.log(multiple(10, 2));
</script>

 

export default는 이름 없는 class이다.

//cal.js
export function mul(i, j) {
    return i * j;
}

export default {
    title: "계산기 모듈",
    add(i, j) {
        return i + j;
    },
}