[JS][Vanilla] import, export로 코드를 간결하게 만들기

코드를 간결하게 만드는 것은 굉장히 중요하다.

보기도 좋을 뿐더러 유지보수 측면에서 훨씬 유리해서 더욱 높은 차원의 결과물을 만들어낼 수 있다.

 

https://ko.javascript.info/import-export

모듈 내보내고 가져오기

위의 사이트에 굉장히 자세히 설명이 되어있다.

 

나는 대표적인 몇개만 들고와서 설명해 볼 것이다.

 

 

---

우선 main.js과 같은 폴더에 test.js를 생성한다.

그리고 아래와 같이 입력해보자.

2개의 예시를 들건데, 모두 같은 결과를 낸다.

상황에 따라 골라서 쓰면 된다.

// test.js
// 각각 내보내기

// 변수 내보내기
export let number = 5;

// 배열 내보내기
export let car = ['hyundai', 'kia', 'honda','ford'];

// 상수 내보내기
export const MESSAGE = "Hello World!";

// 함수 내보내기
export var plus = function(a, b){
	console.log(a+b);
}

// 객체 내보내기
export let INFO = {
  isPlaying : false,
  time : GAMETIME,
  score : 0,
}

// test.js
// 한번에 내보내기

let number = 5;

let car = ['hyundai', 'kia', 'honda','ford'];

const MESSAGE = "Hello World!";

var plus = function(a, b){
	console.log(a+b);
}

let INFO = {
  isPlaying : false,
  time : GAMETIME,
  score : 0,
}

// 변수, 배열, 상수, 객체를 한번에 보냄
export { number, car, MESSAGE, plus, INFO };

 

이제 test.js 파일에서 export를 했으니,

main.js에서 import를 해야한다.

import도 마찬가지로 2개의 예시를 보여줄 것이고, 같은 결과를 낸다.

// main.js
// 각각 가져오기
import { number, car ,MESSAGE, plus, INFO } from './test.js';

console.log("number : " + number);
console.log("car : " + car);
console.log("MESSAGE : " + MESSAGE);
plus(2,3);
console.log("INFO : " + INFO);

// main.js
// 한번에 가져오기
import * as TEST from './test.js';

console.log("number : " + TEST.number);
console.log("car : " + TEST.car);
console.log("MESSAGE : " + TEST.MESSAGE);
TEST.plus(2,3);
console.log("INFO : " + TEST.INFO);

 

---

as와 default로 내보내고 가지고 오는 이름을 다르게 설정해줄 수도 있다.

사용하기 나름이고 알아만 놨다가 나중에 검색해서 쓰면 될 것 같다.