Module

• 자주 사용하는 코드를 파일화하여 재사용
• 네이티브 자바스크립트 모듈은 import, export문에 의존적
• ex) RequireJs, CommonJS, AMD .... Webpack, Babel

---

1. export

• 함수, 객체, 원시값을 내보낼 때 사용
• 변수 하나하나의 값을 선언 후 내보냄

// UserInfo.js
var gender = 'female';

export var name = 'ahakim';
export var age = 25;
export {gender};

require

var userInfo = require("./UserInfo.js");

console.log(userInfo.name, userInfo.age, userInfo.gender);
// [결과] ahakim 25 female

import

import {name, age, gender} from './UserInfo.js';

console.log(name, age, gender); 
// [결과] ahakim 25 female

---

2. exports

• 함수, 객체, 원시값을 객체의 형태로 내보낼 때 사용
• exports객체를 내보내므로 객체의 프로퍼티 형태로 내보냄

// UserInfo.js

exports.name = 'ahakim';
exports.age = 25;
exports.gender = 'female';

require

var userInfo = require("./UserInfo.js");

console.log(userInfo);
console.log(userInfo.name, userInfo.age, userInfo.gender);

// [결과]
// { name: 'ahakim', age: 25, gender='female' }   
// ahakim 25 female

import

import UserInfo from './UserInfo.js';

console.log(UserInfo)
console.log(userInfo.name, userInfo.age, userInfo.gender);

// [결과]
// { name: 'ahakim', age: 25, gender='female' }   
// ahakim 25 female

---

3. export default

• 분리되어 있는 파일 내 내보낼 하나의 고정된 값만 내보낼 때 사용

// UserInfo.js

var name = 'ahakim';
var age = 25;
var gender = 'female';

export default {name, age};

require

var userInfo = require("./UserInfo.js");

console.log(userInfo)
console.log(userInfo.default);

// [결과]
// Object {default: {name: 'ahakim', age: 25, gender: 'female'}}
// Object {name: "ahakim", gender: "female"}

import

import UserInfo from "./UserInfo.js";

console.log(UserInfo);
console.log(UserInfo.default);

// [결과]
// Object {name: "ahakim", gender: "female"}
// undefined