전역 변수
앞선 내용에서 스코프 체인을 배웠다. 글로벌 스코프에서 변수를 선언하면 어떤 스코프에서도 접근이 가능하고 이를 전역 변수 라고 한다. 우리는 이러한 전역 변수의 사용을 최소화 해야 하는 2가지 이유를 알아보자.
1 . 메모리 공간의 낭비
우리는 제한된 메모리를 가지고 있다. 전역 변수를 계속 만들다 보면 메모리 힙이 점점 부족해 되고 오버플로우가 발생하고 브라우저가 충돌 할 때 까지 속도가 느려진다.
2. 변수들 간의 충돌
...
<body>
<script> var z = 1 </script>
<script> var z = 10000 </script>
</body>
<!-- z = 10000 -->
...위와 같이 하나의 html 파일에서 다수의 자바스크립트 파일을 포함하는 상황을 가정해보자. 이럴 경우 html 에서 이러한 모든 스크립트 태그를 하나의 실행 컨텍스트로 합쳐버린다. 이 말은 모든 스크립트 태그가 하나의 전역 컨텍스트를 갖는다는 것이고 이 때 변수명이 겹칠 경우 변수 값이 덮어 씌워지는 문제가 발생한다.
IIFE (Immediately Invoked Function Expression)
전역 변수는 많은 문제를 일으킬 수 있다는 것을 알았다. 그렇다면 어떻게 이러한 문제를 최소화 할 수 있을까?
IIFE는 이러한 문제를 해결하기 위한 자바스크립트의 디자인 패턴이다. IIFE 패턴을 사용하면 namespace의 충돌을 피할 수 있기 때문에 많은 라이브러리에서 IIFE 패턴을 사용한다.
그렇다면 IIFE 패턴이 무엇인지 알아보기 전에 함수 표현식과 함수 선언식에 대해 다시한번 알아보자
function a(){
// 함수 선언식
}
var a = function(){
//함수 표현식
}앞선 글에서 함수 선언식은 호이스팅에 영향을 받지만 함수 표현식은 호이스팅에 영향을 받지 않는다고 하였다. (위의 예제에서 함수 표현식은 var a = undefined 로 호이스팅이 된다.) 그리고 자바스크립트 엔진은 이러한 차이를 function 이라는 단어가 첫 번째 item으로 오는지에 따라 구분한다.
(위의 코드에서 자바스크립트 엔진은 function 구문을 보고 이건 함수 선언식이네 라고 판단하지만 함수 표현식의 경우에는 var라는 단어를 처음으로 만나기 때문에 함수 선언식이 아니라고 판단한다)
우리는 이러한 원리를 활용하여 다음과 같은 코드를 작성할 수 있다. 그리고 이러한 방식을 IIFE 패턴 이라고 한다.
(function(){
})();IIFE의 특징
IIFE에서 선언된 익명의 함수는 함수가 선언됨과 동시에 실행됨으로써 새로운 실행 컨텍스트가 생성된다. IIFE 내부에 있는 모든 변수나 함수들이 새로 만들어진 실행 컨텍스트 내부에 선언되므로 전역 스코프를 오염시키지 않을 뿐 아니라 외부에서 IIFE 내부를 참조하는 것도 차단시킬 수 있다.
값을 리턴하는 IIFE
var a = function(){
return "hello";
}
//IIFE
var b = (function (){
return "hello";
}());
a // f() { return "hello"; }
b // hello변수에 return 을 담은 IIFE 패턴을 사용하면 값을 return 하는 것이 가능하다.
IIFE에 대해서는 추후에 자세히 알아보자
