[JavaScript] module

module

모듈의 확장자는 mjs 를 사용한다.

모듈은 독자적인 스코프를 갖는다.

<script type="module"></script> : defer 속성이 default 이다.

window 글로벌 객체를 사용해서 공유할 수는 있지만 식별자가 겹치면 대체된다.

import 한 모듈을 다시 import 하더라도
값이 대체되지 않고 이전에 import한 값이 유지된다.

//keep_export.mjs
export const point = {
	value: "초기값"
};

//keep_one.mjs
import {point} form ".keep_export.mjs";
document.getElementById("one").innerHTML = "1. " + point.value; // 1. 초기값
point.value = "값 변경"; // 주의

//keep_two.mjs
import {point} from "./keep_export.mjs";
document.getElementById("two").innerHTML = "2. " + point.value; // 2. 값 변경

<script type="module"></script> 에서의 this 는 undefined 이다.
알반 파일에서는 window 이다.

export, import 형태

export 대상에 export 키워드 작성

export function name(){...)

중괄호(}에 import 이름 작성

import {name,,, nameN} from "./ export. mjs";

한 번에 export 선언, as 뒤에 나오는게 사용될 식별자이다.

.
.
.
export {namel, ..., nameN};

export, import 이름 변경

export {fromName as toName}; // export시 toName 식별자로 하겠다.
import {toName as name} from "./export.mjs" // import 후 사용시 name 식별자로 사용하겠다.

export default

export default function name(){....}
import name from " /export.mjs";

전체 import

import * as name from " /export.mjs";

const myFirstName = name.firstName;

default

모듈에 export가 하나만 있는 것을 명시적으로 사용할 때 사용

//export.js
export default funtion getPoint(param){
	return param + 100;
};
// import.js
import getPoint from "./export.mjs";
console.log(getPoint("code"));

default를 리스트 형태로 작성

// export.js
function getPoint(id){
	return id + 100;
};
export {getPoint as default}; // 여기서 default는 식별자가 아니라 예약어 이다.

// import.js
import getPoint from "./export.mjs";
console.log(getPoint("code");

함수이름을 작성하지 않는 형태

// export.js
export default function(param){
	return param + 100;
};    

// import.js
import getPoint from "./export.mjs";
console.log(getPoint("code");

* 로 default 를 import
export의 default가 all.default에 설정된다.

// export.js
export default function getPoint(param){
	return param + 100;
};    

// import.js
import * as all from "./export.mjs";
console.log(all.default("code"));