생성자 함수란 무엇일까?

오늘은 생성자 함수에 대해 이야기해볼 거야. 이름만 들으면 조금 어렵게 느껴질 수도 있지만, 사실은 아주 간단한 개념이야. 자, 시작해볼까?

---

동물 병원 이야기

먼저, 동물 병원을 예로 들어볼게. 동물 병원에서는 많은 동물들이 진료를 받지. 예를 들어, 강아지 '뽀삐'와 '무지', 그리고 고양이 '곰'이가 있다고 해보자. 이 동물들의 정보를 저장하려면 이렇게 작성할 수 있어.

let animal1 = {
    animalName : "뽀삐", // 이름 
    animalType : "강아지", // 종
    animalAge : 10, // 나이 
    animalGender : "male", // 성별
    lastVisit: '2020-10-21', // 마지막 방문일
    getLastMedical : function(){ // 마지막 진료 기록 
        return this.animalName + "는 건강합니다.";
    }
};

let animal2 = {
    animalName : "무지", // 이름 
    animalType : "강아지", // 종
    animalAge : 12, // 나이 
    animalGender : "female", // 성별
    lastVisit: '2020-10-11', // 마지막 방문일
    getLastMedical : function(){ // 마지막 진료 기록 
        return this.animalName + "는 건강합니다.";
    }
};

let animal3 = {
    animalName : "곰", // 이름 
    animalType : "고양이", // 종
    animalAge : 8, // 나이 
    animalGender : "male", // 성별
    lastVisit: '2020-10-14', // 마지막 방문일
    getLastMedical : function(){ // 마지막 진료 기록 
        return this.animalName + "는 3달 후 재방문 해야합니다.";
    }
};

이렇게 하면 동물 한 마리 한 마리마다 객체를 만들어줘야 해. 만약 병원에 100마리의 동물이 있다면, 100번 이 작업을 반복해야겠지? 이건 너무 비효율적이야.

---

생성자 함수의 등장!

이 문제를 해결해주는 게 바로 생성자 함수야! 생성자 함수는 비슷한 형태의 객체를 쉽게 만들 수 있도록 도와줘.

function MakeAnimalObject() {
  this.animalName = "곰";
  this.animalType = "고양이";
  this.animalAge = 8;
  this.animalGender = "male";
  this.lastVisit = "2020-10-14";
  this.getLastMedical = function() {
    return this.animalName + "는 3달 후 재방문 해야합니다.";
  }
}

이렇게 함수를 만들어 놓고, new라는 키워드를 사용해서 객체를 만들 수 있어.

let animal1 = new MakeAnimalObject();
console.log(animal1);

위 코드를 실행하면 animal1이라는 객체가 만들어져! 이제 이렇게 객체를 만드는 건 훨씬 쉬워졌지?

---

조금 더 유연하게 만들기

근데 모든 동물이 '곰'일 수는 없잖아? 그래서 생성자 함수에 매개변수를 넣어주는 거야.

function MakeAnimalObj(animalName, animalType, animalAge, animalGender, lastVisit) {
  this.animalName = animalName;
  this.animalType = animalType;
  this.animalAge = animalAge;
  this.animalGender = animalGender;
  this.lastVisit = lastVisit;
  this.getLastMedical = function () {
    return this.animalName + "는 3달 후 재방문 해야합니다.";
  };
}

let animal1 = new MakeAnimalObj('곰', '고양이', 8, 'male', '2021-07-09');
console.log(animal1);

let animal2 = new MakeAnimalObj('나리', '고양이', 12, 'female', '2021-07-09');
console.log(animal2);

이렇게 하면 다양한 동물들을 쉽게 만들 수 있어! 예를 들어, 곰이와 나리라는 두 고양이를 만들었지? 이젠 몇 마리의 동물이 있든지 쉽게 객체를 만들 수 있어.

그런데 갑자기 'this'라니...!?

"this"란 무엇일까?

"this"는 생성자 함수 안에서 객체 자신을 가리키는 특별한 키워드야. 예를 들어, 우리가 새로운 동물 객체를 만들 때 "this"는 그 객체를 가리키게 돼.

이해를 돕기 위해 예를 들어볼게.

function MakeAnimalObj(animalName, animalType, animalAge, animalGender, lastVisit) {
  this.animalName = animalName;
  this.animalType = animalType;
  this.animalAge = animalAge;
  this.animalGender = animalGender;
  this.lastVisit = lastVisit;
  this.getLastMedical = function () {
    return this.animalName + "는 3달 후 재방문 해야합니다.";
  };
}

let animal1 = new MakeAnimalObj('곰', '고양이', 8, 'male', '2021-07-09');

이 코드를 실행하면 다음과 같이 변하게 돼.

1. new MakeAnimalObj('곰', '고양이', 8, 'male', '2021-07-09')를 호출하면, 자바스크립트는 새로운 빈 객체를 만들고, this를 그 빈 객체로 설정해.
2. 그 다음, MakeAnimalObj 함수 안의 코드가 실행돼. 이 때 this.animalName = animalName; 이런 코드들이 실행되면서 새로운 객체의 속성들이 설정돼. 즉, this.animalName은 새로 만들어진 객체의 animalName 속성을 의미해.
3. 마지막으로 함수가 끝나면 그 새로운 객체가 반환돼.

 

비유를 들어볼까?

이해를 돕기 위해 비유를 하나 들어볼게. 만약 우리가 동물 병원에서 일하는 직원이라고 생각해보자. 새로운 동물 환자가 오면 그 동물의 정보를 종이에 적어야 해.

• this.animalName = animalName; 이 부분은 "이 종이의 동물 이름은 무엇이다"라고 적는 것과 같아.
• 종이 하나 하나가 새로운 객체야. 그리고 this는 지금 우리가 정보를 적고 있는 종이를 가리키지.

즉, this는 지금 작성 중인 그 특정 객체를 가리키기 때문에, 우리는 생성자 함수 안에서 this를 사용해 객체의 속성들을 설정할 수 있는 거야.

---

어때? 생성자 함수 덕분에 비슷한 객체를 쉽게 만들 수 있게 되었지? 다음번에 동물 병원을 만들 때는 꼭 생성자 함수를 사용해보자! 궁금한 점이 있으면 언제든지 물어봐!