자바스크립트 문법3(함수)

함수와 메서드

함수와 메서드는 반복되는 어떤 동작들을 필요할 때마다 호출하여 사용할 수 있게하는 코드블럭을 말한다. 하지만, 약간의 차이가 있는데, 쉽게 말하자면 객체 내부에 존재하는 함수는 메서드고, 그렇지 않은 것은 함수이다. 하지만 기능상으로 큰 차이가 없기 때문에 일부에서는 혼용하기도 하지만,구분해서 기억해두는 것을 권한다.

자바스크립트에서 함수

자바스크립트에서 함수는 그 자체가 1차 객체이다. 함수를 선언하여 변수에 대입하여 이리 저리 옮길 수 있는 것이 자바스크립트라고 생각할 수 있지만 함수라는 객체를 생성해서 변수에 할당한다고 보는 것이 더 정확할 것이다. 따라서 자바스크립트의 함수는 속성과 메서드를 가지며, 함수 내부에 메서드를 가질 수 있고 속성또한 가질 수 있고, 실제로 자바스크립트의 객체가 가지는 모든 특징을 가진다.

var functionTest = function()
{
    //함수내부 변수 선언
    var arg = "Son";
    //함수내부 메서드 선언
    this.name = function(argument)
    {
        //함수 내부의 내부에서 함수 선언
        var printName = function(strName)
        {
            alert(strName);
        }
        //함수 사용
        printName(argument);
        //지역변수
        var localVariable = "localVariable";
       //속성
        this.attribute += argument;   
        alert(localVariable + " " + attribute);
    }//close name()
    //함수 사용
    name(arg);
}//close functionTest()

위의 예에서 알 수 있듯이, 함수 내부에서는 자바스크립트 클래스 선언에서 사용할 수 있는 모든 것을 할 수 있다.

자바스크립트의 함수는 내장 객체인 function을 상속받고 있으며 function은 object 내장 객체를 상속받고 있다. 따라서 다음과 같은 코드와 같이 비교할 수 있다.

var testFunction = function() { }
if(testFunction instanceof Function)
    alert("function을 상속받고있습니다.");
if(testFunction instanceof Object)
    alert("object를 상속받고있습니다.");

Function과 Object객체를 상속받고 있기에, 해당 객체가 지원하는 속성과 메서드 또한 사용가능하다.

자바스크립트 함수 정의

자바스크립트 함수를 정의하는 방법은 두가지 방법을 제공한다. 하나는 위와 같은 function()을 사용하여 반환되는 함수 객체를 변수에 담는 방법과 function이라는 예약어를 먼저 기술하는 형태다. 둘의 차이점은 없으니 선호하는 것을 사용하면 된다.

//함수 선언 방법1
function functionName() { }
//함수 선언 방법2
var name = function() { }

내부적으로 자바스크립트는 내장 function객체를 상속받은 사용자 정의 function객체를 반환하며, 사용자가 기술한 코드 블럭은 텍스트 형태로 객체 내부에 저장된다.

자바스크립트 함수 호출

자바스크립트 함수를 호출하기 위한 방법은 다른 언어와 다르지 않다. 하지만 위에서 언급했듯이 자바스크립트에서 함수는 하나의 객체이다. 따라서 다음과 같은 여러가지 호출 방법을 제공한다.

//일반적인 호출 형태
functionName();
//메서드를 활용한 형태
functionName.call(Context Object, argument1, argumentN);
functionName.apply(Context Object, argument Array);

function에 내장된 메서드인 call이나 apply를 이용해서 함수를 호출 할 수 있다. call과 apply는 전달받은 첫번째 매개변수를 Context Object로 지정해버린다. function내부에서 this키워드가 가리키는 Object가 Context Object이며, 보통 Context Object는 해당 메서드를 포함하고 있는 객체 또는 Global객체가 된다. 여기서, 이 Context Object를 call이나 apply함수를 이용해서 지정한 Object로 지정한다는 의미이다. call과 apply의 차이점은 두번째부터 시작되는 매개변수의 형태에 따른 차이인데, call은 매개변수들이 나열되는 반면에 apply는 배열형태로 매개변수를 지정받게 된다. call과 apply에서 매개변수를 생략할 경우, Global객체가 Context Object로 지정되며 매개변수는 전달되지 않게 된다. 아래는 Context Object를 사용자가 지정하는 예제이다.

function test()
{
    alert(this.toString());
}
test.call(); //Context Object를 지정하지 않음
test.call("string"); //Context Object를 String 객체로 지정
test.call(new Array(1,2,3)); //Context Object를 Array객체로 지정
test.call(123); //Context Object로 정수를 지정

자바스크립트 매개변수

자바스크립트 함수에서 매개변수에는 제약이 없다. 타입을 지정하지 않아도 되고, 매개변수 개수에 맞추어도 되고, 적게 혹은 많은 매개변수를 전달해도 아무 이상없이 동작한다. 먼저 기초적인 매개변수 사용 방법은 다른 언어와 크게 다르지 않다.

function person(name, age)
{
    alert("name : " + name + "\nage : " + age);
}
person("son", 10);

위의 함수에서는 2개의 매개변수를 지정했지만, 만일 더 많은 매개변수를 지정하면 넘는 매개변수들은 모두 무시되며, 오히려 매개변수가 부족하다면 null로 대체되어 값이 전달된다.

불특정 다수의 매개변수 받기

자바스크립트의 function 객체는 arguments라는 속성을 가지고 있으며, 이 속성에는 이 함수가 받은 모든 속성을 가지고 있다. 따라서 다음과 같은 방법으로 매개변수의 숫자에 제약을 받지 않고 모든 매개변수를 받을 수 있다.

function person()
{
    var text = "";
    for(var i = 0; i < arguments.length; i++)
        text += arguments[i];
    alert(text);
}
person(1,2,3,4,5,6,7,8,9);

arguments는 해당 함수를 정의할 때 지정한 매개변수와 상관없이 함수가 호출 될 때 당시에 받은 모든 인자를 가지게 된다. arguments는 객체이며, 배열처럼 사용할 수 있다.(하지만 배열이 아니다. 'for(a in b)'문장을 통해 모든 인자를 뽑아 낼 수 조차 없다.)

arguments가 가지는 속성으로서 대표적인 것은 length(매개변수의 개수), callee(현재 함수를 가리킨다), caller(현재 함수를 호출한 함수를 가리킨다)

Default 매개변수

자바스크립트에서도 Default 매개변수를 사용할 수 있다.

function person(name, age, gender)
{
    //Default 매개변수 지정
    name = name || "No Name";
    age = age || "Who knows?";
    gender = gender || "No information supplied";
    alert("Name : " + name + "\nAge : " + age + "\nGender" + gender);
}
//Default 매개변수 시험해보기
person("Son","");