생성자 함수

Hi, There!
안녕하세요, 바오밥입니다.

---

목차

1. 개요
2. 본문
3. Reference

---

개요

자바스크립트의 생성자 함수에 대해서 정리하였습니다.

---

본문

생성자 함수 (Constructor Functions)

객체 리터럴

자바스크립트는 객체 리터럴을 통하여 객체를 생성합니다.

// user 객체 생성
let user = {
  name: "mike",
  age: 30
}

**console.log(user) // 객체 데이터 출력**

 

생성자 함수

개발을 하다보면 객체를 여러 번 생성해야 하는 경우가 있습니다.

이때, 매번 객체 리터럴을 통해 생성하는 것보다 생성자 함수를 이용하는 것이 더 효과적입니다.

상기된 객체 리터럴 구조를 생성자 함수로 정의한 후 new 키워드로 생성하면 다음과 같습니다.

• 생성자 함수를 선언 시 함수명은 PascalCase 를 사용해야 합니다.
• new 키워드를 이용하여 함수를 호출하면 함수에 맨 상단에 this 객체가 생성되고 맨 하단에서 this 객체를 반환합니다.

function User(name, age) {
    // this = {}
  this.name = name;
  this.age = age;
    // return this;
}

// user1 객체 생성
**let user1 = new User("mike", 30)**

**console.log(user1) // 객체 데이터 출력**

 

생성자 함수 안에 별도의 메서드를 선언하여 사용할 수 있습니다.

function User(name, age) {
  this.name = name;
  this.age = age;
  **this.sayName = () => {
    console.log(this.name);
  }**
}

let user1 = new User("mike",30)

**user1.sayName() // mike**

 

생성자 함수 호출 시에 new 키워드를 사용하지 않으면 this 객체가 생성되지 않기 때문에 undefined가 반환됩니다.

function User(name, age) {
  this.name = name;
  this.age = age;
}

// new 키워드를 사용하지 않고 생성자 함수 호출
**let user1 = User("mike",30)**

**console.log(user1) // undefined** 

 

 

---

Reference

• https://youtu.be/8hrSkOihmBI