자바스크립트 패턴

1. 패턴을 공부해야 하는 이유

소프트웨어의 버그를 고치는 데는 비용이 듭니다. 발견한 즉시 버그를 고칠 수 있다면 가장 좋겠지만 얼마간 시간이 흐르고 난 뒤 코드를 다시 들여다보면 해당 코드를 다시 이해하는데 시간을 할애해야 합니다. 프로젝트 규모가 크다면 버그를 만든 사람, 버그를 발견한 사람, 버그를 고칠 사람이 전부 다른 사람일 수 있습니다.

우리 모두는 오래된 레거시 코드를 유지보수하는데 시간을 쓰기보다 새롭고 재밌는 개발을 하고 싶어합니다. 따라서 행복한 개발자가 되기 위해서 유지보수 가능한 코드를 만들기 위해 노력해야 합니다.

2. 전역 변수

2.1 전역 변수 최소화

모든 자바스크립트 실행 환경에서는 전역 객체가 존재합니다. 어떤 함수에도 속하지 않은 상태에서 this를 사용하면 전역 객체에 접근하게 됩니다.
전역 변수를 생성하는 것은, 이 전역 객체의 프로퍼티를 만드는것과 같습니다.

myglobal = "hello";

console.log(window.myglobal); // => "hello"
console.log(this.myglobal); // => "hello"

2.2 전역 변수의 문제점

전역 변수의 문제점은 자바스크립트 애플리케이션이나 웹 페이지 내 모든 코드 사이에서 공유된다는 점입니다. 웹 페이지에서 외부 라이브러리를 사용할 때 전역 변수로 인해 외부 라이브러리가 작동하지 않을 수 있습니다.

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

자바스크립트에서는 함수 내 여기저기서 여러 개의 var 선언을 사용할 수 있지만, 실제로는 모두 함수 상단에서 변수가 선언된 것과 동일하게 동작합니다. 이를 호이스팅이라고 합니다.

myname = "global";

function func() {
	console.log(myname); // => undefined
  	var myname = "local";
  	console.log(myname); // => local
}

함수 내부에서 global, local로 출력되지 않고 undefined, local로 출력됩니다. 이는 변수 선언문이 함수 상단으로 끌어올려진 것처럼 동작하기 때문입니다. 이러한 혼란을 피하기 위해서 사용할 변수를 맨 첫 줄에 선언하는 것이 좋습니다.

3. 반복문

3.1 for in 루프

for - in 루프는 배열이 아닌 객체를 순회할 때만 사용해야 합니다. 자바스크립트에서 배열은 곧 객체이기 때문에 배열을 순회할 때도 for - in 루프를 사용할 수 있지만 권장사항은 아닙니다.

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

hasOwnProperty()를 사용하는 이유는 코드 어딘가에 누군가가 Object 프로토타입 메서드를 추가할 수 있기 때문입니다.

프로토타입 확장하지 않기
위와 같이 누군가가 프로토타입을 확장했다면 메서드를 사용해 한 번 더 확인해줘야 하는 번거로움이 있습니다. 따라서 내장 생성자 프로토타입을 확장하지 않는 것이 최선입니다. 만약 확장하고 싶은 기능이 향후 ECMAScript 버전에 일관되게 구현될 예정이라면 확장해도 좋습니다.

3.2 switch 패턴

switch문을 사용할 때는 다음과 같은 규칙을 지켜야 합니다.

• 각 case문을 switch문에 맞추어 정렬한다.
• 각 case문은 명확하게 break;로 종료한다.
• break문을 생략하여 통과시키지 않는다. 그 방법이 최선책이라면 해당 case에 반드시 기록을 남겨 다른 사람이 봤을 때 오류로 보이지 않게 한다.
• 상응하는 case문이 하나도 없을 때도 정상적인 결과가 나올 수 있게 마지막에 default;문을 쓴다.

Reference

이 글은 ⌜JavaScript Patterns⌟ 를 읽고 정리했습니다.