JavaScript_함수의 역할

◎ 자바스크립트 함수의 역할

■ 자바스크립트 함수와 메서드는 전혀 다른 개념이다.

- 자바스크립트 함수는 메서드 역할을 할 수 있지만, 객체지향 프로그래밍의 메서드는 자바스크립트의 함수 역할을 할 수 없다.

- 메서드와는 다르게 함수가 몇 가지 역할을 수행할 수 있는 요소이기 때문에, 이해가 힘들수 있다.

※ 함수의 역할 구분

역할 구분	설명
역할 #1	호출 가능한 루틴으로서의 함수
역할 #2	값으로서의 함수 -인자로 전달 가능 -변수에 할당 가능 -다른함수의 반환값으로 사용 가능
역할 #3	다른 인스턴스를 생성할 수 있는 요소, 객체타입으로서의 함수

============================================

function f(){

// 실행 코드 블록

}

f.prop = "p";  //prop 속성 멤버

f.method = function(){...};  // method 메서드 멤버

======================= 함수객체 f를 정의하는 코드 ==

- 흔히 '객체' 라고 하는 Object 객체가 아닌 f는 '함수 객체' 로서 Object 객체와는 다른 속성 및 메서드를 멤버로 갖는 객체이다.

- f 는 객체로서 코드에서처럼 사용자가 정의한 prop 속성과 method 메소드를 추가할 수도 있다.

   이제 f를 다른함수의 인자로 전달하면, 해당 함수에서 f의 prop과 method를 사용할 수 있다.

함수는 new와 함께 사용되어 다른 객체를 생성하는데 사용될 수 있는데, 함수가 다른 객체를 생성할 수 있다는 것은 결국 자바스크립트에서는 함수가 일반 객체지향 프로그래밍 언어의 클래스와 유사한 역할을 할 수 있다는 의미,

new 와 함께 사용되면 객체를 생성하는 역할 #3을 수행

new 없이 ()만 사용된다면 역할 #1로 사용된다.

만약 값이 필요한 자리에 함수가 사용된다면 역할 #2로 작동한다.

■ 함수 모델링

===========================================

// add 함수 정의

function add(x, y) {

 return x + y;

}

이 함수에 대한 정의가 컴파일(파싱) 단계를 거치고 나면 메모리에는 다음처럼 add 함수가 구성된다.

변수 스코프	프로토 타입 객체
+ prototype : □	+constructor : □
-x : undefined
-y : undefined
return x+y;
실행 코드블록	공개변수 영역

변수 스코프

- 함수 add가 메모리에 정의되면 위 그림처럼 기본적으로 호출 가능한 코드블록(return x+y)이 정의된다.

- 함수 인자로 사용했던 x, y는 add함수의 지역변수로 정의되어 내부에서 접근할 수는 있지만 외부에서는 접근할 수 없다. 그래서 "-" 로 표시되어있다.

- 변수 스코프에는 x, y 말고도 prototype이라는 특별한 변수가 함께 정의되는데, 이 변수는 내부코드에서도 접근할 수 있지만 외부에서도 접근할 수 있다.

prototype은 다른 객체를 가리키는 참조변수로서 그림 오른쪽을 보면 add 함수 전용 프로토타입 객체라는 것이 정의되는데, prototype은 바로 이 객체를 가리킨다

• 변수 스코프는 함수를 정의할 때 사용된 변수가 정의되는 영역이다.

실행 코드 블록 영역

- prototype을 제외하고 변수 영역에 정의된 비공개 변수는 외부에서 접근할 수 없다.

이 영역의 변수에 접근할 수 있는 방법은 실행코드블록에있는 내부코드를 통해 접근하는 방법뿐이다.

x : undefined y : undefined

return x+ y;

add 함수 정의

공개 변수 영역

자바스크립트 객체의 멤버는 런타임에 언제든지 추가, 제거, 대체될 수 있다.

함수도 객체로서 멤버가 동적으로 추가될 수 있는데, 이렇게 동적으로 추가되는 멤버는 함수를 정의할 때 정의되는 변수 스코프와는 다른영역에 정의된다.

프로토타입 객체

함수를 정의하면 모든 함수에는 프로토타입객체라는 것이 함께 정의된다. 객체지향 자바스크립트에서는 이 객체가 매우 중요하다.

================================================================

■ 함수 정의 - 3가지 방법

함수정의

함수를 정의하는 방법으로 “function 함수명(매개변수정의)”문을 사용한다.

function add(x,y){

return x+y;

}

이렇게 정의하면 프로그램을 파싱하는 단계에서 함수 변수인 add가 정의되고, 함수를 호출하면 런타임에 x,y,가 정의된다.

함수 리터럴 이용

var add = function(x,y){return x+y;};

이렇게 정의된 함수는 앞에서 정의한 방법에 비해 이름이 없다는 차이가 있다. 이 코드는 앞에서 정의한 함수 add와 동일한 실행코드블록을 갖는 함수를 정의해 add라는 변수에 할당하고있다.

Function 생성자 사용

흔하지 않은 방법이지만, Function을 사용할 수도 있다. Function을 이용해 함수를 정의할 때는 new를 함께 사용해야한다.

var add = new Function(“x”, “y”, “return x+y;”);

■ 함수인자 -arguments, callee

※ Arguments 타입의 객체

함수 내부에서는 arguments[i]를 통해 Arguments 객체를 통해 넘어오는 인자에 접근할 수 있다.

- 함수를 호출하면 자바스크립트는 호출하는 인자를 차례로 Arguments라는 타입의 객체에 배열처럼 넣어서 이 객체를 호출하는 함수에 전달한다.

- Arguments 타입의 객체는 함수가 호출되면 자바스크립트가 자동으로 생성하는 객체이다.

함수 내부의 코드에서는 arguments라고하는 함수의 특별한 속성을 이용해 Arguments 객체이 접근할 수 있다.

-즉, 함수 내버에서는 함수에 정의된 매개변수(add의 x,y) 를 통해서도 접근할 수 있지만, arguments를 통해서도 전달되는 모든 인자값에 접근할 수 있다. x, y 대신 arguments를 이용하면, x,y에 매핑되지 않는 인자값에도 접근할 수 있다.

-Arguments 객체 자체는 배열이 아니다. 그러나 각 인자에 접근할 수 있게 length 속성 및 연산자 “[]”를 지원한다.

※ callee ( Arguments 의 속성 )

 arguments.callee

arguments.callee는 생성자의 this와 유사한 개념이다.

callee 속성은 현재 실행되고 있는 함수(함수 객체)를 나타낸다. 생성자안에서 사용되는 this와도 유사한 개념이다.

this가 함수 역할 #3에서 새롭게 생성된 객체가 자신을 가리키는데 사용되는 방법이라면 callee는 함수 역할 #2에서 함수 객체 자신을 가리키는 수단이다.

arguments.callee 속성을 사용하면 익명함수(unnamed function) 갖 자신을 참조할 수도 있고 재귀 호출도 쉽게 구현할 수 있다.

function makeFactorialFunc() {

   return function(x) {

      if ( x <= 1)

          return 1;

     return x * arguments.callee(x -1);

  };

}

사용법

var result = makeFactorialFunc()(5);