자바스크립트 프로토타입에 메서드 추가하기 – 생성자 함수 활용 완벽 가이드

자바스크립트에서 프로토타입(prototype)은 동일한 생성자 함수로 만든 여러 객체가 속성과 메서드를 효율적으로 공유할 수 있게 해주는 핵심 메커니즘입니다. 생성자 함수 내부에 메서드를 직접 정의하면 객체마다 메서드가 별도로 생성되지만, 프로토타입에 메서드를 추가하면 모든 인스턴스가 하나의 메서드를 공유하여 메모리를 절약할 수 있습니다.

예제 코드

다음은 자바스크립트 프로토타입에 메서드를 추가하는 방법을 보여주는 전체 예제입니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 20px;
      font-weight: 500;
      color: blueviolet;
   }
</style>
</head>
<body>
<h1>Adding methods to Javascript Prototypes</h1>
<div class="result"></div>
<br />
<button class="Btn">Click Here</button>
<h3>Click on the above button to call the methods of person1 and person2 object</h3>
<script>
   let resEle = document.querySelector(".result");
   let BtnEle = document.querySelector(".Btn");
   function personConstructor(fName, lName, birthYear) {
      this.fName = fName;
      this.lName = lName;
      this.birthYear = birthYear;
   }
   personConstructor.prototype.welcome = function () {
      return "Welcome " + this.fName + " " + this.lName;
   };
   personConstructor.prototype.calcAge = function () {
      return "Your age = " + (new Date().getFullYear() - this.birthYear);
   };
   let person1 = new personConstructor("Rohan", "Sharma", 1995);
   let person2 = new personConstructor("Shawn", "Smith", 1992);
   BtnEle.addEventListener("click", () => {
      resEle.innerHTML = "person1.welcome() = " + person1.welcome() + "<br>";
      resEle.innerHTML += "person1.calcAge() = " + person1.calcAge() + "<br>";
      resEle.innerHTML += "person2.welcome() = " + person2.welcome() + "<br>";
      resEle.innerHTML += "person2.calcAge() = " + person2.calcAge() + "<br>";
   });
</script>
</body>
</html>

코드 설명

personConstructor 함수 – 이름(fName), 성(lName), 출생 연도(birthYear)를 매개변수로 받아 this 키워드로 객체 속성을 초기화하는 생성자 함수입니다.
welcome 메서드 – personConstructor.prototype에 추가된 메서드로, 객체의 이름과 성을 조합하여 'Welcome Rohan Sharma' 형태의 환영 인사를 반환합니다.
calcAge 메서드 – 현재 연도(new Date().getFullYear())에서 출생 연도를 뺀 값을 계산하여 나이를 반환합니다.
인스턴스 생성 및 출력 – new 키워드로 person1과 person2 객체를 만들고, 버튼 클릭 이벤트 발생 시 각 객체의 welcome()과 calcAge() 메서드 호출 결과를 result 영역에 출력합니다.

실행 결과

위 코드를 실행하면 초기 화면은 다음과 같습니다.

자바스크립트 프로토타입에 메서드 추가하기 – 생성자 함수 활용 완벽 가이드

'Click Here' 버튼을 클릭하면 아래 그림처럼 person1과 person2 객체의 메서드 실행 결과가 화면에 표시됩니다.

자바스크립트 프로토타입에 메서드 추가하기 – 생성자 함수 활용 완벽 가이드

정리

이처럼 prototype 속성을 활용하면 생성자 함수로 생성한 모든 객체가 동일한 메서드를 공유할 수 있습니다. 이는 코드 재사용성을 높이고 메모리 사용을 최적화하는 자바스크립트의 대표적인 패턴이므로, ES6 클래스 문법을 학습하기 전에 반드시 익혀두는 것이 좋습니다.