새로운 기능함수를 만들고, 참조하다.

구문 1 : function functionName([param1][,param2][...,paramN]){JsCode}

구문 2 : functionName=new Function([param1][,param2][...,paramN]){JsCode}

인수

functionName : (기능함수 명칭)

필수적인 요소. 새로 만들 기능함수 이름이다.

단어 'function'은 예약어이므로 function을 기능함수(function)명(name)으로 사용할 수 없다.
그러므로 수행하는 기능을 잘 나타내는 단어로 조합하여 사용한다.

function은 사용자가 기능함수를 만들 때 사용하는 문장이다.

param1,param2,...paramN : (기능함수의 인수)

선택적인 요소. 기능함수에 사용하는 인수 목록이다.

JsCode : (기능함수의 수행문 본체)

선택적인 요소. 기능함수를 호출하면 실행되는 Javascript 코드 블록을 포함한 문자열이다.

특성

Javascript에서 Function은 값을 갖는 기본적인 데이터 형식이다.

function 문장은 수치, 문자열, 개체들, 반환되는 값들을 포함하는 지정된 파라메터(parameters)를 사용하여 기능함수가 형성 됨을 선언한다. Function 개체는 고유의 속성들과 메서드들을 갖는다.

구문

• 구문 1은 Javascript에서 새 기능함수를 만드는 표준 방법이으로, 이 Function 개체를 사용하면 Javascript에서 필요에 따라 Function 개체로 변환하는 기능함수값을 만든다.
• 구문 2는 기능함수 개체들을 명시적으로 만들 경우 사용하는 대체 형식이며, 기능함수를 호출하면 Javascript에서 구문 2로 만든 Function 개체를 기능함수값으로 변환한다.

반환값

기능함수 내부에서 선언한 변수는 기능함수 밖에서는 사용 할 수 없다. function() 기능함수에서 특정 값을 반환하기 위해서는 return 문장을 사용하여 반환을 명시하여야 한다.

사용

언제나 필요할 때에 기능함수 Function 개체 를 호출하여 그 값을 사용 할 수 있다.
Function 구성자(constructor)를 사용하여 기능함수를 만들면 매번 검정을하게 되므로 효과적인 방법이 못되고, 반면에 function 문장을 사용하여 구성하면 컴파일되어 효과적이 된다. 기능함수의 호출은 구문 1이나 구문 2에서 공히

functionName(necessaryParameters);

function 문장을 사용한 예제

<SCRIPT>
function calcAverage(a,b,c,d){
  return (a+b+c+d)/4;
}
document.write(calcAverage(1,9,2,3));
</SCRIPT>

Function constructor를 사용한 예제

<SCRIPT>
var calcAverage=new Function('a','b','c','d','return((a+b+c+d)/4)');
document.write(calcAverage(1,9,2,3));
</SCRIPT>

Function constructor를 사용한 예제

<SCRIPT>
myCompany={name:'Trio',phone:'123456789',total:25};
var addMemb=new Function('obj','x','obj.total+=x'); // Function constructor를 사용
addMemb(myCompany,5);
document.write(myCompany.name+', 총원='+myCompany.total+', 전화번호='+myCompany.phone);
</SCRIPT>

주의

<SCRIPT>document.write(calcAverage)</SCRIPT>

참고 ; 기능함수를 호출할 때는 반드시 괄호와 필수적인 인수가 있어야 한다. 괄호 없이 기능함수를 호출하면 기능함수 결과 대신 기능함수 텍스트가 반환된다.(윗 경우)

<SCRIPT>document.write(calcAverage())</SCRIPT>

<SCRIPT>document.write(calcAverage(1,2,3,4))</SCRIPT>

기능함수가 인수값을 변경시키면, 인수가 별개의 개체가 이닌 이상 그 변경이 기능함수이나 전반적으로 혹은 그 호출되었던 기능함수에 적용되지 않는다. 별개의 개체인 경우에는 그 속성들이 개체에 반영된다.

function 문장을 사용하면

<SCRIPT>
myCompany={name:'Trio',phone:'123456789',total:25};
function addMemb(obj,x){obj.total+=x} // function 문장을 사용
addMemb(myCompany,5);
document.write(myCompany.name+', 총원='+myCompany.total+', 전화번호='+myCompany.phone);
</SCRIPT>

