모듈
자바스크립트 파일 하나로, 복잡하고 많은 양의 코드를 기능에 따라 나누면
1. 코드를 효율적으로 관리
2. 비슷한 기능이 필요한 경우 다른 프로그램에서 재 사용할수 있음.
모듈 스코프
모듈이 되는 파일은 이 파일만의 독립적인 스코프를 가져야 한다.
HTML 파일에서 자바스크립트 파일을 불러올 때, 모듈 스코프를 갖게 하려면 script 태그의 type 속성을 module 값으로 지정해야함.
<body>
<script type="module" src="index.js"></script>
</body>
모듈 문법
모듈 문법은 기본적으로 import, export 로 나뉜다.
export : 모듈 스코프를 가진 파일에서 외부로 변수, 함수를 내보낼 때
import : 모듈 파일에서 내보낸 변수나 함수를 import 로 가져옴
export
// printer.js
export const title = 'CodeitPrinter';
export function print(value) {
console.log(value);
};
import
// index.js
import { title, print } from './printer.js';
print(title);
이름 바꿔서 import 하기
import 키워드로 모듈을 불러올때, as 를 사용하면 변수나 함수의 이름을 변경해서 가져올 수 있다.
import { title as printerTitle, print, printArr } from './printer.js';
import { title, data as members } from './members.js';
printer(title);
arrPrinter(members);
한꺼번에 import 하기
import 할 때, 와일드카드 문자 (*) 와 as 를 활용하면 export 하는 대상을 하나의 객체로 불러올 수 있다.
import * as printerJS from './printer.js';
console.log(printerJS.title); // CodeitPrinter
console.log(printerJS.print); // ƒ print(value) { console.log(value); }
한꺼번에 export 하기
변수나 함수 앞에 매번 export 키워드를 붙일 수도 있으나, 선언된 변수나 함수를 하나의 객체로 모아 한번에 export 할 수 있다.
const title = 'CodeitPrinter';
function print(value) {
console.log(value);
}
function printArr(arr) {
arr.forEach((el, i) => {
console.log(`${i + 1}. ${el}`);
});
}
export { title as printerTitle, print, printArr };
default export
export 할 때, default 키워드를 함께 사용하면 모듈 파일에서 기본적으로 export 할 대상을 정할 수 있다. 일반적으로 모듈 파일에서 export 하는 대상이 하나라면, export default 를 사용하는 것이 간결.
const title = 'CodeitPrinter';
function print(value) {
console.log(value);
}
export default print;import { default as printerJS } from './printer.js';
console.log(printerJS.title); // CodeitPrinter
console.log(printerJS.print); // ƒ print(value) { console.log(value); }다음과 같이 간결하게 작성할 수 있다.
import printerJS from './printer.js';
console.log(printerJS.title); // CodeitPrinter
console.log(printerJS.print); // ƒ print(value) { console.log(value); }'JavaScript > Modern JavaScript' 카테고리의 다른 글
| [JavaScript] Map, Set (0) | 2023.05.20 |
|---|---|
| [JavaScript] 배열 메소드 reduce (0) | 2023.05.19 |
| [JavaScript] 배열 메소드 some과 every (0) | 2023.05.19 |
| [JavaScript] 배열 메소드 filter와 find (1) | 2023.05.19 |
| [JavaScript] finally 문 (0) | 2023.05.19 |
