[JavaScript]전역 변수의 문제점

🚨 아래 더보기는 개인적 공부를 위해 기록한 흔적입니다. 

 

책을 읽기 전 예상되는 전역 변수의 문제점

 네임스페이스 폴루션

 서로다른 사람이 선언한 변수가 scope를 통해 전역변수에 접근할 수도 있기에  전역변수의 경우 협업 시 문제를 초래할 가능성이 있습니다. 현재로서는 이것이 전부

 

책을 읽은 후 머릿속에서의 첫 인출 

intro 변수와 변수의 생명주기

• 변수는 메모리에 할당되는 값을 찾아가는 식별자의 역할을 합니다. 
• 전역변수의 경우 생명주기가 전역 객체의 생명주기와 동일합니다. 이 말은 브라우저를 닫을 때 전역변수가 소멸한다는 의미입니다. 메모리를 오랜기간동안 차지하기 때문에 전역변수가 많아지면 메모리 활용도가 떨어질 수 있는것입니다. 
• 함수 속 지역변수의 경우 함수 스코프안에 등록되며 생명주기의 경우 함수의 호출과 함께 시작되고 반환문이 실행되고나면 소멸합니다.(함수의 생명주기와 동일하다고 볼 수 있습니다.)
• 자바스크립트가 실행되면 자바스크립트 엔진은 전역 객체를 로드?하고 전역변수, 함수의 선언을 전역 스코프에 등록하고 런타임이 자바스크립트 코드를 한줄한줄 실행합니다.  

body 전역 변수의 문제점

• 전역변수를 사용한다는 것은 암묵적 결합 용인하는 것 입니다. 코드 모든 영역에서 해당 변수를 참조할 수 있고 수정할 수 있다는 것 입니다. + 코드의 가독성을 잃게 됩니다.
• namespace pollution => ??
• 긴 생명주기 이것은 기 intro에서 언급한 브라우저를 닫기 전까지 변수의 값이 메모리를 차지하고 있기 때문에 메모리 활용 측면에서 문제가 있음을 의미합니다. 

TAIL 무분별한 전역 변수를 해결할 수 있는 방법

• 즉시 실행함수
• type = "module" 자바스크립트 파일을 모듈로 타입 지정하여 불러온다면 모듈이라는 다른 스코프에 등록되어 ...

인출과 텍스트를 비교하며 다시 정리

intro 변수의 생명주기

변수는 생물과 유사하게 생성되고 소멸되는 생명주기가 있습니다. 

지역 변수의 생명 주기

대부분의 지역 변수의 경우 함수가 호출되면 생성되고 함수가 종료하면 소멸합니다.(지역 변수의 생명 주기는 함수의 생명 주기와 일치한다고 할 수 있겠죠.)

function foo(){
	var x = 'local';
    console.log(x); //local
    return x;
}

foo();
console.log(x); //Reference x is not defined

지역 변수 x는 foo 함수를 호출하면 생성됩니다. foo함수를 호출해야 함수 내부의 변수 선언문이 실행되기 때문입니다. 함수 내부에서 선언한 변수는 함수가 호출된 직후, 코드가 한 줄씩 실행되기 이전에 자바스크립트 엔진에 의해 먼저 실행됩니다. 

위 코드의 실행 순서는 아래와 같습니다. 

foo함수를 호출
자바스크립트 엔진에 의해 변수 x를 선언하고 undefined로 초기화
함수 body의 코드를 한줄씩 순차적으로 실행
x에 값을 할당하는 코드를 만나면 변수에 값이 할당됨
return으로 x를 반환하면 함수가 종료되어 변수의 생명 주기도 종료되어 소멸

위의 경우와는 달리 지역 변수가 함수보다 오래 생존하는 경우도 있기 때문에 함수 내부에서 선언된 지역 변수의 생명 주기가 함수의 생명주기와 일치한다는 것이 100% 참이라고 할 수는 없습니다.  아래의 경우를 보시죠.

const makeCounter = () => {
	let value = 0;
    return {
		increase: () => {
			value = value + 1;
		},
        decrease: () => {
			value = value - 1;
		},
        getValue: () => value
	}
}

const counter1 = makeCounter();
counter1 // {increase : f, decrease: f, getValue: f}

 