기능함수는 네스팅 예제

<SCRIPT>
function KrWon(won1,won2,dollar1,dollar2){
  function exchange(amount){
    return amount*1300;
  }
  return won1+won2+exchange(dollar1)+exchange(dollar2);
}
document.write('금액 합계='+KrWon(10000,20000,200,300));
</SCRIPT>

내부 기능함수의 호출은 해당 외부 기능함수 속에서만 가능하다. 내,외 기능함수에서만 서로 변수와 인수들만 사용할 수 있다.

기능함수이 이벤트처리자 예제

<SCRIPT>
msg='마우스를 클릭했다';
var clickTest=new Function("alert(msg)")
</SCRIPT>

<DIV onClick="clickTest()">마우스를 클릭해 보라</DIV>

arguments(컬렉션) 속성 IE3.02 NS3
⇒ Function 개체에 전달된 인수들(arguments 컬렉션)의 배열변수를 반환한다.

문법: [cVal=][functionObj.]arguments

코드: myFunc=function(a,b,c){return arguments+' | '+arguments.length};document.write(myFunc(1,2,3)) 결과:

arguments.callee 속성 IE NS4
⇒ Function 개체의 본문에 해당하며 실행 중인 Function 개체 속에서 Function 개체 자체 문자열을 반환한다.

문법: [sVal=][functionObj.]arguments.callee

코드:myFunc=function(a,b,c){return arguments.callee};document.write(myFunc(1,2,3))
결과:

arguments.caller 속성 IE3.02 NS3
⇒ 현재 기능함수를 불러온 기능함수에 대한 참조를 반환한다.

문법: [sVal=][functionObj.]arguments.caller

코드:myFunc=function(a,b,c){return (myFunc.caller)};function showit(){document.write(myFunc(1,2,3))};showit()
결과:

arguments.length 속성 IE3.02 NS
⇒ 현재 실행 중인 기능함수에 전달된 인수의 갯수를 반환한다.

문법: [iVal=][functionObj.]arguments.length

코드: myFunc=function(a,b,c){return arguments.length};document.write(myFunc(1,2,3)) 결과:

constructor 속성 IE3.02 NS3
⇒ Function 개체의 prototype을 만드는 기능함수를 지정한다.
이는 기능함수 이름을 포함하는 문자열이 아니고 Function 개체에 대한 직접적인 참조이다.

문법: functionObj.constructor[=sVal]

코드: document.write(clickTest.prototype.constructor) 결과:

length 속성 IE3.02 NS3
⇒ 기능함수에 전달을 기대하는 인수의 갯수를 반환한다. arguments.length는 실제적으로 전달된 인수의 갯수인데 반해, functionObj.length는 기능함수 선언에 명시된 인수의 갯수이다.

문법: [iVal=]functionObj.length

코드: document.write(KrWon.length) 결과:

prototype 속성 IE3.02 NS3
⇒ 설정자가 메서드와 속성들을 추가할 수 있는 개체의 클래스의 초기 설정에 대한 prototype을 나타낸다. 이 prototype 속성으로 개체에 추가적인 속성들과 메서드들을 제공할 수 있다. Object.prototype 속성을 참고하라.

문법: functionObj.prototype.name[=sVal]

코드: document.write(KrWon.prototype.constructor) 결과:

call 메서드 IE5 NS4.06
⇒ 개체의 메서드를 호출하여 다른 개체로 부터 현재 개체로 대체한다.

문법: functionObj.call(thisObj[,argument1[,argument2[,,...argumentN]]])

문법: [Function] call([thisObj[:Object[,argument1[,argument2[, ... [,argumentN]]]]])

toString 메서드 IE4 NS3
⇒ Function 개체의 문자열을 반환하고, Object.toString 메서드를 덮어 씌운다.

문법: functionObj.toString()

코드: document.write(clickTest.toString()) 결과:
코드: document.write(calcAverage.toString()) 결과:

valueOf 메서드 IE4 NS3
⇒ toString 메서드와 같이 Function 개체의 소스코드를 대표하는 기능함수 그 자체를 문자열값으로 반환한다. Object.valueOf 메서드를 덮어 씌운다.

문법: functionObj.valueOf()

코드: document.write(clickTest.valueOf()) 결과: