지난 글에 이어 이번에는 함수 선언에 대해서 정리해보겠습니다.
변수의 선언에 대해서 정리한 글은 이전 글 https://chois82.tistory.com/62를 참고하시기 바랍니다.
2. 함수 선언
function doSomething() {
alert("Hello world");
}
// 나쁜 예
doSomething();
function doSomething() {
alert("Hello world");
}자바스크립트 엔진이 다음 예제처럼 코드를 해석하므로 위 코드는 정상적으로 동작합니다.
// 나쁜 예
function doSomething() {
alert("Hello world");
}
doSomething();
이전에 이야기했든이 자바스크립트 엔진이 해석하는 방법대로 코드를 작성해야 하므로 함수를 사용하기 전에 반드시 먼저 선언할 것을 권장합니다. 이러한 디자인은 크락포드의 코드 컨벤션에서 볼 수 있습니다. 크락포드는 다음 예제처럼 지역 함수는 변수 선언 이후에 선언할 것을 권장하고 있습니다.
function doSomethingWithItems(item) {
var i, len,
value = 10;
result = value + 10;
function doSomething(item) {
// 실행코드
}
for(i=0; len=items.length; i<len; i++) {
doSomething(items[i]);
}
}JSLing와 JSHint는 함수 선언 전에 함수를 사용하면 경고 메시지를 출력합니다.
// 나쁜 예
if (condition) {
function doSomething() {
alert("Hi");
}
} else {
function doSomething() {
alert("Yo");
}
}앞의 코드는 브라우저에 따라 동작할 수도 있고 동작하지 않을 수도 있습니다. 대부분 브라우저는 조건문과 상관없이 두 번째 함수 선언문으로 함수를 선언합니다. 파이어폭스는 confition 값에 따라 적합한 함수를 선언합니다. 이처럼 ECMAScript에서 불분명하게 정해진 명세로 인해 브라우저 별로 다르게 구현되므로 예제처럼 코드를 작성하면 안 되고 반드시 조건문 밖에 함수를 선언해야 합니다. 구글 자바스크립트 스타일 가이드에서는 이 패턴을 금지하고 있습니다.
3. 함수 호출문에 공백 넣기
일반적으로 함수 호출문은 복합문과 쉽게 구분할 수 있도록 함수명과 괄호 사이에 아무런 공백도 입력하지 않는 스타일을 권장합니다.
// 좋은 예
doSomething(item);
// 나쁜 예 : 복합문처럼 보임
doSomething (item);
// 비교를 위해 복합문을 추가했습니다.
while (item) {
// 실행코드
}
크락포드의 코드 컨벤션도 이 스타일을 권장하고 있습니다. 또한 Dojo 스타일 가이드, SproutCore 스타일 가이드, 구글 자바스크립트 스타일 가이드에서는 예제 코드를 통해 이 스타일을 권장합니다. jQuery 코어 스타일 가이드는 이 스타일에서 더 나아가 다음 예제처럼 괄호를 연 후에 닫기 전에 공백을 추가해야 한다고 말합니다.
// jQuery style
doSomething( item );
문자열일 때는 공배를 넣지 않습니다. 다음의 예제는 모두 jQuery에서 유효한 문장입니다.
// jQuery 예외 규칙
doSomething(funtion () {});
doSomething({ item: item });
doSomething([ item ]);
doSomething("Hi");
그러나 스타일에 예외가 있으면 개발자에게 혼란을 줄 수 있어 좋지 않습니다.
이번 포스팅에서는 '함수 선언'과 '함수 호출문에 공백 넣기'에 대해서 정리해보았습니다.
다음 포스팅에서는 '함수 선언하고 바로 호출하기'에 대해서 정리해보겠습니다.
그럼 이만.
끝.