JAVASCRIPT, JAVASCRIPT GLOBAL VARIABLE

자바스크립트 전역변수 #2

앞 글에서 전역변수의 단점에 대해 살펴보았습니다. 단점이 존재한다고해서 쓰지 않을수 없는 상황들이 있는데 이번 글에서 전역변수를 어떻게 사용하는지 다루어보겠습니다.

전역변수 최소화하기

전역변수를 사용해야 한다면 다음과 같은 두 가지 방법을 통해 최소한으로 사용하는 것이 권장됩니다.

  • 클로저를 이용하는 방법
  • 모듈/네임스페이스 패턴을 이용하는 방법

먼저 클로저를 사용하는 방법을 살펴봅시다.

(function(){
 var localVarivable = "I'm not global";
}());

즉시실행함수로 감싸져있는 부분에 정의된 변수는 지역변수로 정의됩니다. 아마 이미 많은 코드에서 위와 같이 스크립트가 감싸져있는 본적이 있을것입니다.

다음은 모듈방식입니다.

var myModule = (function(){
 var localVariable = "I'm not global";
 show: function(){
  alert(localVariable);
 }
}());
myModule.show();

이전예제와 비슷하게 즉시실행함수에 변수를 선언하여 지역변수로 정의되었습니다. 다만 여기서는 myModule이 전역변수인데 기능별 모듈화를 통해 각 모듈에 대한 전역변수를 통해 지역변수를 접근하는 방식입니다. 일반적으로 사용되는 외부 라이브러리도 이와 같은 방식으로 개발됩니다(엄밀히 말하면 오픈소스 및 상용화로 공개된 라이브러리는 이것보다 복잡하고 많은 테크닉들이 들어갑니다).

전역변수 사용을 최소화하는 두 가지 방식을 살펴보았는데요, 두 방법 중 한 가지를 선택하는 기준은 다음과 같습니다.

  • DOM에 자바스크립트 코드를 넣고 변수에 접근해야한다 - 모듈 방식
  • 다른 개발자와 상호작용하는 소스를 만든다 -> 모듈방식
  • 자바스크립트 라이브러리를 만들고 싶다 -> 모듈방식
  • 외부에서 접근할 일이 없다 -> 클로저 방식
  • 잘 모르겠다 -> 클로저 방식

DOM에 자바스크립트는 넣는것은 html 태그에 onclick등의 attribute를 통해 자바스크립트를 사용하는 방식을 말합니다. 많은 개발자들이 이러한 사용방식에 대해 부정적인 의견을 가지고 있는데 이유는 전역변수의 사용을 증가시키는것과 함께 view와 logic이 DOM에 의존되기 때문입니다. 이것은 가독성을 떨어트리고 실제 현업환경에서 유지보수나 분석 시 어려움을 줍니다(공감하시나요?).

변수 사용방법과 성능

마지막으로 변수에 대한 사용방법을 좀더 다루어보겠습니다. 03전역변수 에서 var를 사용하지 않으면 상위 스코프에서 해당 변수 존재여부를 판단하는데 그러다가 결국 마지막에 전역 스코프를 탐색하고 없으면 undefined error를 발생시킵니다. 구체적으로 설명하면 상위스코프 탐색을 위해 GetIdentifierReference이 호출되고 참조할려고하는 변수가 발견되면 사용할 수코프에 HasBinding을 통해 해당 변수를 바인딩시킵니다(각 함수의 상세루틴은 클릭해서 참조해주세요). 만약 스코프가 여러번 중첩해서 겹쳐있다면 재귀적으로 계속해서 상위 스코프를 탐색해가야 하는데 이때 위 함수들이 반복적으로 호출되면서 결국 컴퓨팅 자원 사용량을 증가시키게 됩니다.

그럼 최적화된 방법을 예제를 통해 살펴봅시다.

(function(){
 var div1 = document.getElmentById('div1');
 div1.onclick = function(){
  div1.innerHTML = "Click!";
 }
}());

여기서 div1에 클릭이벤트가 등록되어 있는데 상위 스코프의 div1을 사용하고 있습니다. 이경우 아래와 같이 사용하는 것이 최적화된 방법입니다.

(function(){
 var div1 = document.getElmentById('div1');
 div1.onclick = function(){
  var localDiv1 = div1;
  localDiv1.innerHTML = "Click!";
 }
}());

위와 같이 간단한 예제에서는 성능 차이를 느끼지 못합니다. 하지만 실제 개발되는 프로덕트급의 코드에서 계속해서 상위 스코프를 참조하는 로직이 많으면 점점더 많은 컴퓨팅 자원이 필요하게 됩니다. 그러므로 하위스코프에서 여러번 참조되는 변수는 하위스코프에 명시적으로 선언후 사용하는 것이 추천되는 방법입니다.