하나의 큰 자바스크립트 파일을 이용할 필요 없이 역할과 의미에 맞게 코드를 나누어 불러오고 내보내면서 조금 더 효율적으로 코드를 관리할 수 있다.

Native ES Modules

ES6 Module

<script src="path" type="module"></script>

import exportDefaultSomething,{ exportedSomething} from "module1"
import module2 from "module2"

export default {}
export const somthing
export function fn(){}

module pattern

//index.js
//-global scope
//--Module scrop
//---function scope
//----block scope
//IIFE
// 여전히 전역을 오염 시킨 방법
const someModule = (function(v1,v2){
  //외부에 영향을 주지 않는 스코프를 가질 수 있어요!
	// all private here
  return something...
})(v1, v2);

CommonJs

그러나 브라우저는 인식 하지 못한다. browserify 사용가능.

• browserify app.js > bundle.js

const module1 = require("module1");
module.exports = {
  
}

AMD

define(["module1"],["module2"], function(){

});