티스토리 뷰

Study/JavaScript

[JavaScript][basic] 함수의 호출

공부하는 Bluesky_ 2009. 4. 4. 18:59
반응형
실행 제어 순서
JavaScript가 실행되다 함수를 호출하는 부분을 만나면 현재의 실행을 잠시 중단하고 제어를 매개변수와 함께 호출한 함수로 넘긴다.
function writeOther() {
	document.write(3);
}
document.write(1);
writeOther();
document.write(2);
위의 실행의 결과는 132가 된다.

실행의 제어가 잠시 writeOther 함수로 넘어가게 되었고 해당 함수의 실행이 모두 끝나게 되면 다시 제어는 원래 실행되던 부분으로 돌아가게 된다.

매개변수의 처리

매개변수를 처리에 관해 JavaScript는 상당히 유연하다.
함수를 호출할 때 넘기는 인수의 개수와 함수에 선언된 매개변수의 개수가 일치하지 않아도 오류가 발생하지 않는다.
  1. 인수가 더 많을 경우 매개변수 수 보다 초과하는 인수는 무시한다.
  2. 인수가 매개변수 수 보다 적은 경우 남는 매개변수에 undefined를 할당한다.
또한 인수에 대한 타입체크가 없으며, 어떠한 값이 넘어와도 그대로 매개변수에 할당한다.

가장 중요한 매개변수가 있다.
어떠한 함수를 호출하던지 기본적으로 처리하는 매개변수가 존재한다.
모든 함수는 명시되어 있는 매개변수와 더불어 this와 arguments라는 추가 매개변수를 받게 된다.
  • this는 호출대상 함수가 포함된 객체를 담고 있다.
  • argument는 해당 함수를 호출할 때 넘기는인수를 배열로 담고 있다.
argument에 대해서는 아래 예제를 통해 쉽게 이해할 수 있을 것이다.
function a() {
	var b = ""
	for(var i=0 ; i < arguments.length ; i++ ) b = b + arguments[i] + ",";
	alert(b);
}
a("123","asdf", 35323, "4343");
this는 JAVA의 this와 동일하다. (this에 대한 이해를 하기 위해서는 객체에 대한 이해가 선행되어야 한다.)
다만 JavaScript는 JAVA처럼 Class 기반의 언어가 아니기 때문에 this가 어떤 객체를 바인딩하는가에 대해 신경써야한다.

호출 패턴

함수 호출 패턴
일반적으로 사용하는 함수의 호출을 말한다.
function a() {
	alert(1);
}
a();
함수 호출의 경우 사용은 간단하지만 this가 전역객체에 바인딩된다.
결국 this를 활용하여 객체지향 프로그래밍을 하기 어려운 코딩이 되어버린다.
간단한 실행이라면 함수 호출 패턴을 써도 상관없지만, 좋은 개발을 하는 습관을 들이기 위해서는 함수 호출 패턴은 되도록 자제하는 습관을 기르자.
함수 리터럴로 선언할 수도 있다.
var a = function() {
	alert(1);
}
a();
함수 리터럴은 JSON 객체 내부에서 선언하여 사용하면 유용하게 쓰인다.

메소드 호출 패턴
함수가 객체의 속성으로 선언되어 있는 경우 해당 함수를 메소드라고 부른다.
var aa = {
	a : function() {
		alert(1);
	}
}
aa.a();
이 경우 this는 해당 함수가 포함된 객체 (위의 경우 a)를 바인딩하게 된다.

생성자 호출 패턴
생성자 호출 패턴은 어찌보면 가장 JAVA의 객체 생성 사용과 비슷하다.
다만 JavaScript는 Class 기반이 아니므로 prototype을 사용한다.
var A = function(string) {
	this.aValue = string;
	this.getValue = function() {
		return this.aValue;
	}
}
var a = new A("a의 값");
document.write(a.getValue());
JavaScript에서는 객체를 만들 틀에 해당하는 Class역할을 하는 A를 생성자(constructor)라고 한다.
일반 함수나 메소드는 소문자로 네이밍을 하지만 생성자 역할을 하는 함수는 이름의 첫글자를 대문자로 지정해주는 것이 일반적이다.
JAVA에서 생성자 역할을 하는 constructor와는 그 의미에 차이가 있다.

apply 호출 패턴
apply method는 상속을 해주기 위한 method라고 생각하면 된다. (설명)
JAVA의 extend기능을 함수처럼 사용하여 확장을 할 수 있다.
arguments를 받아서 그대로 전달해주는 형태이며 arguments + prototype을 조합한 (매개변수를 받아서 확장을 해주는) 기능을 한다.
아래의 예제는 koxo.com의 예제를 그대로 가져온 것이다.
function Person(pName,gender,birth){
	this.pName=pName;
	this.gender=gender;
	this.birth=birth;
}

function callPerson(IdNumb,pName,gender,birth){
	this.IdNumb=IdNumb;
	Person.apply(this,new Array(pName,gender,birth));
}

myPerson=new callPerson(12345,'홍길동','남',1900);
document.write('호출한 사람은 ('+myPerson.pName +', '+myPerson.gender +', '+myPerson.birth  +')이다.')
반환
함수가 return이나 함수 몸체 구간이 종료되는 '}'를 만나면 제어가 함수를 호출한 부분으로 반환된다.
이때 반환값이 지정되지 않은 경우 undefined가 반환된다.
함수를 new 전치 연산자와 함께 실행하고 반환값이 객체가 아닌경우 반환값은 this(새로운 객체)가 된다.

결론
언뜻 쉽게 실행되는 듯해 보이는 함수의 실행이지만 미처 놓치고 있던 부분들이 있었다면 숙지하는 것이 좋다.
함수의 호출 패턴으로 4가지를 언급하였지만 apply method와 비슷한 동작을 하는 call method도 존재한다.
일반적인 JavaScript 개발을 할 경우 위의 4가지 패턴중 거의 처음 2개의 패턴을 사용하게 된다.
함수 호출 패턴은 간단하지만 되도록 메소드 호출 패턴을 익혀두고 JSON을 사용하여 효율적인 개발을 하는 것을 권한다.

함수 호출에 대한 위 내용들을 익히게 되었다면
  • 메소드 호출패턴과 JSON을 이용한 클로저 구현
  • Class 객체 선언을 통한 JavaScript Source의 효율적인 관리

를 통해 한단계 더 나은 개발을 할 수 있게 된다.

반응형
댓글
댓글쓰기 폼