일반스크립트
일반 스크립트 예시
<script src="./data.js"></script>
<script src="./index.js"></script>모듈이 아닌 일반스크립트를 따로 로드하여 실행한 경우입니다.
위 경우는 하나의 전역스코프를 공유하게 됩니다. 마치 한 파일에서 로드되는 것 같이 동작합니다.
// data.js
let foo = 10;
//index.js
console.log(foo) // 10위 처럼 foo 에 접근할 수 있습니다.
각 파일의 최상위 스코프(함수 밖)에서 선언한 변수,함수 들이 전역 스코프에 등록되기 때문입니다.
📌 당연히 한 파일로써 동작하는것은 아닙니다.
// data.js
console.log(foo); //Uncaught ReferenceError
//index.js
var foo = 10; // var로 선언한경우는 window객체의 property로 등록됨만약 아예 한 파일 처럼 동작을 한다면, var의 호이스팅으로 인해 undefined가 나와야합니다.
모듈스크립트
위처럼 하나의 전역공간을 공유하다보면, 의도치않은 변수 재정의 등 많은 실수를 할 수 있습니다. 또한 확장성을위해 모듈화를 할 필요가 있죠.
모듈화를 하게되면 파일마다 각 각의 모듈스코프를 갖게됩니다.
📌 부가설명
모듈이 도입되기전 일반 스크립트에서는, 함수밖에서 선언한 모든 변수,함수 들이 전역스코프에 등록되었습니다.
하지만 각 모듈파일의 함수밖에서 선언한 모든 변수,함수들은 이제 모듈스코프에 등록됩니다.
모듈을 지원하는 다양한 방법
자바스크립트는 클라이언트 사이드(브라우저 환경)에서 실행되므로, 모듈 기능을 이용하려면 라이브러리의 도움을 받아야합니다.
모듈을 지원하는 라이브러리로 CommonJs와 AMD가 등장했습니다.
Node.js는 전자를 택했습니다.
ES6의 등장
ES6에서도 모듈 기능(ESM)을 추가했습니다.
<script src = "./~" type="module"/>type 속성에 module을 추가하면 해당 js파일은 모듈로써 동작하게 됩니다.
일반 js파일과 구분하기위해 확장자를 mjs로 사용할 것을 권한다고 합니다.
또한 모듈스크립트에서는, strict mode가 자동으로 적용됩니다.
이제 모듈 파일에서 각 각 변수를 var로 선언하여도, 전역변수가 아닐뿐더러 window(전역) 객체에 추가되지 않습니다.
import, export 예시
1. 모듈객체의 속성으로 내보내기
// data.js (내보내는 모듈)
let exchangeLate = 1200;
export let dollarToWon = function(x){
return x*1200
}
//index.js (불러오는 모듈)
import {dollarToWon} from './data.js';
console.log(dollarToWon(30)); // 결과 :36000
object destructuring을 통해 import 해오는 방식입니다.
여러가지 변수들을 내보낼때 위 방식을 사용합니다.
as를 사용해서 받아올 수도 있습니다.
👇 모듈객체를 확인해보면서 별칭 as키워드를 사용해봅시다.
// data.js
export let exchangeLate = 1200;
export let dollarToWon = function(x){
return x*1200
}
// index.js
import * as lib from './data.js';
console.log(lib);
//lib.exchangeLate, lib.dollarToWon 으로 접근할 수 있습니다.
모듈객체 lib
Module {Symbol(Symbol.toStringTag): 'Module'}
dollarToWon: (...)
exchangeLate: (...)
Symbol(Symbol.toStringTag): "Module"
get dollarToWon: ƒ ()
set dollarToWon: ƒ ()
get exchangeLate: ƒ ()
set exchangeLate: ƒ ()
2. 내보내려는 속성이 한개일 때는 default로
//data.js
let exchangeLate = 1200;
let dollarToWon = function(x){
return x*1200
}
export default dollarToWon
//index.js
import tempFunc from './data.js'; // 받아올때는 임의의 이름으로 받아올수 있습니다.
console.log(tempFunc(30));export default를 사용하면 const,let,var 와 같은 변수선언 키워드를 동시에 쓸 수 없다고 합니다.
트릭) default 키워드를 아래와 같이 사용해도 됩니다!
//data.js
let exchangeLate = 1200;
let dollarToWon = function(x){
return x*1200
}
const obj = {dollarToWon,exchangeLate}
export default obj
//index.js
import obj from './data.js';
console.log(obj); // 결과: {exchangeLate: 1200, dollarToWon: ƒ}드디어 정리가 끝났네요. 그동안 직관적으로는 이해해서 사용하고있지만, 따로 공부를 안하고 넘어가서 뭔가 애매~했던 개념을 확실히 정리한 것 같습니다.
나름대로 정리하면서 더 많은것을 알게되었는데 덧붙이기엔 벗어난 내용이 많아서
관심이 생기면 또 포스팅 하겠습니다.
