함수 객체의 기본 프로퍼티

자바스크립트에서 함수는 객체다.

이것은 함수 역시 일반적인 객체의 기능은 물론이고 추가로 호출됐을 때 정의된 코드를 실행하는 기능을 가지고 있다는 것이다. 

(나와 같은 초보에게 함수는 코드를 실행하는 기능으로 많이 사용하지만...)

또한, 일반 객체와는 다르게 추가로 함수 객체만의 표준 프로퍼티를 가지고 있다.

다음의 예제 코드로 함수 객체의 기본 프로퍼티들을 살펴 보자.

// add() 함수 정의

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

console.dir(add);

함수의 기본 프로퍼티를 알아보기에 앞서 console.dir()에 말하자면 console.log(), info(), warning()등 처럼 단순 로그를 보여주는 것과는 달리 프로퍼티가 있다면 객체의 프로퍼티들을 모두 보여준다.

이제 console.dir(add)의 결과를 살펴보면 add()함수는 arguemts, caller, length, name 등과 같은 다양한 프로퍼티가 기본적으로 자동 생성된 것을 확인할 수가 있다.

이러한 프로퍼티들이 함수를 생성할 때 생기는 표준 프로퍼티다.

name, caller, arguments

먼저 name, caller, arguments, __proto__ 프로퍼티를 살펴보자.

참고로 이 프로퍼티들은  ECMA 표준이 아님을 기억하자.

name 프로퍼티는 함수의 이름을 나타내고 만약 이름이 없는 익명함수라면 빈 문자열이 나타낸다.

caller 프로퍼티는 자신을 호출한 함수를 나타내는데 위 코드에서는 add() 함수를 어떤 곳에서도 호출하지 않았기 때문에 null 값이 나왔다.

arguments 프로퍼티는 함수를 호출할 때 전달된 인자값을 나타내는데  add()함수가 호출된 상태가 아니라서 null값이 출력됐다.

arguments 프로퍼티와 같은 이름으로 ES 표준에서는 arguments 객체를 정의하고 있는데 이는 arguments 객체를 공부할 때 다시 알아보자.

__proto__

다음으로 __proto__ 프로퍼티를 알아보자.

프로토타입에서 모든 자바스크립트 객체는 자신의 프로토타입을 가리키는 [prototype] 내부프로퍼티를 가지고 있다.

그리고 크롬브라우저에서 [prototype] 내부프로퍼티를 __proto__ 프로퍼티로 구현되어 있다.

add() 함수 역시 자바스크립트 객체이므로 [prototype] 내부프로퍼티인 __proto__ 프로퍼티를 가지고 있고 이 __proto__ 프로퍼티는 자신의 부모역할을 하는 프로토타입 객체를 가리키게 된다.

ECMA 표준에서는 add()함수와 같이 함수 객체의 부모역할을 하는 프로토타입 객체를 Function.prototype 객체라고 명명하고 있으며이 Function.prototype 객체 역시 함수 객체라고 정의하고 있다.

그리고 크롬 브라우저에서는 Function.prototype 객체를 Empty() 함수라고 정의하고 있다.

Empty()함수 역시 함수 객체이므로 name, caller, arguments 등과 같은 함수 객체의 프로퍼티들을 가지고 있다.

length, prototype

마지막으로 length와 prototype 프로퍼티에 대해 알아보자.

ECMA5 스크립트 명세서에는 모든 함수는 length, prototype 프로퍼티를 가져야 한다고 정의하고 있다.

여기서 주목할 점은 prototype 프로퍼티가 앞서 언급한 __proto__과는 다르므로 혼동하지 말아야 한다.

모든 함수는 객체로서 prototype 프로퍼티를 가지고 있다. 

이 prototype 프로퍼티는 사용자가 함수를 정의하면 자동으로 prototype 프로퍼티가 만들어지며  constructor 프로퍼티 하나만 있는 객체를 가리킨다. 

그리고 prototype 프로퍼티가 가리키는 프로토타입 객체의 유일한 constructor 프로퍼티는 자신과 연결된 함수를 가리킨다.

이 말인 즉슨, 자바스크립트에서 함수를 생성하면 함수 자신과 연결된 프로토타입 객체를 동시에 생성하며, 이 prototype 프로퍼티와 constructor 프로퍼티는 서로를 참조하게 된다.

prototype 프로퍼티와 __proto__ 의 차이점

두 프로퍼티는 모두 프로토타입 객체를 가리키는 공통점을 가지고 있으나 차이점은 있고 구분해야 한다는 점이다.

내부 프로퍼티인 __proto__(객체의 숨은 프로퍼티:암묵적 프로토타입 링크)는 객체 입장에서 자신의 부모인 프로토타입 객체를 가리키는 반면에, 함수 객체 자체가 가지는 명시적인 prototype 프로퍼티는 함수가 생성자로 사용될때 이 함수를 사용하여 만들어진 객체의 부모역할을 하는 프로토타입을 가리킨다는 점이다.

이 둘의 차이점을 좀더 자세히 알려면 자바스크립트의 객체를 생성하는 규칙을 알아야 한다.

우선 여기까지만 하고 prototype에 대한 것은 따로 챕터를 구성해 좀 더 보안하도록 하겠다.

그럼 마지막으로 length 프로퍼티에 대해 알아보고 끝내자.

함수 객체의 length 프로퍼티는 모든 함수가 가져야하는 표준 프로퍼티라고 언급했다.

이 length 프로퍼티는 함수가 실행될 때 기대되는 인자의 개수를 나타낸다.

다음의 예제 코드를 살펴보자.

// 함수 세 개를 정의
function fn0() {

}

function fn1(a) {
    return a;
}

function fn2(a,b) {
    return a + b;
}

console.log(fn0.length, fn1.length, fn2.length)
// 0, 1, 2

이렇게 출력값을 보면 함수 객체의 lengh 프로퍼티에는 함수 작성시 정의한 인자 개수를 나타내고 있다.

[*출처 인사이드 자바스크립트*]

Jaehee's WebClub