자바스크립트에서 객체를 생성하고 상태를 유지하는 방법은 여러 가지가 있습니다. 이 중에서 생성자 함수를 활용하는 방법을 소개하겠습니다. 생성자 함수는 새로운 객체를 생성하고 초기 상태를 설정하는 역할을 합니다.

생성자 함수란?

생성자 함수는 new 키워드와 함께 호출하여 새로운 객체를 생성하는 함수입니다. 일반 함수와 비슷한 구조를 가지고 있지만, 일반 함수와 구분하기 위해 함수 이름의 첫 글자를 대문자로 작성합니다.

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

위의 예시 코드에서 Person은 생성자 함수로서, name과 age라는 매개변수를 받고, this 키워드를 통해 새로운 객체의 프로퍼티로 설정합니다. 이렇게 생성된 객체는 new 키워드와 함께 호출되어 생성하게 됩니다.

생성자 함수로 객체 생성하기

const person1 = new Person('John', 25);
const person2 = new Person('Jane', 30);

위의 코드는 Person 생성자 함수를 사용하여 person1과 person2라는 두 개의 객체를 생성한 예시입니다. 각 객체는 name과 age라는 프로퍼티를 갖고 있으며, 값은 생성자 함수 호출 시 전달한 인자에 따라 설정됩니다.

상태 유지하기

생성자 함수를 활용하면 객체의 상태를 유지할 수 있습니다. 이를 통해 동일한 구조의 여러 객체를 생성하고, 각 객체의 상태를 독립적으로 유지할 수 있게 됩니다.

function Counter() {
  this.count = 0;
  
  this.increment = function() {
    this.count++;
  };

  this.decrement = function() {
    this.count--;
  };
}

위의 예시 코드는 Counter라는 생성자 함수로 객체를 생성하는 예시입니다. count라는 프로퍼티와 increment, decrement라는 메소드를 갖고 있습니다.

const counter1 = new Counter();
const counter2 = new Counter();

counter1.increment(); // counter1.count = 1
counter1.increment(); // counter1.count = 2

counter2.increment(); // counter2.count = 1

counter1.decrement(); // counter1.count = 1
counter2.decrement(); // counter2.count = -1

위의 코드는 Counter 생성자 함수를 사용하여 counter1과 counter2라는 두 개의 객체를 생성한 후, 각 객체의 increment 메소드를 호출하는 예시입니다. 각 객체는 독립적으로 count 프로퍼티를 유지하며, 메소드를 통해 상태를 변경할 수 있습니다.

결론

자바스크립트에서 생성자 함수를 활용하면 객체를 생성하고 상태를 유지할 수 있습니다. 생성자 함수를 사용하면 동일한 구조의 객체를 생성하고 각각의 상태를 독립적으로 유지하며 동작시킬 수 있습니다.

#JavaScript #Object #생성자함수