이번 글인 모듈패턴을 이해하기 위해서는
즉시실행함수(IIFE)와 Scope, Clusure 개념을 이해하고 있기를 권장합니다.
Module Scope
- Global Scope
- Module Scope
- function Scope
- block Scope
- function Scope
- Module Scope
Scope는 자신만의 고유의 공간을 가지므로
일반적으로 다른 scope에 영향을 끼칠 수도, 받지도 않는다.
이를 이용하여 모듈 또한 scope를 가지게 만들어서
이름이 겹치거나, tight coupling을 방지할 수 있다.
IIFE
(function (a) {return a+1}) (a)처럼 함수를 괄호로 감싼 형태로 정의되는
즉시실행함수는 함수이기에 function scope를 가진다.
모듈을 IIFE로 정의하여 자신만의 scope를 가지도록 한다.
Closure
마지막으로 IIFE로 정의된 모듈을 변수에 담아 클로져 현상을 이용하여
안쪽의 내용은 그대로 가져다쓰고, 밖에서 안의 내용을 변경할 수 없도록 하여
예상치 못하게 모듈내의 내용이 변경되는 것을 방지한다. (캡슐화를 통한 안전성)
예시
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<h1>hide</h1>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
var globalNum='1234'
</script>
<script>
var script2=(function($,globalNum){
$('h1').click(function(){
$('h1').hide()
console.log('jquery hide 이벤트 발동!')
})
//$=undefined
globalNum='0'
})(jQuery,globalNum)
</script>
</body>
</html>해당 html문서에는 script가
- jquery 라이브러리 cdn
- 변수 선언
- IIFE를 이용한 모듈패턴 script2
세 번째 모듈인 script2는 첫 번째 모듈인 jquery의 $함수를 첫 번째 인자로 받아
h1태그에 클릭 시 hide효과가 적용되도록 했다.
<script>
var script2=(function($,globalNum){
$('h1').click(function(){
$('h1').hide()
console.log('jquery hide 이벤트 발동!')
})
$=undefined
globalNum='0'
})(jQuery,globalNum)
</script>이번엔 script2내에서 인자로 받은 $를 undefined로 재정의 해보았다.
script2 내에서 $는 더 이상 jquery의 함수가 아니라
undefined이기에 $를 사용하지 못한다.
하지만 script2내에서만 $은 undefined로 정의되었기에
global에서는 $이 여전히 jquery의 함수인 것을 확인할 수 있다.
마찬가지로 script2외의 다른 모듈에서도 $은 정상동작이 가능하다.
<script>
var script2=(function($,globalNum){
$('h1').click(function(){
$('h1').hide()
console.log('jquery hide 이벤트 발동!')
console.log(globalNum)
})
//$=undefined
globalNum='0'
})(jQuery,globalNum)
</script>이번엔 globalNum으로 확인해 본다.
클릭 이벤트를 발동시켰을 때 재정의한 globalNum인 0 값이 출력되었지만
두 번째 스크립트파일의 globalNum은 여전히 1234를 유지하고 있는 것을
확인가능하다.
모듈 패턴의 문제
하지만 여전히 완벽한 모듈로 사용하기엔 문제점이 있는데
위와 같이 globalNum을 각기 다른 모듈에서 같은 이름으로 정의할 경우
변수이름이 겹치는 문제가 있다.
- 전역 scope에서의 name duplicate
- 선언된 순서에 따른 종속성 문제
'Front-end > JavaScript' 카테고리의 다른 글
| JS 모듈 4편 - ES6 module (0) | 2023.07.25 |
|---|---|
| JS 모듈 3편 - commonJS & AMD (0) | 2023.07.23 |
| JS 모듈 1편 - 모듈의 필요성 (0) | 2023.05.21 |
| JS 비동기 7편 - job queue (0) | 2023.04.26 |
| JS 비동기 6편 - allSettled, any (0) | 2023.04.18 |