자바스크립트 패턴 - 코드 작성 기초

1. 유지보수 가능한 코드 작성

유지보수 가능한 코드의 특징

 - 읽기 쉽다.

 - 일관적이다.

 - 예측 가능하다.

 - 한 사람이 작성한 것처럼 보인다.

 - 문서화되어 있다.

---

2. 전역 변수 최소화

자바스크립트는 함수를 사용하여 유효범위를 관리한다.

모든 자바스크립트 실행 환경에는 전역 객체가 존재한다. 어떤 함수에도 속하지 않은 상태에서 this를 사용하면 전역 객체에 접근하게 된다. 전역 변수를 생성하는 것은, 이 전역 객체의 프로퍼티를 만드는 것과 같다. 편의상 브라우저에는 전역 객체에 window라는 부가적인 프로퍼티가 존재하며 전역 객체 자신을 가리킨다.

다음은 브라우저 환경에서 전역 변수를 생성하고 이 변수에 접근하는 방법이다.

myglobal = "hello";    // 안티패턴

console.log(myglobal);    // "hello"

console.log(window.myglobal);    // "hello"

console.log(window["myglobal"]);    // "hello"

console.log(this.myglobal);    // "hello"

전역 변수의 문제점

모든 전역 변수는 동일한 전역 네임스페이스 안에 존재하기 때문에, 애플리케이션 내의 다른 영역에서 목적이 다른 전역 변수를 동일한 이름으로 정의할 경우 서로 덮어쓰게 된다.

자바스크립트에서는 선언하지 않고 사용한 변수는 자동으로 전역 객체의 프로퍼티가 된다.

var 선언을 빼먹었을 때의 부작용

var를 사용하여 명시적으로 선언된 전역 변수는 삭제할 수 없다.

var를 사용하지 않고 생성한 암묵적 전역 변수는 삭제할 수 있다.

암묵적 전역 변수는 전역 객체의 프로퍼티라는 것을 보여준다.

프로퍼티는 delete 연산자로 삭제할 수 있지만 변수는 그렇지 않다.

전역 객체에 대한 접근

브라우저에서는 코드 어느 곳에서든 window 속성을 통해 전역 객체에 접근할 수 있다.

다른 환경에서는 이 프로퍼티가 존재하지 않을 수 있다.

window라는 식별자를 사용하지 않고 전역 객체에 접근하기 위해서는 함수 유효범위 안에서 다음과 같이 정의한다.

함수를 new와 생성자를 사용해 호출하지 않고 그냥 함수로 호출한 경우, 함수 안에서 this는 항상 전역 객체를 가리킨다.

단일 var 패턴

이점

 - 함수에서 필요로 하는 모든 지역 변수를 한군데서 찾을 수 있다.

 - 변수를 선언하기 전에 사용할 때 발생하는 로직상의 오류를 막아준다.(호이스팅)

 - 전역 변수를 최소화하는 데 도움이 된다.

 - 코드량이 줄어든다. 

호이스팅: 분산된 var 선언의 문제점

자바스크립트는 동일한 유효범위 안에 있는 변수는 var 선언 전에 사용해도 이미 선언된 것으로 간주한다.

모든 변수 선언문은 함수 상단으로 끌어올려진다. 

따라서 사용할 변수를 모두 맨 첫 줄에서 선언하는 것이 좋다.

---

3. for 루프

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

myarray가 배열이 아니라 HTMLCollection이라면 속도가 느려질 수 있다.

콜렉션의 length 속성에 접근할 때마다 실제 DOM에 질의를 요청하는 것과 같으며, DOM 접근은 일반적으로 비용이 크다.

따라서 배열의 length를 캐시해서, length 값을 한 번만 구하고 루프를 도는 동안 그 값을 사용한다.

---

4. for-in 루프

for-in 루프는 배열이 아닌 객체를 순회할 때만 사용해야 한다. 

배열 객체에 사용자 정의 기능이 추가되었다면 논리적인 오류가 발생할 수 있다. 

또한 for-in에서는 프로퍼티 열거 순서가 정해져 있지 않기 때문이다.

객체의 프로퍼티를 순회할 때는 프로토타입 체인을 따라 상속되는 프로퍼티들을 걸러내기 위해 hasOwnProperty() 메서드를 사용해야 한다.

man을 열거할 때 clone() 메서드가 나오지 않게 하려면 프로토타입 프로퍼티를 걸러내기 위해 hasOwnProperty()를 호출해야 한다.

---

5. 내장 생성자 프로토타입 확장 / 확장하지 않기

Object(), Array(), Function() 과 같은 내장 생성자의 프로토타입을 확장하는 것은 좋은 방법이다.

하지만 코드가 예측에서 벗어나는 일이 많아져 지속성이 저해될 수 있다.

따라서 내장 생성자 프로토타입을 확장하지 않는 것이 최선이다.

1. 해당 기능이 ECMAScript의 향후 버전이나 자바스크립트 구현에서 일관되게 내장 메서드로 구현될 예정이다.

2. 이 프로퍼티 또는 메서드가 코드 내에 이미 구현되어 있는지 확인한다.

3. 이 변경사항을 명확히 문서화하고 팀 내에서 공유한다.

다음 조건을 모두 만족시킨다면 프로토타입에 추가 사항을 적용해도 된다.

---

6. parseInt()를 통한 숫자 변환

이 함수는 두 번째 매개변수로 기수를 받는데, 생략하는 경우가 많지만 파싱할 문자열이 0으로 시작할 경우 문제가 생길 수 있다.

문자열을 숫자로 변환하는 또다른 방법

+"08"

Number("08")

---

7. API 문서 작성

API 문서 생성 도구

 - JSDoc 툴킷(http://code.google.com/p/jsdoc-toolkit/)

 - YUIDoc(http://yuilibrary.com/projects/yuidoc)

API 문서 생성 과정

 - 특정한 형식에 맞추어 코드 블록을 작성한다.

 - 도구를 실행해 코드와 주석을 파싱한다.

 - 도구가 실행 결과를 발행한다. 대부분은 HTML 페이지 형식으로 이루어져 있다.

예시

YUIDoc 예제

@namespace

객체를 가리키는 전역 참조

@class

객체 또는 생성자 함수를 가리키는 의도된 오칭

@method

객체의 메서드를 정의하고 메서드의 이름을 지정

@param

함수가 받는 매개변수를 열거. 중괄호 안에 매개변수의 타입을 넣고 그 뒤에 매개변수의 이름과 설명을 작성

@return

메서드에 의한 반환 값을 설명하며 이름은 쓰지 않는다.

@constructor

클래스라는 것이 실제로는 생성자 함수임을 알 수 있다.

@property, @type

객체의 프로퍼티 설명