# Note : 브라우저의 모듈
2015년 자바스크립트에도 import/export라는 모듈 개념이 도입되었습니다.
하지만 브라우저에는 구현되지 않아서 사용할 수 없었습니다.
크롬 60 버전부터 드디어 브라우저에서도 모듈을 사용할 수 있게 되었습니다.
앞으로 점차 더 많은 브라우저가 모듈 시스템을 지원할 것으로 보입니다.
// var.js 파일
const odd = '홀수입니다.';
const even = '짝수입니다.';
module.exports = {
odd,
even,
};
var.js에 변수 두 개를 선언했습니다.
// func.js 파일
const { odd, even } = require('./var');
function checkOddOrEven(num) {
if (num % 2) { // 홀수면
return odd;
}
return even;
}
module.exports = checkOddOrEven;
require 함수 안에 불러올 모듈의 경로를 적어줍니다.
// index.js 파일
const { odd, even } = require('./var');
const checkNumber = require('./func');
function checkStringOddOrEven(str) {
if (str.length % 2) { // 홀수면
return odd;
}
return even;
}
console.log(checkNumber(10));
console.log(checkStringOddOrEven('hello'));
index.js는 var.js와 func.js를 모두 참조합니다.
# NOTE : ES2015 모듈
ES2015가 도입되면서 자바스크립트도 자체 모듈 시스템 문법이 생겼습니다.
노드의 모듈 시스템과는 문법이 조금 다릅니다.
본문의 func.js를 ES2015 모듈 스타일로 바꿔보겠습니다.
// func.mjs 파일
import { odd, even } from './var';
function checkOddOrEven(num) {
if (num % 2) { // 홀수면
return odd;
}
return even;
}
export default checkOddOrEven;
require와 module.exports가 import, export default로 바뀌었습니다.
이와 같은 사소한 차이가 있습니다.
노드에서도 9 버전부터 ES2015의 모듈 시스템을 사용할 수 있습니다.
하지만 파일의 확장자를 mjs로 지정해야 하고,
실행시 node --experimental-modules [파일명] 처럼 특별한 옵션을 붙여줘야 하는 제한이 있습니다.