자바스크립트에서 생성자 함수는 객체를 생성하기 위해 사용되는 특별한 함수입니다. 이 생성자 함수를 통해 객체를 만들고, 해당 객체에 동적으로 프로퍼티와 메서드를 추가할 수 있습니다. 이번 블로그 포스트에서는 자바스크립트 생성자 함수를 활용하여 동적으로 프로퍼티와 메서드를 추가하는 방법에 대해 알아보겠습니다.

생성자 함수와 인스턴스 생성하기

먼저, 생성자 함수를 정의하고 인스턴스를 생성하는 방법을 알아보겠습니다. 아래는 자바스크립트에서 생성자 함수를 정의하는 예시입니다.

function Person(name, age) {
  this.name = name;
  this.age = age;
}

위 코드에서 Person 함수는 생성자 함수로써 name과 age라는 매개변수를 받아 this로 지정된 객체의 프로퍼티에 값을 할당합니다.

이후에는 new 키워드를 사용하여 해당 생성자 함수를 호출하여 인스턴스를 생성할 수 있습니다.

const john = new Person('John', 25);

위 코드에서 john은 Person 생성자 함수를 통해 만들어진 인스턴스입니다.

동적으로 프로퍼티 추가하기

이제 생성된 인스턴스에 동적으로 프로퍼티를 추가하는 방법을 알아보겠습니다. 자바스크립트에서는 생성자 함수의 프로토타입 객체를 활용하여 인스턴스들이 공유하는 프로퍼티와 메서드를 정의할 수 있습니다.

Person.prototype.greet = function() {
  return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
};

위 코드에서 greet 함수는 Person 생성자 함수의 프로토타입 객체에 추가되는 동적인 메서드입니다. 이제 인스턴스들은 greet 메서드를 호출할 수 있습니다.

console.log(john.greet()); // Hello, my name is John and I am 25 years old.

위 코드에서 john 인스턴스의 greet 메서드를 호출하여 해당 메시지를 출력할 수 있습니다.

동적으로 메서드 추가하기

마찬가지로, 생성자 함수의 프로토타입 객체에 동적으로 메서드를 추가할 수도 있습니다. 아래는 Person 생성자 함수의 프로토타입 객체에 getBirthYear 메서드를 추가하는 예시입니다.

Person.prototype.getBirthYear = function() {
  const currentYear = new Date().getFullYear();
  return currentYear - this.age;
};

위 코드에서 getBirthYear 함수는 현재 연도를 구하고, 이를 이용하여 인스턴스의 나이를 통해 태어난 연도를 계산합니다.

console.log(john.getBirthYear()); // 1996

위 코드에서 john 인스턴스의 getBirthYear 메서드를 호출하여 해당 태어난 연도를 출력할 수 있습니다.

결론

자바스크립트 생성자 함수를 사용하여 객체를 만들 때, 동적으로 프로퍼티와 메서드를 추가하는 것은 매우 유용합니다. 이를 통해 객체들의 동작을 확장하고 유연한 프로그래밍을 할 수 있습니다. 위에서 알아본 방법으로 생성자 함수의 프로토타입을 활용하여 동적으로 프로퍼티와 메서드를 추가해 보세요!

#JavaScript #생성자함수 #프로퍼티추가 #메서드추가