[JavaScript] 생성자 함수

 

아래는 객체 리터럴의 모습이다.

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

 

개발을 하다보면 위와 같이 비슷한 리터럴을 반복해서 사용해야할 때가 있다.

그럴 때 사용하는 것이

생성자 함수이다.

 

 

 

생성자 함수는 아래와 같이 생겼다. 

첫글자는 대문자를 사용한다. 

function User(name, age) {     this.name = name;     this.age = age; } let user1 = new User('Mike', 30); let user2 = new User('Anna', 13); let user3 = new User('Tomas', 26);

name과 age를 인자로 받아서 this에 넣어주었고 new 연산자를 사용해서 User 함수를 호출한다.

 

각각 다른 변수 명으로 User 객체를 세 번 호출하였고, 다른 값을 넣어주었다.

 

이렇게 하면 순식간에 세개의 다른 값을 가진 객체를 만들게 되는 것이다.

 

 

생성자 함수를 쉽게 와플 팬이나 붕어빵 틀이라고 생각하면 된다.

 

같은 형태를 가진 객체이지만 각각 다른 값의 인자들을 가지고 있는 객체를 만들 수 있도록 해주는

객체의 틀이 바로 생성자 함수인 것이다.

 

 

 

이러한 생성자 함수가 어떻게 작동하는지 자세히 살펴보자면 이렇다.

 

 

 

1. 우선 new 생성자로 함수를 호출한다.

    new 함수명 ( ) ;

 

2. 해당 함수를 들어가서 빈 객체를 만들어서 this에 할당한다.

    this = { }

 

3. 함수 본문을 실행하면서 this.에 있는 프로퍼티들 (name, age)을 추가한다.

    this = {name, age}

 

4. 마지막으로 this를 반환한다.

    return this;

 

 

 

실제 코드에는 2번과 4번에 해당하는 코드들은 없지만 함수가 호출되면 1~4번 처럼 작동하며 객체를 생성한다.

 

 

이렇게 객체를 만들면 일일히 객체를 생성해주는 것보다 훨씬 생산적인 것을 알 수 있다.

 

 

 

생성자 함수에 sayName이라는 함수를 추가해서 객체가 자신의 이름을 외치는 함수를 작성하였다.

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

 

 

이렇게 함수를 생성한 후 다시 객체를 만들어서 sayName 함수를 작동하게 한다면 어떻게 될까?

 

 

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

 Jamie라고 자신의 이름을 알려줄 것이다. 

여기서 생성자 함수의 this는 새로 만드는 객체들 각각을 나타낸다.

 

위의 코드로 봤을 때는 user5 을 나타내기 때문에

sayName에서 작동하는 this.name으로 user5의 이름을 console.log에 찍는 것이다.

 

 

 

 

상품에 관련된 생성자 함수를 만들었다

function Item(name, price, totalCount) {     // this = {};     this.name = name;     this.price = price;     this.totalCount = totalCount;     this.showPrice = function() {         console.log(`가격은 ${price}원 입니다.`);     }     // return this; } const item1 = new Item("iphone", 40000, 5);  // Item(name: "iphone" , price : 40000, totalCount : 5 const item2 = Item("apple", 200, 46);  // undefined const item3 = new Item("bag", 8000, 12);  // Item(name: "bag" , price : 8000, totalCount : 12 console.log(item1, item2, item3); item1.showPrice();  // 가격은 40000원 입니다.

위의 코드를 보면 item1과 item3는 생성자 함수에서 설정한 인자 값을 넣어서 그대로 출력해주지만,

item2 같이 new를 사용하지 않는다면 그냥 함수가 실행된다.

 

사실상 위에서 this를 할당하고( this ={ }  ), return this를 해주는 코드는 없기 때문에 함수를 실행해주면 return 값이 없는 채로 undefined로 값이 item2로 들어가게 되는 것이다.

 

 

 

생성자 함수를 사용하려면 반드시 new 연산자를 사용해야 한다는 것을 기억하자!

 

 

 

 

 

 

 

 

*  본 포스팅은 코딩앙마님의 자바스크립트 중급 강좌를 기반으로 작성한 글입니다.