7. Javascript 함수 (3) - 함수 프로퍼티 2

 

이번 아티클에서는 함수의 프로퍼티 중 표준 프로퍼티를 자세히 살펴보도록 하겠습니다. 

 

함수의 length 프로퍼티

함수 객체가 갖는 표준 프로퍼티인 length는 [함수가 정상적으로 실행될 때 기대되는 인자의 개수]를 의미합니다. 아래 예제와 같이 함수 정의 시 선언된 파라미터의 개수를 각각 다르게 하여 각 함수의 length를 출력해 봅시다. 

 

function func0() {

}

function func1(x) {
    return x;
}

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

function func3(x, y, z) {
    return x + y + z;
}

console.log(func0.length);	// 0
console.log(func1.length);	// 1
console.log(func2.length);	// 2
console.log(func3.length);	// 3

 

 

---

 

함수의 prototype 프로퍼티

prototype 프로퍼티 역시 length와 마찬가지로, 함수가 생성되면 반드시 갖게되는 객체로서의 프로퍼티입니다. [[Prototype]] 프로퍼티의 개념과 혼동해서는 안 되겠죠? 이후 아티클에서 Javascript에서의 프로토타입의 개념을 더 자세히 살펴볼 예정이니, 여기서는 간단하게 기본 개념을 숙지하도록 하겠습니다. 

 

prototype은 간단히 정리하자면, 해당 함수가 생성자로 이용됐을 때 이를 통해 생성된 객체의 부모 역할을 하게 되는 프로토타입 객체입니다. 대부분 어떤 특정 함수가 부모로서의 함수 객체의 특성이 구현되는 것은, 바로 이 prototype 객체가 있기 때문에 가능하다고 이해하시면 됩니다. 

 

우선 네이밍과 관련해서는, 별도의 prototype 객체 네이밍 규칙이 존재하는 것은 아니며 함수명.prototype 형태가 됩니다. 그럼 이 prototype 객체에는 어떤 프로퍼티가 담겨있을까요? 

 

기본적으로 prototype 객체는 constructor라는 프로퍼티를 갖습니다. 그럼 이 함수의 constructor를 출력해보면 어떤 내용이 담겨있을까요? 다름 아닌, 함수 자신을 참조하고 있습니다. 즉, add( )라는 함수가 가진 prototype 객체의 constructor는 add( ) 함수를 참조한다는 의미죠. 그리고 역시 객체이기 때문에 [[Prototype]] 프로퍼티를 가지고 있습니다. 

 

아래 예시를 통해 prototype 객체의 구성을 한 번 살펴보도록 하겠습니다. 

 

function newFunction() {
    return false;
}

console.dir(newFunction.prototype);
console.dir(newFunction.prototype.constructor);

 

위 코드를 크롬 브라우저에서 실행해 살펴보도록 하겠습니다. 

 

prototype 객체들의 구성 요소

 

설명했다시피, 함수의 prototype 속성에는 constructor와 [[Prototype]] 프로퍼티가 있습니다. 앞의 정의에서 말씀드렸듯 이 prototype은 향후 생성자를 통해 생성된 객체들의 [[Prototype]]이 되기 때문에, 이곳에 메소드를 추가하는 형태가 될 것입니다. 그리고 constructor는 상술한 내용과 마찬가지로 newFunction( )이라는 함수 자신을 참조하고 있는 것을 확인할 수 있습니다. 

 

나중에 this 바인딩에 대해서 살펴볼 때도 중요하게 연결되는 부분이니 반복하여 읽고 이해해봅시다!