32. [JavaScript] 생성자 함수

객체 리터럴

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

 

개발을 하다 보면 객체를 여러 개 만드는 경우가 발생합니다.(회원, 상품 등등..)

그럴 때 유용하게 사용하는 것이 생성자 함수입니다.

 

1. 생성자 함수는 보통 첫 글자를 대문자로 해서 함수를 만들어 줍니다.

2. new 연산자를 사용해서 함수를 호출해줍니다.

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 함수명으로 함수를 호출하면 아래와 같이 동작합니다.

this = {}라는 빈 객체를 생성하고 this.name, this.age에 각각의 정보를 넣습니다.

그리고 return this로 만든 객체를 반환합니다.

실제로 this={}와 return this는 코드에 없습니다.

new을 붙여 실행하는 순간 아래 알고리즘으로 동작하게 됩니다.

이렇게 객체를 만들면 일일이 객체를 만드는 것보다 빠르고 일관성 있게 객체를 만들어서 사용할 수 있습니다.

어떤 함수라도 new 붙여서 동작하게 되면 위에 알고리즘과 동일하게 동작하게 됩니다.

그래서 생성자 함수는 첫 번째 글자를 대문자로 하는 게 관례입니다.

 

이번에는 메서드를 추가해보겠습니다. 

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

let user5 = new User('Han', 40);
user5.sayName(); // 'Han'

 

 

// 생성자 함수 : 상품 객체를 생성해보자.
function Item(title, price){
  // this = {};
  
  this.title = title;
  this.price = price;
  this.showPrice = function(){
    console.log(`가격은 ${price}원 입니다`);
  }
  
  // return this;
}

const item1 = new Item('인형', 3000);
const item2 = new Item('가방', 4000);
const item3 = new Item('지갑', 5000);

console.log(item1, item2, item3);

 

new 안 붙이고 실행하면 그냥 함수가 실행되면 undefined가 호출됩니다.