[JavaScript] 생성자 함수 (new 연산자, 인스턴스) 쉽게 이해해보기

 

   목차 

1. "생성자 함수"란?
2. "인스턴스"란?
3. 생성자 함수의 내부 작동 원리 (알고리즘)
4. 붕어빵 비유로 이해해보기
5. 생성자 함수를 사용했을 때 이점

 

 

생성자 함수에 대해서 알아보자!

 

 

 

---

 

 

 

 1. "생성자 함수"란? 

 

* 생성자 함수: 객체 인스턴스를 만들고 초기화하는 함수

* 초기화:  해당 객체의 상태나 속성을 초기값으로 설정하는 것

생성자 함수는 일반 함수와 유사하지만, 일반 함수와 달리 보통 첫 글자를 대문자로 시작하여 이름을 지정하며, "new" 키워드와 함께 호출된다. 

 

 

 예시 1)  this에 프로퍼티 정의하기 

// 생성자 함수 (User) 정의
function User(name, age) {  // name과 age라는 두 개의 매개변수를 받아서 객체의 프로퍼티로 설정함
  this.name = name;
  this.age = age;
}

// "new" 키워드를 사용하여 생성자 함수 호출 및 객체 인스턴스 생성
let user1 = new User("혜인", 28 );
let user2 = new User("영도", 29);

// 생성된 객체 인스턴스 사용
alert(user1.name); // "혜인"
alert(user2.age); // 29

 

 

 예시 2) this에 메서드 정의하기 

// 생성자 함수 (User) 정의
function User(name) {
  this.name = name;  
  this.sayHi = function() {  // 메서드를 정의 할 수도 있다.
    alert( "제 이름은 " + this.name + "입니다." );
  };
}

// "new" 키워드를 사용하여 생성자 함수 호출 및 객체 인스턴스 생성
let bora = new User("이보라");

bora.sayHi(); // 제 이름은 이보라입니다.

/*
bora = {
   name: "이보라",
   sayHi: function() { ... }
}
*/

 

생성자 함수 내부에서는 this 키워드를 사용하여 생성된 객체에 프로퍼티를 할당하거나 메서드를 정의할 수 있다.

생성자 함수를 통해 생성된 객체는 해당 생성자 함수의 프로토타입 체인에 묶여있어 생성자 함수의 프로토타입에 정의된 메서드를 상속받을 수 있다.

 

 

---

 

 

 2. "인스턴스"란? 

 

"인스턴스"는 간단하게 말하면 "객체의 복사본"으로 생각할 수 있다.
특정 객체를 생성하여 해당 객체의 속성과 메서드를 사용할 수 있도록 하는 것이다.

 

객체는 속성(프로퍼티)과 동작(메서드)을 가지고 있는 데이터 구조이다. 이 객체를 생성하기 위해 생성자 함수를 사용하고, 이렇게 생성된 객체는 해당 생성자 함수에 정의된 속성과 메서드를 가지게 된다.

예를 들어, User 생성자 함수를 사용하여 user1과 user2라는 두 개의 객체 인스턴스를 생성했다.
이 객체 인스턴스들은 각각 name과 age라는 속성을 가지고 있다.
생성자 함수를 통해 객체 인스턴스를 생성할 때마다 각 인스턴스는 서로 다른 값을 가질 수 있다.

객체 인스턴스를 사용하면 코드를 보다 모듈화하고 유지보수하기 쉽게 만들 수 있다는 장점이 있다. 

 

 

---

 

 

 3. 생성자 함수의 내부 작동 원리 (알고리즘) 

 

1) new User(...)를 써서 함수를 실행한다.

2) 빈객체를 만들어 this에 할당한다. 

3) 생성자 함수 본문을 실행한다.

4) this에 새로운 프로퍼티를 추가해 this를 수정한다. 

5) this를 return한다. 

 

// (3) 함수 본문이 실행된다.
function User(name) {
// this = {};   // (2) 빈 객체가 암시적으로 만들어지고, 이것을 this에 할당한다.

   this.name = name;  // (4) 새로운 프로퍼티를 this에 추가해서 수정한다. 
}

  // return this;  // (5) this가 암시적으로 반환된다.

let user = new User("보라");  // (1) 생성자 함수를 실행한다.

alert(user.name); // 보라  // (6) 객체 인스턴스를 사용한다.

 

new User("보라") 이외에도 new User("호진"), new User("지민") 등을 이용하면 손쉽게 사용자 객체를 만들 수 있다.
객체 리터럴 문법으로 일일이 객체를 만드는 방법보다 훨씬 간단하고 읽기 쉽게 객체를 만들 수 있게 된 것이다.

 

 

---

 

 

 4. 붕어빵 비유로 이해해보기 

 

(그냥 내가 이해 좀 쉽게 해보려고 생각해냄ㅎㅎ;)

생성자 함수는 "붕어빵"이다. "붕어빵틀" 정도로 생각하면 좋다. 
손님의 주문이 들어오면(=생성자함수를 실행하면), 해당 맛(flavor)을 반영해서 붕어빵 복제품(=인스턴스)을 만들어준다.

 

function 붕어빵(flavor) {
// this = {};   // (2) 

   this.flavor = flavor; // (3) 
}

  // return this;  // (4)

let 손님1 = new 붕어빵("팥맛");  // (1) 
let 손님2 = new 붕어빵("슈크림맛") 

alert(손님1.flavor); // 팥맛  // (5)
alert(손님2.flavor); // 슈크림맛

 

1) 손님1: "new 붕어빵 만들어주세요! 팥맛으로요!" = 생성자함수(붕어빵틀) 실행시켜주세요! = 객체 인스턴스(붕어빵 복제품) 생성해주세요!

2) 붕어빵을 만들기 위해서 빈 붕어빵틀을 하나 지정한다. = 빈 객체 만들기 { }

3) 붕어빵 틀에 팥맛을 추가한다. = this에 새로운 프로퍼티를 추가해 this를 수정하기

4) 다 만들어진 팥맛 붕어빵(붕어빵 복제품)을 빼낸다. = this를 return한다. 

5) "손님1님, 팥맛 붕어빵 나왔습니다~!"  = 객체 인스턴스(붕어빵 복제품)을 사용한다. 

 

 

---

 

 

 5. 생성자 함수를 사용했을 때 이점 

 

1) 객체의 일관된 생성 및 초기화: 생성자 함수를 사용하면 일관된 방식으로 객체를 생성하고 초기화할 수 있다. 이는 코드의 가독성과 유지보수성을 향상시킨다.

2) 프로토타입 상속: 생성자 함수를 사용하면 프로토타입 체인을 통해 객체 간에 속성과 메서드를 상속할 수 있다. 이를 통해 코드의 재사용성을 높이고 메모리 사용을 최적화할 수 있다.

3) 코드의 모듈화: 생성자 함수를 사용하면 관련된 속성과 메서드를 함께 그룹화하여 객체로 만들 수 있다. 이를 통해 코드를 모듈화하고 재사용 가능한 컴포넌트로 나눌 수 있다.

4) 객체 식별: 생성자 함수를 사용하면 객체를 식별할 수 있다. 특정 생성자 함수를 통해 생성된 객체는 해당 생성자 함수의 인스턴스임을 알 수 있으므로, 객체의 종류를 식별하고 객체를 다루는 방법을 구분할 수 있다.

5) 편리한 객체 생성: 생성자 함수를 사용하면 객체를 생성하는 과정을 단순화할 수 있습니다. 인스턴스를 생성하는 코드를 반복하지 않고도 간편하게 객체를 생성할 수 있습니다.