counter1라는 변수에는 makeCounter함수의 return 값(함수 바디에 선언된 변수를 참조하는 메서드를 가지는 객체)을 할당하였기 때문에 함수 호출 이후에도 계속하여 value 변수에 접근할 수 있는 것을 알 수 있습니다. 이 경우에 지역 변수의 생명주기는 메모리 공간이 확보된 시점부터 메모리 공간이 해제되어 가용 메모리 풀에 반환되는 시점까지라고 할 수 있습니다. 메모리 공간은 누군가가 참조하고 있지 않으면 가비지 콜렉터에 의해 해제되어 가용 메모리에 반환되므로 누군가가 지역변수를 참조하고 있다면 해당 변수는 소멸하지 않는 것입니다.   

전역 변수의 생명 주기

var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 됩니다. 이는 전역 변수의 생명 주기가 전역 객체의 생명 주기와 일치한다는 것을 의미합니다. 브라우저의 경우 전역객체는 window이므로 전역 변수는 window의 프로퍼티 인 것입니다. (브라우저 종료시 전역 변수가 소멸한다고 할 수 있습니다.)

body 전역 변수의 문제점

• 암묵적 결합 : 모든 코드가 전역 변수를 참조하고 변경할 수 있다는 것 입니다. 변수의 유효 범위가 크면 코드의 가독성은 떨어지고 의도치않게 상태가 변경될 수 있습니다.
• 긴 생명 주기 : 전역 변수는 브라우저 종료에 소멸되므로 생명주기가 깁니다. 생명주기가 길 수록 전역 변수의 상태를 변경할 수 있는 시간과 기회 또한 많아집니다. 또한 메모리 리소스도 긴 시간 소비하기에 메모리적 측면에서 비효율 적입니다. 
• 스코프 체인 상에서 종점에 존재 : 전역 변수는 스코프 체인 상에서 종점에 위치하기에 가장 마지막에 검색됩니다. 
• 네임스페이스 오염 : 파일이 분리되어 있어도 하나의 전역 스코프를 공유한다는 것이 자바스크립트의 가장 큰 문제점인데 만약 다른 파일에서 같은 이름의 전역 변수나 함수가 같은 스코프에 있을 경우 전혀 다른 결과를 볼 가능성이 있습니다.

TAIL 전역 변수의 사용을 억제하는 방법

• 즉시 실행 함수 : 함수의 정의와 동시에 호출되는 즉시 실행 함수는 단 한 번만 호출됩니다. 모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 지역 변수가 됩니다.

  (function(){
  	var foo = 10; // 즉시 실행 함수의 지역 변수
      // ...
  }());
  
  console.log(foo); // ReferenceError: foo is not defined​

• 네임스페이스 객체 : 전역에 네임스페이스 역할을 담당할 객체를 생성하고 전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가하는 방법.

  var MYAPP = {};
  
  MYAPP.name = 'Lee';
  
  console.log(MYAPP.name); // Lee

• 모듈 패턴 : 모듈 패턴은 클래스를 모방해서 관련이 있는 변수와 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈을 만드는 것입니다. 모듈 패턴은 클로저를 기반으로 동작하며 전역 변수의 억제는 물론 캡슐화까지 구현할 수 있습니다.(캡슐화는 객체의 특정 프로퍼티와 메서드를 은닉하는데 사용되기도 합니다.) 대부분의 객체지향 프로그래밍 언어와는 달리 접근 제한자가 없기 때문에 모듈 패턴을 통해서 정보의 공개 여부를 결정할 수 있습니다.

  var makeCounter = (function(){
  	let value = 0;
      return {
  		increase: () => {
  			value = value + 1;
  		},
          decrease: () => {
  			value = value - 1;
  		},
          getValue: () => value
  	};
  }());

   value 변수는 외부에서 접근할 수 없는 private member이고, makeCounter 함수는 외부에 노출하고 싶은 변수나 함수를 객체에 담아 반환하고 이때 반환되는 객체의 프로퍼티는 외부에 노출되는 퍼블릭 멤버입니다. 
• ES6 모듈 : es6 모듈은 파일 자체의 독자적인 모듈 스코프를 제공하므로 모듈 내에서 var 키워드로 선언한 변수는 더이상 전역 변수가 아니며 window객체의 프로퍼티도 아니게 됩니다. script태크에 type="module" 속성을 추가하면 로드된 자바스크립트 파일은 모듈로서 동작합니다.(모듈의 파일 확장자는 mjs를 권장한다고 합니다. )

  <script type="module" src="app.mjs"></script>​

출처: 모던 자바스크립트 Deep Dive