JS 중급 | 생성자 함수

🚀 오늘의 학습 목표

• 생성자 함수 이해
  
  

2. 생성자 함수

객체 리터럴

let user = {
  name : 'mike',
  age : 30,
}

개발을 하다 보면 비슷한 객체를 여러개 만들어야 할 때가 있다. (ex. 회원 정보, 상품 등)
그럴 때 쓸 수 있는 것이 생성자 함수 이다.
생성자 함수는 첫 글자는 대문자 로 해서 함수를 만든다.

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

let user1 = new User('mike', 30);
let user2 = new User('jane', 22);
let user3 = new User('Tom', 17);

new 연산자를 사용해서 호출한다.
쉽게 비슷한 객체 3개를 만들 수 있다.

어떻게 동작하는지 살펴 보자.
new 함수명을 실행하면 아래와 같이 동작한다.

function User (name, age){
  // this = {} 
  //  (1) 빈 객체를 만들고 this 에 할당
  
  
  this.name = name; 
  this.age = age;
  // (2) 함수를 실행하면서 this 에 프로퍼티들을 추가
  
  // return this; 
  // (3) this 를 반환
}

new 함수명();

실제 this = {} 와 return this; 는 코드에 없다.
new 를 실행하는 순간 저 방식으로 알고리즘이 동작한다.
이렇게 객체를 만들면 일일이 객체 리터럴을 쓰는 것보다 빠르고 일관성 있게 만들 수 있다.

2-1. 생성자 함수에 메서드 추가

function User (name, age){
  
  this.name = name;
  this.age = age;
  this.sayName = function () {
    console.log(this.name);
  				// 여기에서 this 는 user5 이다.
  }
}

let user5 = new User('han', 40);

user5.sayName(); // "han"
// user5 의 sayName 은 console.log(this.name) 이므로 user5 의 name 인 "han" 이 출력된다.

---

🧑🏻‍💻 예제를 통해 쉽게 이해하기

생성자 함수 : 상품 객체를 생성해 보자.

function Item(title, price){
  this.title = title;
  this.price = price;
  this.showPrice = function(){
    console.log(`가격은 ${price}원 입니다.`);
  }
}

const item1 = new Item('인형', 9000);
const item2 = new Item('기차', 5000);
const item3 = new Item('팽이', 3000);
const item4 = new Item('색종이', 4000);

console.log(item1, item2, item3);
/*
Object { title: "인형", price: 9000, showPrice: showPrice()
 }
 
Object { title: "기차", price: 5000, showPrice: showPrice()
 }
 
Object { title: "팽이", price: 3000, showPrice: showPrice() }
*/

item3.showPrice(); // 가격은 3000원 입니다.

만약, new 를 입력하지 않으면 undefined 를 반환한다.