[Javascript Pattern] 자바스크립트 패턴 개론 #1

유지보수 가능한 코드 작성

- 읽기 쉽게

- 일관적이게

- 예측 가능하도록

- 문서화( 코드 코멘트, 주석, 개발 문서 )

 

전역 변수 최소화

- vGlobal = ‘hello’;

console.log(vGlobal);      //”hello”

console.log(window.vGlobal);      //”hello”

console.log(window.[“vGlobal”]);      //”hello”

console.log(this.vGlobal);      //”hello”

위에서 “vGlobal”은 다 같은 곳을 바라보고 있다. 그렇지 않다면 'undefined’가 출력이 되었을 것이다.

 

전역 변수의 문제점

- 외부 라이브러리가 변경

- 다른 개발자가 변경

의도치 않게 기준 값이 변경되어 버그가 발생할 수 있다.

 

단일 var 패턴

- 함수 상단에서 var를 이용해 모든 변수를 선언 함

- 강제로 선언 시 함수 초기에 ‘use strict’을 사용하면 html5에서는 변수 선언을 강제 할 수 있다.

 

암묵적인 타입 캐스팅 피하기

- “===” 이나 “!==”을 사용한다.

 

eval() 피하기

- var property = “value”;     //안티패턴
  alert(eval(‘obj.’ + property));

  var property = “value”;     //권장
  alert(obj[property]);

- eval은 보안 문제와도 관련이 있다.
만약 네트워크로 가져온 코드를 실행 하는 케이스가 있을 때 잘못된 코드가 온다면 의도되지 않은 실행이나 개인 정보 유출의 위험성이 존재하게 된다.

 

- 위와 같은 패턴으로 실행되는 케이스가 더 있다.

     1. setTimeout(“execute code”, 1000);     //안티패턴

            -> 권장안 setTimeout(function(){ /* execute code */}, 1000);

           2. new Function() 생성자 – eval을 반드시 사용해야 한다면 new Function() 사용을 고려해 볼 수 있다.
              new Function()으로 실행되는 코드는 지역 함수의 유효범위 안에서 실행 – 자동으로 전역 변수로 만들어 주지는 않는다. (ex. var를 실행하면 eval에서는 전역 변수로 선언되지만 new Function()에서는 지역 변수로 선언된다.)

              var str = ‘var temp = 2; console.log(temp);’;
              new Function(str)();           - new Function()으로 실행 - 추천

              (function() {                     - eval로 실행 – 추천(격리되어 실행되게 한다)

                  eval(temp);

              }());

parseInt()를 통한 숫자 변환

- var month = ‘01’, year = ‘2013’
  month = parseInt(month, 10);
  year = parseInt(year, 10);

위와 같이 기수 매개 변수를 꼭 입력해야 한다.
ECMAScript 3에서는 8진수가 기본이고, ECMAScript 5에서는 변경이 되었다.

위에서 문제가 되는 부분은 시작하는 숫자가 ‘0’으로 시작하는 month 변수가 잘못 해석이 될 수 있다.

 

코딩규칙

- 코딩 규칙을 수립하고 준수하는 목적은 이를 통해 코드의 일관성이 유지되고 예측가능해지며 읽고 이해하기 훨씬 더 쉬워지기 때문이다.
  (코딩 규칙을 정하고자 한다면 조직 안에서 반발이 일어 날 수 있고 예외 적인 부분 때문에 막힐 수도 있지만 규칙을 수립하여 일관되게 준수하는 것 자체가 규칙의 세부 사항보다 훨씬 중요하다.)

   들여 쓰기, 중괄호, 여는 중괄호의 위치, 공백에 대해서 기준을 정하고 규칙을 준수하도록 노력해야 하겠다.

 

명명 규칙

- 코드를 좀더 예측 가능하고 유지보수하기 쉽게 만드는 방법이다. 즉 변수와 함수의 이름을 일관된 방식으로 만드는 것이다.

1. 생성자를 대문자로 하기

   var foo = new Person(); – 함수가 대문자로 시작하면 생성자로 사용할 function인지 파악할 수 있다. – 기본적으로 javascript에서는 function 이름을 소문자로 시작한다.

2. 단어 구분

   javascript에서는 단어 조합시 카멜 표기법(camel case)을 사용한다. 이 표기법의 사용은 
      - 생성자는 단어의 첫 부분을 대문자로 시작하고 나머지는 소문자
         ex. MyConstructor()
      - 함수와 메서드는 단어의 첫 부분은 소문자 이어지는 단어의 첫 문자는 대문자를 사용
         ex. myFunction(){…}
      - 변수명은 단어와 단어 사이에 “_”를 넣는 것을 추천한다. – 함수와 변수의 차이점을 금방 알아 볼 수 있다.
        ex. first_name,  company_name, …

3. 그 밖의 명명 규칙
      - 상수 성격의 변수 ( domain 안에서 값이 변경 되어서는 안 되는 변수 )

        ex. PI = 3.14, MAX_WIDTH = 800;
      - 내부에서 사용하는 비 공개 메서드
        ex. _getName()