유지보수 가능한 코드 작성
- 읽기 쉽게
- 일관적이게
- 예측 가능하도록
- 문서화( 코드 코멘트, 주석, 개발 문서 )
전역 변수 최소화
- 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()