Deep dive - 48.모듈

🔶1. 모든 자바스크립트 파일은 하나의 스코프를 공유함.

: 여러개 자바스크립트 파일은 결국 하나의 자바스크립트 파일 내에 있는 것처럼 동작함.

<!--html-->
<script src="foo.js"></script>
<script src="bar.js"></script>

// foo.js
const x = "foo"; // 1.x는 전역변수임

// bar.js
const x = "bar";// 2.x는 전역변수임. 하나의 window가 공유된 것임. 
console.log(x); // bar  	   // 따라서 x가 재선언 된 것.

🔶2. 모듈 스코프

: type="module"을 붙이면 모듈로서 동작함.
: 모듈은 자신만의 파일 스코프(모듈 스코프)를 갖는다.
: 따라서 모듈 내에서 선언한 식별자는 모듈 외부 파일에서 접근할 수 없음.
: 두 파일의 모듈 스코프가 다르기 때문에, foo.js에서 선언한 변수를 bar.js에서 사용할 수 없음.

<!--html-->
<script type="module" src="foo.js"></script>
<script type="module" src="bar.js"></script>

// foo.js
const x = "foo"; // 1.x는 전역변수가 아님
console.log(window.x) // undifined
console.log(x); // foo

// bar.js
const x = "bar";// 2.x는 전역변수가 아님.
console.log(window.x) // undifined
console.log(x); // bar  3.재선언도 아님.

🔶3. export

: 모듈 내에서 선언한 식별자를 외부에 공개하여 다른 모듈에서 재사용 할 수 있게 됨.
: 변수,함수,클래스 등 모든 식별자를 export 할 수 있음.

<방법1> Named Export

1) 외부로 내보내고자 하는 변수나 함수를 export 키워드를 통해 내보내고,

// foo.js
const x = "foo";

function square(num){
  return x*x;
}

class Person(){
 construnctor(name){
 	this.name = name;
 }
}

export {x, square, Person}

2) 모듈 파일에서 내보낸 변수나 함수들은 다른 파일에서 import 키워드를 통해 가져옴.

// bar.js
import {x, square, Person} from"./foo.js";

console.log(x); // "foo"
console.log(square); // fn square
console.log(Person); // class Person

<방법2-1> Default Export

1) 모듈에서 하나의 값만 export한다면, Default Export 주로 사용함.
: default를 통해 export하는건 모듈 문서에서 하나만 할 수 있음

// foo.js
export default 'foo';

2) { }없이 임의의 이름(it)으로 import 함.

// bar.js
import it from './foo.js';

console.log(it); // foo

3) default를 사용하는 경우, const,let,var키워드는 사용할 수 없음.

export default const foo = ()=>{}; // SyntaxError남

<방법2-2> Default Export

: 한 객체에 여러 키워드를 담아서 한번에 default export{ } 한 후,
: 그 객체를 임의의 이름으로 받아와서 쓸 수 있음. : import 임의의 이름 form "./ "

// [foo.js]
const some1 = 'aa';

function some2(value) {
  console.log(value);
}
 
// - 하나의 객체에 여러 export할 것들을 담아서 한번에 내보낼 수 있음.
// { some1: some1, some2: some2}의 축약임.
export default { some1, some2 };

// [bar.js]
import some from './foo.js'; // import 변수명 from

console.log(some.some1); // aa
console.log(some.some2('bb')); // bb

<방법3> 식별자 이름 변경 - as

1) 모듈파일에서 가져온 변수나 함수의 이름을 as를 이용해 이름을 변경할 수 있음.
2) 이름을 바꿔서 import하면 여러 파일에서 불러오는 대상들의 이름이 중복되는 문제를 해결할 수도 있음.

//foo.js
export const title = "foo"

// bar.js
// import한 모듈명과 이 파일에서 선언한 변수명이 곂칠 수 있으니, 모듈을 가져오고 as로 이름 변경할 수 있음.
import { title as one } from 'foo.js';  
console.log(one); // foo

const title = 'bar';
console.log(title); // bar

<방법4> 모든 export를 한번에 가져오기 - *(와일드카드 문자)

: *(와일드카드 문자) 로 가져오면 모듈이 export한 모든 식별자를 한번에 가져오게 됨.
: 사용- all이라는 객체의 프로퍼티로 모아 사용하게 됨.

// [foo.js]
export const name1 = "foo1";
export const name2 = "foo2";
export const name3 = "foo3";

// [bar.js]

import * as all from './foo.js';
// all = {name1 : name1, name2 : name2, name3 : name3 } 인 꼴.

console.log(all.name1); // foo1
console.log(all.name2); // foo2
console.log(all.name3); // foo3