자바스크립트 공부하기 - 사용자 생성자 함수, 생성자 객체

 

이름부터 생소한 생성자 함수와 객체..

조금 쉽게 이해하기 위해, 아래에 비유를 먼저 정리해보았다.

---

 

사용자 생성자 함수(custom constructor function) <-> 빌트인 생성자 함수 (built-in constructor)

✔ 빌트인 생성자: 기본 제공되는 생성자 (Number(), String(), Array() 등)
✔ 사용자 정의 생성자 함수: 개발자가 직접 만드는 생성자 (function Person() {})

즉, "반대말"이라고 할 수 있지만, 둘 다 객체를 생성하는 방법 중 하나야! 😆

---

생성자 함수는 상자 만드는 공장에 비유할 수 있어요.

비유:

• 상자 만드는 공장: 생성자 함수
• 상자: 생성된 객체
• 공장에서 만들 수 있는 상자는 여러 가지 종류가 있을 수 있고, 공장은 그 상자들을 정해진 규칙에 따라 만들어요.

 

예를 들어, "강아지" 생성자 함수를 만들면, 이 함수를 사용해서 "멍멍이", "해피", "코코" 같은 여러 강아지 객체를 쉽게 만들 수 있어요.

 

 

예시:

만약 자동차를 만드는 공장이 있다고 생각해 봅시다. 🚙

🏭공장에서는 여러 대의 자동차를 만들어낼 수 있고, 각 자동차는 색상, 모델, 연도와 같은 속성들을 가질 수 있어요.

공장은 자동차를 만들 때마다 이 속성들을 채워넣는 작업을 하죠.

 

코드 예시:

function 자동차(색상, 모델, 연도) {
  this.색상 = 색상;
  this.모델 = 모델;
  this.연도 = 연도;
  this.달리다 = function() {
    console.log('차가 달리고 있어요!');
  };
}

let 내차 = new 자동차('파란색', 'K5', 2022);
let 네차 = new 자동차('검은색', '아반떼', 2021);

console.log(내차);  // 내차는 파란색 K5 2022 모델 자동차

• **자동차**는 생성자 함수, 즉 상자 만드는 공장. 🏭
• new 자동차('파란색', 'K5', 2022)는 공장에서 새로운 자동차(상자)를 만든 것.🚙
• 생성자 함수는 자동차(상자)가 가질 속성들(색상, 모델, 연도)을 정의하고, new 키워드를 통해 새로운 객체를 만들 수 있어요.

이렇게 생성자 함수는 객체를 생산하는 공장 역할을 하고, 같은 타입의 여러 객체를 효율적으로 만들 수 있게 해줘요.

 

---

 

 

 

비유를 보니 다소 이해는 되었지만..생성자 함수라는 개념이 너무 생소해서, 단어의 뜻부터 다시 본다...

 

---

생성자 함수의 뜻을 분석해봐요.

custom constructor function

 

👉 "새로운 객체를 만들어주는 함수"

말 그대로 **"무언가를 생성하는 역할을 하는 함수"**야.

자바스크립트에서는 new 키워드를 붙여서 사용자가 직접 새로운 객체를 만들어가는 함수라고 보면 돼.

 

🎯 이름 뜻을 풀어보면?

생성자(生成者) = "무언가를 만들어 내는 사람(것)"

함수(Function) = "어떤 기능을 가진 코드 덩어리"

 

즉, "새로운 객체를 만들어주는 역할을 하는 함수" 라고 생각하면 돼! 🙌

 

📌 왜 "사용자가 만들어간다"는 느낌이 드는 걸까? 🤔

생성자 함수는 사용자가 원하는 데이터를 넣어서 새로운 객체를 만들 수 있게 해줘.

자바스크립트에서 기본으로 제공하지 않는 데이터 유형을 직접 만들 수 있어 !

 

📌 비슷한 개념 예시

💡 예를 들어 **컵 공장(생성자 함수)**이 있다고 해보자!

Cup(color, size)라는 생성자 함수가 있다고 하면,

사용자가 new Cup("빨강", "대") 또는 new Cup("파랑", "소") 이런 식으로 새로운 컵을 만들 수 있어!

👀 즉, 사용자가 원하는 속성을 넣어 직접 만들어가는 느낌이 맞아!

 

 

생성자 객체를 쉽게 생각해봐요.

 

자바스크립트 객체의 속성과 메서드를 아주 쉽게 설명해 드릴게요.

1. 속성 (Property): 객체의 특징 (정보)

• 속성은 객체가 가진 정보나 특징을 나타냅니다.
• 마치 사람의 이름, 나이, 키와 같은 정보라고 생각하면 됩니다.
• 예를 들어, "강아지" 객체가 있다면, "이름", "색깔", "나이" 등이 속성이 될 수 있습니다.
• 이 속성들은 객체 안에 저장된 값으로, 객체의 상태를 나타냅니다.

