변수, 함수, 클래스 내보내기
// 배열 내보내기
export let foods = ["pizza", "hamburger", "chicken"];
// 상수 내보내기
export const MODULES_BECAME_STANDARD_YEAR = 2015;
// 클래스 내보내기
export class User {
construcor(name) {
this.name = name;
}
}
// 함수 내보내기
const App = () => console.log("hello");
export default App;
// 모듈 내보내기
export { name1, name2 as yeji, ..., nameN} // does not set the default export
함수 가져오기
import {sayHi, sayBye} from "./say.js";
// say.js
const sayHi = () => console.log("hello");
const sayBye = () => console.log("bye");
const etcHi = () => console.log("bye");
const etcBye = () => console.log("bye");
export default {sayHi, sayBye};원하는 함수만 import 선언해주면 빌드툴은 선언되지않은 함수는 최종 번들링 결과물에 포함하지 않습니다.
이 과정에서 불필요한 코드가 제거되기 때문에 빌드 결과물의 크기가 작아집니다. -> tree-shaking
모듈 export default
모듈은 크게 두종류로 나뉩니다.
1. 복수의 함수가 있는 라이브러리 형태의 모듈
2. 개체 하나만 선언되어있는 모듈
대체로 두번째 방식으로 모듈을 만드는걸 선호 합니다.
// user.js
export default class User {
constructor(name) {
this.name = name;
}
}
// main.js
import User from "./user.js"; // default 한 모듈을 가져오려면 중괄호가 필요 x
new User("john");export default를 사용하면 해당 모듈엔 개체가 하나만 있다는 사실을 명확히 나타낼 수 있습니다.
최대 하나의 default export가 있으므로 내보낼 개체에 이름이 없어도 해당 모듈을 사용할 수 있습니다.
사용예)
export default class { //클래스 이름이 없음
constructor() {...}
}
export default () => console.log("say hello"); // 함수 이름이없음
export default ["jan", "yeji", "yunrap"] // 이름없이 배열형태의 값내보냄
'프로그래밍 > JavaScript' 카테고리의 다른 글
| 실행 콘텍스트 (Execution context) (1) | 2023.12.25 |
|---|---|
| [반복문] for() forEach() map() filter() 어떨때 사용?? (0) | 2023.10.04 |
| 자바스크립트의 핵심개념 (0) | 2022.07.04 |
| return function() 함수를 리턴하는기법은 어디에 사용할까? (0) | 2022.06.25 |
| [인사이드 자바스크립트] 함수와 프로토타입 체이닝 (0) | 2022.06.11 |