JS 모듈 1편 - 모듈의 필요성

Why do we need modules?

Tight Coupling

user = {};

function signin(user) {
  var textfield = "text";
}

function isHuman(user) {
  // ...
}

// ...more extends
// tight coupling

만약 위와 같은 signup과 isHuman이라는 

user 인자를 받아서 처리를 하는 두 함수가 있다고 보자,

user객체에는 두 함수에 필요한 모든 데이터를 저장할 필요가 있을 것이다.

 

그리고 user를 사용하는 함수가 계속해서 늘어나면 날수록

coupling은 더 높아지게 된다.

user객체를 함부로 수정했다가는 연관되는 함수들에서

파생되는 문제가 커지게 되기 마련이다.

 

<script src="./script1.js"></script>
<script src="./script2.js"></script>
<script src="./script3.js"></script>

그럼 이 문제를 여러 js파일로 그룹화해서 관리하면 어떨까?

아래 예시를 보자

// script1.js
var harry = "potter";
var voldemort = "He who must not be named";

function fight(char1, char2) {
  var attack1 = Math.floor(Math.random() * char1.length);
  var attack2 = Math.floor(Math.random() * char2.length);
  console.log(attack1, attack2);
  return attack1 > attack2 ? `${char1} wins` : `${char2} wins`;
}

fight(harry, voldemort);

//script2.js
var fight = "no way";

1번 js파일에는 fight함수가 있다.

2번 js파일에는 fight변수가 있다.

그럼 html파일을 실행시켰을 때,

fight를 실행시키면 어떻게 될까?

같은 이름으로 겹치기 때문에 뒤에 선언된 script2.js의 내용만 사용할 수 있다.

그렇다고 변수이름을 계속해서 다르게 만들어 줄수도 없기에

모듈 시스템의 개발이 시작되었다.