생성자 함수

인프런 강의 자바스크립트 중급 - 코딩앙마 를 듣고 정리한 내용입니다.

아래처럼 객체를 만드는 것을 객체 리터럴이라고 합니다.

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

비슷한 객체를 여러개 만들 때는 생성자 함수를 사용하면 좋습니다. 보통 첫글자를 대문자로 하고 함수를 실행할 때 new 를 붙입니다.

 function User(name, age){
   	// this = {} - 이 동작이 보이지 않는 것
	this.name = name;
	this.age = age;
    // return this; - 이 동작이 보이지 않는 것
}
let user1 = new User('Mike', 30);  // {name: 'Mike', age: 30}
let user2 = new User('Jane', 22);  // {name: 'Jane', age: 22}
let user3 = new User('Tom', 17);  // {name: 'Tom', age: 17}

value 에 함수를 넣는다면, 아래와 같이 동작합니다.

function User(name, age){
	this.name = name;
	this.age = age;
	this.sayName = function(){
		console.log(this.name);
	}
}
let user5 = new User('Tom', 18);  
user5.sayName(); // 'Tom' 

상품 이름과 가격을 등록하고 불러오는 예시입니다.

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('과자', 1000);

console.log(item1, item2); // 객체 불러서 확인
item1.showPrice(); // 가격은 1000원 입니다.

비슷한 객체를 여러개 만들 때 생성자 함수가 유용합니다. 객체에 대한 개념을 잡고 있어야 이후 프로토타입, 상속, 클래스에 대해 학습할 수 있습니다.