[모던JS입문] 8.7 이름 공간

8.7 이름 공간

• 전역 유효 범위의 오염을 방지하기 위한 수단 -> 8.7.1
• 객체를 이름 공간으로 사용하는 방법 -> 8.7.2
• 함수를 이름 공간으로 사용하는 방법 -> 8.7.3

8.7.1 전역 이름 공간의 오염
전역 변수 / 전역 함수를 전역 객체에 선언 : "전역 유효 범위를 오염시킨다"
전역 유효 범위가 오염되면?

• 라이브러리 파일을 여러 개 읽어들여 사용할 때
• 규모가 큰 프로그램을 만들 때
• 여러 사람이 한 프로그램을 만들 때
  변수명, 함수명이 겹칠 수 있다.

전역 유효 범위 안에서 같은 이름의 변수나 함수를 선언하면 호이스팅(hoisting)에 의해
자바스크립트 엔진이 첫머리로 끌어올려 단 하나씩만 생성하기 때문에
서로 다른 목적의 코드가 같은 변수나 함수를 공유하게 되므로 프로그램이 올바르게 동작하지 않을 수 있고 오류로 표시되지 않아 찾기도 어렵다. 예기치 않은 오류가 발생하기도.
=> 전역 유효 범위의 오류를 최소화해야!

8.7.2 객체를 이름 공간으로 활용
이름 공간(name space)
변수명, 함수명을 한곳에 모아두어 이름 충돌을 미리 방지하고,
변수명, 함수명을 쉽게 가져다 쓸수있게 만든 메커니즘
자바나 C++ 등은 기본적으로 이름 공간 기능을 제공하지만 JS는 객체/함수를 이름 공간으로 활용

객체를 값으로 가지는 전역 변수를 하나 생성

var myApp = myApp || {};

그 객체의 프로퍼티로 프로그램 전체(전역 유효 범위)에서 사용하는 모든 변수/함수를 정의

myApp.name = "Tom";
myApp.showName = function() {};

이 경우 myApp 만이 사용자가 정의한 전역 변수가 되므로 전역 유효 범위 오염을 최소화!

부분 이름 공간(sub name space)

myApp.view = {};
myApp.controls = {};

카테고리처럼 부분 이름 공간을 만들어서 각각 필요한 변수,함수를 프로퍼티로 정의

myApp.view.draw = function() {};
myApp.controls.timeInterval = 16;

객체를 이름 공간으로 이용하면 변수,함수명을 계층적으로 관리할 수 있다.

8.7.3 함수를 이름 공간으로 활용
함수 안에서 선언된 변수의 유효 범위는 함수 내부 : 함수 스코프
변수명은 함수 안에서만 읽거나 쓸수 있고 바깥으로는 나갈수 없다.
이 성질을 활용해 함수를 이름 공간으로 활용!

var x = "global x";
(function() {
	var x = "local x";
	var y = "local y";
})();
console.log(x); // global x
console.log(y); // uncaught reference error : y is not defined

즉시실행함수(immediately-invoked function expression, IIFE) 안에서 선언한
x,y는 지역변수이므로 전역 변수와 충돌하지 않는다.
=> 즉시실행함수 안에서 선언하면 전역 유효 공간을 오염시키지 않는다.
라이브러리 안의 전역 변수와 충돌을 피하기 위해 전체 프로그램을 즉시함수 내부에서 실행!

(function(){
	// 전체 프로그램
})();

모든 변수가 즉시실행함수의 지역변수가 되므로 전역 유효 공간을 오염시키지 않는다.

모듈 패턴(module pattern)
모듈 : 여러 기능(함수)을 하나로 묶은 것
일반적으로 여러 함수와 함수가 공유하는 데이터로 구성
모듈의 변수명, 함수명의 충돌을 피하기 위해 모듈을 즉시실행함수 안에 작성,실행
즉시실행함수에 객체로 구현한 이름공간을 전역변수로 넘겨서 공개할 함수를 이름공간에 추가
=> 모듈의 내부 구조는 은폐하고 원하는 함수만 공개

var Module = Module || {};
(function(_Module){
	var name = "NoName";	// 프라이빗 변수
    
    function getName() {	// 프라이빗 함수
    	return name;
    }
    _Module.showName = function() {		// 퍼블릭 함수
    	console.log(getName());
    };
    _Module.setName = function(x) {		// 퍼블릭 함수
    	name = x;
    };
})(Module);
Module.setName("Tom");
Module.showName(); // Tom

showName 메서드는 getName 메서드를 참조
setName 메서드는 변수 name을 참조
=> 즉시실행함수의 지역변수 name과 지역함수 getName은 클로저의 내부 상태로 저장!