[Javascript] export와 import

1) export(내보내기) -> export 하는 모듈은 "use strict"

- named: 모듈을 특정 이름으로 export

export {myFunction}; //먼저 선언한 함수 내보내기
export const foo = Math.sqrt(2); //상수 내보내기

- default: 모듈을 이름 없이 export

export default function(){} //기본 함수 내보내기
export default class{} //기본 클래스 내보내기

+) 차이점

→ 하나의 모듈(파일)에서는 하나의 default export만 가능

→ named export는 동일한 이름으로 가져올 수 있고, 이름을 바꾸려면 as 사용

import {a as b} from "module.js"

→ {}구분으로는 default export를 사용 불가

 

2) import(가져오기)

import * as myModule from "my-module.js";
//*: 모듈 전체를 가져옴
//myModule로 바인딩
//my-module.js에서 모듈 가져옴

import { myMember } from "my-module.js";
//모듈에서 myMember라는 하나의 모듈만 가져옴

import { member1, member2 } from "my-module.js";
//모듈에서 member1, member2이라는 모듈을 가져옴(모듈 여러개 가져오기)

import { longlonglonglongName as shortName } from "my-module.js";
//좀 더 편리한 이름으로 지정
//원래 longlonglonglongName이라는 이름의 모듈을 shortName이라는 이름으로 바꿔줌
//,로 구분하여 여러개도 가능

import "my-module.js";
//어떠한 바인딩 없이, 모듈 전체의 사이드 이펙트만 가져옴

+) 기본값 가져오기

import myModule from "my-module.js";
//default export를 통해 내보낸 것을 기본값으로 가져올 수 있음

+)  기본 구문도 함께 지정하려면 기본값 가져오는 부분을 먼저 선언해야 함

import myModule, * as Name from "my-module.js";
//myModule: 기본값 가져오기
//* as Name: 전체를 Name에 바인딩

import myModule, {mem1, mem2} from "my-module.js";
//myModule: 기본값 가져오기
//mem1, mem2: 여러 멤버 가져오기

 

* 바인딩에 대해서도 이후 다른 글에 정리하기