10. Javascript 프로토타입 체이닝 (4) - 데이터 타입 확장

 

 

앞의 아티클에서, 프로토타입 객체에 메서드를 선언하여 해당 객체에서 새로 선언한 메서드를 불러오는 예시를 보여드렸습니다. 이번에는 프로토타입 객체에서 데이터 타입을 확장하는 방식을 설명해 보도록 하겠습니다. 원리 자체는 간단해 보일 수 있지만, 사실 Javascript에서의 프로토타입 개념이 제대로 잡혀있지 않다면 설명해도 의미가 없는 내용입니다. 

 

우선 Object의 프로토타입에 정의된 표준 메서드를 떠올려 봅시다. hasOwnProperty 또는 isPrototypeOf 같은 표준 메서드들은 Object를 통해 생성되었다고 볼 수 있는 객체들이 자유롭게 사용할 수 있었습니다. 이와 비슷한 방식으로 Number, String, Array의 경우 각각의 프로토타입이 가지고 있는 메서드들을 숫자, 문자열, 배열 등에서 표준 메서드로서 사용할 수 있습니다. 

 

 

---

 

빌트인 프로토타입 객체에 메서드 추가하기

 

이제 프로토타입 객체에 메서드를 추가해 사용하는 방식을 살펴봅시다. 지금은 직접 사용할 일이 많지는 않지만, 앞으로 자주 써먹게 되는 메서드 동적 선언 방식이므로 잘 기억해두셨으면 좋겠네요. 우선, 아래 예제를 살펴보겠습니다. 모든 스트링 객체에서 사용할 수 있는 새로운 메서드를 선언하고, 실제로 사용해 결과를 확인하는 것이 목표입니다. 

 

String.prototype.newMethod = function() {
    console.log("NEW METHOD");
};

var testStr = "STRING TEST";
testStr.newMethod();

console.dir(String.prototype);

 

우선 위에서 보다시피, String의 프로토타입 객체에 newMethod라는 새로운 메서드를 선언해 추가했습니다. 새롭게 사용자가 만든 객체가 아닌, Javascript 내장 객체의 프로토타입에도 자유롭게 선언하는 것이 가능하다는 사실을 기억합시다. 그리고, 이 String의 표준 메서드를 사용해야 하니 String 타입의 객체를 하나 선언해 줍니다. 여기서는 testStr이라는 이름의 변수로 선언했죠. 그리고 testStr.newMethod( ) 형태로 이 메서드를 실행해 봅시다. 그럼 별다른 에러 없이 정상적으로 "NEW METHOD"가 출력되는 것을 확인할 수 있습니다. 

 

이렇게 생성자 함수의 프로토타입 객체에 메서드를 동적 생성하는 것만으로도, 표준 메서드가 쉽게 생성되는 것을 확인했습니다. 예제의 마지막 라인에서는 String 객체의 프로토타입을 출력했는데요, 크롬 브라우저에서 확인해보면 우리가 선언한 newMethod( )라는 새로운 메서드가 당당히 표준 메서드와 같이 위치하고 있는 것을 확인할 수 있습니다. 

 

참, 여기까지 설명하고 노파심에 말씀드리자면 String 객체의 [[Prototype]]은 역시 Object.prototype으로 이어지는 프로토타입 체이닝 구조를 갖고 있습니다. 잊지 않으셨죠?

 

추가로, 여기서 프로토타입 객체의 특성 하나를 다시 짚어볼 수 있습니다. 프로토타입 객체 역시 '객체'의 한 종류이기 때문에, 프로퍼티를 동적으로 추가/삭제하는 것이 가능하다는 점 입니다. 당연한 이야기를 왜 하냐고요? 위의 예제에서는 우리는 이미 선언되어 있는 String 객체의 프로토타입에 메서드를 추가했습니다. 일반적으로 사용자가 선언하는 함수에는 constructor만 있는 상태입니다. 여기에 프로토타입의 메서드를 선언해주면 자유롭게 코드 내에서 사용이 가능하기 때문입니다. 간혹 생성자 함수 등을 선언하는 과정에서 이것을 미리 선언해두지 않으면 컴파일이 완료되어 추가할 수 없지 않을까, 생각하는 분들이 있기 때문에 다시 한번 짚고 넘어가는 내용입니다.