생성자 함수

자바스크립트에서 생성자 함수는 new 키워드와 함께 호출되어 객체를 생성하고 초기화하는 특별한 함수이다.

일반 함수와 달리, 생성자 함수는 객체 생성을 목적으로 하며, this 키워드를 사용하여 새로 생성될 객체의 속성과 메서드를 정의한다.

 

즉 방을 꾸미려고 할 때  미리 어떤 위치에는 의자가 놓이고, 어떤 위치에는 책상이 높이고, 어떤 위치에는 침대가 놓이고 하는 것들을 미리 정해두는 것이다.

function FurnitureLayout(chair, table, bed) {
  this.chair = chair; // 의자
  this.table = table; // 테이블
  this.bed = bed;     // 침대
  };

여기서 new 키워드로 생성자 함수를 호출하고 매개변수를 할당하는 것은 해당 매개변수를 사용해서 실제로 꾸민 방을 나타낸다. 즉 각각의 속성의 값으로 A모양의 의자를 놓고, B 모양의 책상을 놓은 상태이다.

const room1 = new FurnitureLayout("의자A", "테이블C", "침대B");

실제 만들어진 객체는 다음과 같다.

이것을 객체 인스턴스(Object Instance)라고 부른다.

객체 인스턴스란 클래스(또는 생성자 함수)를 통해 생성된 실제 객체를 의미한다.

{
  chair: "의자A",
  table: "테이블C",
  bed: "침대B"
};

 

그런데 우리가 객체를 만들때엔 코드에 직접 입력해서 만들 수도 있다. 그 경우에 값 자체를 입력했다고 해서 리터럴 객체라고 부른다. 참조 주소만 다를뿐 실제로 형태나 값이 동일하다.

const room1 = {
  chair: "의자A",
  table: "테이블C",
  bed: "침대B"
};

 

그런데 생성자 함수는 보통 내부 함수와 함께 사용된다.

function FurnitureLayout(chair, table, bed) {
  this.chair = chair; // 의자
  this.table = table; // 테이블
  this.bed = bed;     // 침대

  this.showLayout = function() {
    console.log("의자: " + this.chair + ", 테이블: " + this.table + ", 침대: " + this.bed);
  };
}

const myRoom = new FurnitureLayout("의자A", "테이블C", "침대B");

myRoom.showLayout(); // 추가: showLayout 메소드 호출

내부에 showLayout이라는 함수가 추가 됐다.

  this.showLayout = function() {
    console.log("의자: " + this.chair + ", 테이블: " + this.table + ", 침대: " + this.bed);
  };

때문에 const myRoom = new FurnitureLayout("의자A", "테이블C", "침대B");라는 코드는

매개 변수를 생성자 함수에 전달하여 새로운 객체 인스턴스를 생성하고, 생성된 객체 인스턴스의 참조를 myRoom 변수에 할당하는 코드이다. 이 과정에서 myRoom이라는 변수는 객체인스턴스 + 내부 함수로 이루어진 메모리를 참조하게 된다.

 

만약 여기서 myRoom.chair을 사용한다면, myRoom 객체의 chair 속성에 저장된 값이 반환된다.

값만 반환되는 것이기 때문에 실질적으로 값을 보려면 console.log 등의 메서드를 사용해야한다.

 

하지만 myRoom.showLayout(); 형태의 코드를 입력하면 내부의 showLayout(); 함수를 반환하여 실행시킨다.

이 경우엔 값이 아니라 함수를 반환하는 것이기 때문에 함수를 실행시키게 된다.

앞서 말했듯이 myRoom은 이미 매개변수를 전달 받아 만들어진 객체 인스턴스 + 내부 함수로 이루어진 메모리를 참조하고 있는 변수이기 때문에 객체 인스턴스의 값이 그대로 전달된 내부함수(showLayout)을 실행하게 된다.

 

myRoom.showLayout() : 이런 형태로 사용되는것이 우리가 메서드라고 부르는 것들이다.

그런데 이런 메서드는 내부 함수를 1개만 가질 필요는 없다. showLayout() 외에도 다양한 함수를 내부 속성으로 만든다면

myRoom.a1(), myRoom.callname() 식으로 사용 가능한 것이다.

 

생성자 함수의 특징

1. new 키워드와 함께 호출: 생성자 함수는 반드시 new 키워드와 함께 호출되어야 한다. new 키워드는 다음과 같은 작업을 수행한다.
   • 새로운 빈 객체를 생성한다.
   • this를 새로 생성된 객체에 바인딩한다.
   • 생성자 함수 내부의 코드를 실행한다.
   • 새로 생성된 객체를 반환한다.
2. this 키워드: 생성자 함수 내부에서 this는 새로 생성될 객체를 가리킨다. this를 사용하여 객체의 속성과 메서드를 정의하고 초기화할 수 있다.
3. 암시적 반환: 생성자 함수는 명시적인 return 문이 없어도 자동으로 새로 생성된 객체를 반환한다. 만약 명시적으로 객체를 반환하면 그 객체가 반환되고, 원시 타입 값을 반환하면 무시된다.
4. 함수 이름: 생성자 함수는 일반적으로 첫 글자를 대문자로 시작하는 이름을 사용한다. 이는 생성자 함수임을 나타내는 관례이다.

생성자 함수의 예시

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function() {
        console.log("안녕하세요, 제 이름은 " + this.name + "입니다.");
    };
}

const person1 = new Person("홍길동", 30);
const person2 = new Person("임꺽정", 25);

console.log(person1.name); // 출력: 홍길동
person2.sayHello(); // 출력: 안녕하세요, 제 이름은 임꺽정입니다.

생성자 함수의 역할

• 객체 생성 및 초기화: 생성자 함수를 사용하여 여러 개의 유사한 객체를 효율적으로 생성하고 초기화할 수 있다.
• 객체 속성 및 메서드 정의: 생성자 함수 내부에서 this를 사용하여 객체의 속성과 메서드를 정의할 수 있다.
• 코드 재사용성 향상: 객체 생성 코드를 재사용 가능한 형태로 캡슐화하여 코드의 중복을 줄이고 유지 보수를 용이하게 한다.