[JavaScript] export와 import

export

• .js 파일(=모듈)의 변수나 함수 등의 항목을 다른 .js에서도 사용할 수 있도록 내보내는 지시자

// 직접 명시하기
export let(/var/const) name1;
export let name2='foo', name3='bar';
export function functionName (p) {...}
export class ClassName {...}

// 정의된 항목을 골라서
export { name4, name5 };
export { name6 as newName };

// 모듈에 항목이 하나뿐일 때
// 이름이 굳이 필요 없음
export default 'foo';
export default function (p) {...}
export default class {...} // 이건 이름이 없어도 되는지 불확실
export { name7 as default }

import

• 다른 모듈에서 export된 항목을 가져오는 지시자
• html의 \<script>에서는 직접 사용할 수 없음

// 명시된 항목을 전부
// default는 포함되지 않음
import * from "module";
import * as name from "module";

// 항목 일부만
import { name1 } from "module";
import { name2 as newName, name3 } from "module";

// export default된 항목
// 중괄호를 쓰지 않음
// as 키워드 없이도 이름을 마음대로 붙일 수 있음
import name from "module";

• 이 외에도 활용법이 있지만 가장 기본적인 것들만 나열

참고한곳

• export @ MDN
• import @ MDN
• 모듈 내보내고 가져오기 @ 모던 JavaScript 튜토리얼