JavaScript에서 이미 정의된 객체에 새로운 속성(property)이나 메서드(method)를 추가하려면 prototype 프로퍼티를 사용합니다. prototype은 특정 생성자 함수로부터 생성된 모든 객체가 공유할 수 있는 속성과 메서드를 정의할 때 매우 유용한 기능입니다.
prototype 프로퍼티란?
JavaScript의 모든 함수는 내부적으로 prototype이라는 프로퍼티를 가지고 있습니다. 이 prototype에 속성이나 메서드를 추가하면, 해당 생성자 함수로 만들어진 모든 인스턴스가 이를 상속받아 사용할 수 있습니다. 즉, 객체를 하나씩 수정하지 않고도 여러 객체에 공통 기능을 한 번에 부여할 수 있는 효율적인 방식입니다.
예제 코드
아래 예제를 직접 실행해 보면 prototype을 활용해 객체에 속성을 추가하는 과정을 쉽게 이해할 수 있습니다.
<html>
<head>
<title>JavaScript prototype property</title>
<script>
function book(title, author) {
this.title = title;
this.author = author;
}
</script>
</head>
<body>
<script>
var myBook = new book("Amit", "Java");
book.prototype.price = null;
myBook.price = 500;
document.write("Book title is : " + myBook.title + "<br>");
document.write("Book author is : " + myBook.author + "<br>");
document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>코드 설명
위 예제의 동작 순서는 다음과 같습니다.
1. 생성자 함수 정의: book 함수는 title과 author 두 개의 속성을 가진 객체를 생성합니다.
2. prototype으로 속성 추가: book.prototype.price = null; 구문을 통해 book 객체의 원형(prototype)에 price 속성을 미리 선언합니다.
3. 인스턴스에 값 할당: myBook.price = 500;처럼 개별 인스턴스에 실제 값을 지정합니다.
실행 결과
Book title is : Amit
Book author is : Java
Book price is : 500
참고 사항
prototype은 주로 여러 객체가 공통으로 사용할 속성이나 메서드를 정의할 때 활용됩니다. 최신 JavaScript(ES6 이상)에서는 class 문법을 사용해 더욱 직관적으로 동일한 작업을 수행할 수 있지만, prototype의 동작 원리를 이해하면 JavaScript의 상속 구조와 객체 지향 프로그래밍을 훨씬 깊이 있게 파악할 수 있습니다.