2. 메서드 (Method): 객체의 행동 (기능)

• 메서드는 객체가 할 수 있는 행동이나 기능을 나타냅니다.
• 마치 사람이 걷거나 말하는 행동과 같다고 생각하면 됩니다.
• 예를 들어, "강아지" 객체가 있다면, "짖다", "달리다", "먹다" 등이 메서드가 될 수 있습니다.
• 메서드는 객체 안에 정의된 함수로, 객체의 동작을 수행합니다.

3. 쉬운 비유:

• 사람 객체:
  • 속성: 이름, 나이, 키, 몸무게
  • 메서드: 걷다, 뛰다, 말하다, 먹다
• 자동차 객체:
  • 속성: 색깔, 모델, 제조사, 속도
  • 메서드: 가속하다, 정지하다, 방향을 바꾸다, 경적을 울리다
• 4. 자바스크립트 코드 예시:

let dog = {
  name: "멍멍이", // 속성
  color: "갈색", // 속성
  bark: function() { // 메서드
    console.log("멍멍!");
  }
};

console.log(dog.name); // 출력: 멍멍이
dog.bark(); // 출력: 멍멍!

• 위 코드에서 dog는 객체이고, name과 color는 속성, bark는 메서드입니다.

즉, 속성은 객체의 정보를 나타내고, 메서드는 객체의 행동을 나타낸다고 생각하면 됩니다.

---

 

 

 

조금은 이해 되는 것 같아, 이론을 다시 공부해본다.

 

 

---

📌 생성자 함수란?

자바스크립트에서 객체(오브젝트)를 쉽게 만들기 위한 함수야.

보통 객체를 만들 때 이렇게 만들 수 있어:

 

예제 📌

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function () {
    console.log(`안녕! 나는 ${this.name}이야.`);
  };
}

// 새로운 객체(사람) 만들기
const person1 = new Person("지현", 25);
const person2 = new Person("철수", 30);

console.log(person1.name); // 지현
console.log(person2.age);  // 30

person1.sayHello(); // 안녕! 나는 지현이야.

 

핵심 정리 🎯

1. function Person(name, age) {} → 생성자 함수(설계도)
2. this.name = name; → 각 객체가 가진 속성
3. new Person("지현", 25); → new를 사용해 새로운 객체 만들기
4. 같은 형식의 객체를 여러 개 만들 수 있음!

📌 생성자 함수 핵심 포인트

• this: 새로 만들어진 객체를 가리킴.
• new: 생성자 함수로부터 새로운 객체를 만듦.
• 첫 글자 대문자: 관례적으로 생성자 함수는 대문자로 시작.

---

📌 생성자 함수 문법

 

자바스크립트에서 생성자 함수는 객체를 만들기 위한 함수야.

우리가 직접 정의하는 함수라서, 새로운 객체를 만들 때 필요한 속성과 기능을 정의할 수 있어.

생성자 함수는 “객체를 이렇게 만들겠습니다.”에 대한 정의일 뿐이며, 실제 객체가 생성 되기 위해서는 new 연산을 통해 객체를 반환해야 한다.

1. 기본 문법

function 생성자함수명(매개변수1, 매개변수2, ...) {
  // 객체의 속성 정의
  this.속성1 = 매개변수1;
  this.속성2 = 매개변수2;
  
  // 객체의 기능(메서드) 정의
  this.메서드 = function() {
    // 메서드 내용
  };
}

 

생성자 함수는 일반 함수와 비슷하게 생겼지만, 이름은 보통 대문자로 시작

함수 안에서는 this라는 특별한 단어를 사용해서 객체의 특징(정보)을 정의

new라는 특별한 단어를 사용해서 생성자 함수로 객체를 만들어요.

 

예시

function Dog() {
this.name = “구름이”
this.breed = “비숑”
}

//Dog 객체를 생성하고, myDog 이라는 이름을 붙이겠다.
const myDog = new Dog();

 

 

 

---

 

Q:  date는 기본적으로 자바스크립트에서 제공하는 기능인데 이걸 왜 생성자라고 부르냐고 !

 

A : 자바스크립트에서 Date는 기본적으로 제공되는 내장 객체이지만, 이도 사실 생성자 함수의 역할을 해. 왜냐면 new Date()와 같이 new 키워드를 사용해서 새로운 객체를 만들 수 있기 때문이야.

생성자 함수라는 말은 **"객체를 생성하는 함수"**라는 의미로, Date처럼 자바스크립트에서 기본적으로 제공되는 객체도 new를 통해 새로운 객체를 만들 수 있기 때문에 생성자 함수라고 불리는 거야.

다만, Date는 특별히 날짜와 시간과 관련된 작업을 쉽게 처리할 수 있도록 내장되어 있는 거고, 우리가 만든 사용자 정의 생성자 함수들과 같은 원리로 동작하는 거지!