[JS ES6] 객체지향1. Object 생성기계인 constructor

이번 강의에서는 constructor(생성자 함수) 를 이용해 객체를 효율적으로 복사하고, 각각 독립적인 객체를 생성하는 방법을 배웁니다.

---

1️⃣ 왜 Constructor를 사용해야 할까요?

• 문제 상황: 학생 출석부나 상품 리스트와 같이 비슷한 형태의 객체를 여러 개 생성할 때

  var 학생1 = { name: 'Kim', age: 15 };
  var 학생2 = { name: 'Park', age: 15 };
  // ... (총 30명)
  

  를 하드코딩 하는 것은 비효율적이며, 나중에 관리하기도 어렵습니다.
  
• 해결책: 생성자 함수를 사용하면 같은 틀(템플릿)을 기반으로 여러 개의 독립적인 객체를 쉽게 생성할 수 있습니다.
  

---

2️⃣ 생성자 함수 (Constructor)의 기본 개념

2.1 기본 구조

function 기계() {
  this.name = 'Kim';
  this.age = 15;
}

• 설명:
  • 기계() 함수는 생성자 함수입니다.
  • 함수 내부의 this는 새로 생성되는 객체(인스턴스) 를 가리킵니다.
  • 즉, this.name = 'Kim'은 새로 생성된 객체의 name 프로퍼티에 'Kim'을 할당합니다.

2.2 객체 생성 방법

var 학생1 = new 기계();
var 학생2 = new 기계();

• 설명:
  • new 키워드를 사용하면 기계() 생성자 함수로부터 새로운 객체를 만들어 반환합니다.
  • 이렇게 만들어진 객체들은 각각 독립적인 값을 갖습니다.

---

3️⃣ 생성자 함수에 메서드 추가하기

3.1 객체 내 메서드 정의

각 객체마다 개별 메서드를 추가할 수 있지만, 생성자 함수에 포함시키면 모든 인스턴스에서 공통으로 사용할 수 있습니다.

예제: 학생 인사 메서드 추가

function 기계() {
  this.name = 'Kim';
  this.age = 15;
  this.sayHi = function() {
    console.log('안녕하세요 ' + this.name + ' 입니다');
  }
}

var 학생1 = new 기계();
var 학생2 = new 기계();

학생1.sayHi(); // 출력: 안녕하세요 Kim 입니다
학생2.sayHi(); // 출력: 안녕하세요 Kim 입니다

• 설명:
  • 생성자 함수 내부에 this.sayHi를 정의하여, 생성되는 모든 객체가 sayHi() 메서드를 갖도록 설계하였습니다.
  • 함수 내부의 this.name은 해당 객체의 name 값을 참조합니다.

---

4️⃣ 생성자 함수에 파라미터 추가하기

4.1 매개변수를 활용하여 동적인 객체 생성

객체마다 다른 값을 부여하기 위해 생성자 함수에 파라미터를 추가할 수 있습니다.

예제: 학생 객체에 서로 다른 이름 부여하기

function 기계(이름) {
  this.name = 이름;
  this.age = 15;
  this.sayHi = function() {
    console.log('안녕하세요 ' + this.name + ' 입니다');
  }
}

var 학생1 = new 기계('Park');
var 학생2 = new 기계('Kim');

학생1.sayHi(); // 출력: 안녕하세요 Park 입니다
학생2.sayHi(); // 출력: 안녕하세요 Kim 입니다

• 설명:
  • 기계(이름) 생성자 함수는 전달받은 이름을 객체의 name 프로퍼티에 할당합니다.
  • 이렇게 함으로써 각각의 학생 객체가 고유의 이름을 가지게 됩니다.
  • 필요하다면 age도 파라미터로 받아 동적으로 처리할 수 있습니다.

---

5️⃣ 실습 문제: 상품 데이터 생성자 만들기

문제 상황

• 쇼핑몰에 사용할 상품 데이터를 객체로 여러 개 생성해야 합니다.
• 예)

  var product1 = { name: 'shirts', price: 50000 };
  var product2 = { name: 'pants', price: 60000 };
  

• 목표:
  1. 상품 정보를 생성할 수 있는 생성자 함수를 제작
  2. 모든 상품 객체에 부가세(10%)를 계산해 출력하는 부가세() 메서드를 추가

해결 방법

예제 코드:

function Product(상품명, 가격) {
  this.name = 상품명;
  this.price = 가격;
  this.부가세 = function() {
    console.log(this.price * 0.1);
  }
}

var product1 = new Product('shirts', 50000);
var product2 = new Product('pants', 60000);

product1.부가세(); // 출력: 5000
product2.부가세(); // 출력: 6000

• 설명:
  • 생성자 함수 Product는 상품의 name과 price를 받아 각 객체에 저장합니다.
  • 내부 메서드 부가세()는 price의 10%를 계산해 콘솔에 출력합니다.
  • new 키워드를 이용해 product1과 product2 객체를 생성하였으며, 각 객체마다 고유의 데이터와 메서드를 갖습니다.

---

📌 정리

• 생성자 함수(constructor)의 장점:
  • 유사한 형태의 객체들을 효율적으로 여러 개 생성할 수 있음
  • 코드의 중복을 줄이고, 객체 생성 및 관리가 용이해짐
• this 키워드의 역할:
  • 생성자 함수 내부에서 새로 생성되는 객체(인스턴스)를 참조하며, 프로퍼티와 메서드를 정의할 때 사용
• 파라미터 활용:
  • 생성자 함수에 파라미터를 추가하여 각 객체마다 다른 속성 값을 부여할 수 있음