해를 좀먹는 그늘

스태틱 멤버

전역 생성자

모듈 추가하기

생성자 구현

이 구현에서 핵심적인 사항은 다음과 같다.

• this가 Sandbox 인스턴스인지 확인 후, 생성자 함수로 호출한다. (new를 강제화하는 패턴)
• 생성자 내부에서 this에 속성을 추가한다. 생성자의 프로토타입 객체에도 속성을 추가할 수 있다.
• 필요한 모듈은 배열 또는 개별 문자 유형의 인자로 전달할 수 있고, * 와일드카드를 사용하거나, 쓸 수 있는 모든 모듈을 사용하겠다는 의미로 인자를 생략할 수도 있다.
• 필요한 모듈을 모두 파악한 다음에는 각 모듈을 초기화한다. 정리하면 각 모듈을 구현한 함수를 호출해서 객체를 생성한다.
• 생성자의 마지막 인자는 콜백 함수이다. 이 콜백 함수는 맨 마지막에 호출되며, 새로 생성된 인스턴스가 인자로 전달된다. 이 콜백 함수가 실제로 사용자의 샌드박스이며 필요한 기능을 모두 갖춘 상태에서 box 객체를 전달받게 된다.

모듈 패턴

• 네임 스페이스 패턴
• 즉시 실행 함수
• 비공개 멤버와 특권 멤버
• 의존 관계 선언

모듈 노출 패턴

생성자를 생성하는 모듈

모듈에 전역 변수 가져오기

비공개 프로퍼티와 메서드

자바 등 다른언어와는 달리 자바스크립트에는 private, protected, public 프로퍼티와 메서드를 나타내는 별도의 문법이 없다.

객체의 모든 멤버는 pulic, 즉 공개되어 있다.

비공개 멤버

비공개 멤버의 허점

getSpec() 메서드가 specs 객체에 대한 참조를 반환하는 문제가 있다.

객체 리터럴과 비공개 멤버

프로토타입과 비공개 멤버

비공개 함수를 공개 메서드로 노출 시키는 방법

네임스페이스 패턴

이 패턴은 코드에 네임스페이스를 지정해주며, 코드 내의 이름 충돌 뿐 아니라 이 코드와 같은 페이지에 존재하는 자바스크립트 라이브러리나 위짓 등 서드 파티 코드와의 이름 충돌도 방지해준다.

범용 네임스페이스 함수

for-in 루프

for-in 루프는 배열이 아닌 객체를 순회할 때만 사용해야 한다. for-in 으로 루프를 도는것을 열거 라고도 한다.

이 예제에서는 객체 리터럴을 사용하여 man 이라는 이름의 간단한 객체를 정의했다. man을 정의하기 전이나 후 어디선가 Object 프로토타입에 clone()이라는 이름의 메서드가 편의상 추가 되었다.

man을 열거할때 hasOwnProperty()를 호출하여 걸러내지 않으면 clone()이 나오게 되므로 동작방식이 바람직 하지 않다.

Object.property에서 hasOwnProperty()를 호출하는 것도 하나의 패턴이다.

이 방법은 man 객체가 hasOwnProperty를 재정의하여 덮어썼을 경우에도 활용 할 수 있다는 장점이 있다. 프로퍼티 탐색이 Object까지 거슬러 올라가지 않게 하려면 지역변수를 사용하여 이 메서드를 캐시하면된다.

for 루프

최적화 되지 않은 루프

이 패턴의 문제점은 루프 순회시 마다 배열의 length에 접근한다는 점이다.

for(var i=0; i<myarray.length; i++){ 
	// myarray[i] 를 다루는 코드 
}

for 루프를 좀더 최적화 하기 위해서는 다음 예제처럼 배열의 length를 캐시해야 한다.

for(var i=0, max = myarray.length; i<max; i++){
	// myarray[i] 를 다루는 코드
}

이렇게 하면 length 값을 한번만 구하고 루프를 도는 동안 이 값을 사용하게 된다.

단일 var 패턴을 따르자면, var 문을 루프 외부로 빼내어 다음과 같이 만들수 있다.

function looper() { 
	var i=0, max myarray = []; 
    // ... 
    for(i=0, max = myarray.length; i<max; i++){
    // myarray[i] 를 다루는 코드
    } 
}

이 패턴은 단일 var 패턴을 고수하여 일관성을지킨다는 장점이 있다.

i++ 명령문을 다음중 하나로 대체할 수 있으며, JSLint는 이 방법을 권장한다.

i = i+1

i += 1

for 문에는 두 가지 변형 패턴이 있다.

이 패턴들은 다음과 같은 미세 최적화를 시도 한다.

첫번째 변형 패턴

var i, myarray = [];

for (i = myarray.length; i--){ 
	// myarray[i]를 다루는 코드 
}

두번째 변형 패턴은 whlie 루프를 사용한다.

var myarray = [],i = myarray.length;
    
while (i--){
	// myarray[i] 를 다루는 코드
}