생성자 함수란?

kimminjunnn·2025년 4월 29일

JavaScript

CS

목록 보기

15/34

생성자 함수가 뭔가요?

생성자 함수란, 새로운 객체(인스턴스)를 생성하고 초기화하기 위해 사용하는 특별한 함수를 말한다.

일반 함수처럼 생겼지만, new 키워드를 붙여 호출하면 동작 방식이 달라진다.
보통 함수 이름은 대문자로 시작한다.
내부에서 this를 사용해 새로 생성되는 객체에 속성과 메서드를 정의한다.

-> 객체를 찍어내는 '틀'이다.

function Animal(type, sound) {
  this.type = type;
  this.sound = sound;
}

const dog = new Animal("개", "멍멍");
const cat = new Animal("고양이", "야옹");

console.log(dog.type); // "개"
console.log(cat.sound); // "야옹"

알면 좋을 디테일들

생성자 함수가 객체(인스턴스)를 생성하는 과정

new 키워드를 붙였을 때 함수 내부에서 벌어지는 과정은 다음 4단계와 같다.

빈 객체를 만들어 this에 할당한다.
2.함수 본문을 실행한다.
this에 새로운 프로퍼티를 추가해 this를 수정한다.
암묵적으로 this를 반환한다,

예시를 보자

function User(name) {
  // this = {};  (빈 객체가 암시적으로 만들어짐)

  // 새로운 프로퍼티를 this에 추가함
  this.name = name;
  this.isAdmin = false;

  // return this;  (this가 암시적으로 반환됨)
}

new User("보라")이외에도 new User("호진"), new User("지민") 등을 이용하면 손쉽게 사용자 객체를 만들 수 있다.
객체 리터럴 문법으로 일일이 객체를 만드는 방법보다 훨씬 간단하고 읽기 쉽게 객체를 만들 수 있게 된다.

생성자의 의의는 바로 여기에 있다. 재사용할 수 있는 객체 생성 코드를 구현하는 것이다.

return문이 암묵적으로 생긴다고 했는데 만약 임의로 붙여준다면?

위에서 본 것처럼 생성자 함수엔 보통 return 문이 없다. 반환해야 할 것들은 모두 this에 저장되고, this는 자동으로 반환되기 때문이다.

그런데 만약 return 문이 있다면 어떻게 될까?
아래와 같은 규칙이 적용된다.

객체를 return 한다면 this 대신 객체가 반환된다.
ex)

function BigUser() {

  this.name = "원숭이";

  return { name: "고릴라" };  // <-- this가 아닌 새로운 객체를 반환함
}

console.log( new BigUser().name );  // 고릴라

원시형을 return 하거나, 그냥 return 을 적으면 return문이 무시된다.
ex)

function SmallUser() {

  this.name = "원숭이";

  return 10; // <-- return문 무시하고 this를 반환함
  return; // <-- return문 무시하고 this를 반환함
  
}

console.log( new SmallUser().name );  // 원숭이

하지만 걱정마시라 보통의 생성자 함수에는 return 문이 없다!

객체 리터럴로 만들 때와는 무슨 차이가 있죠? 왜 생성자 함수를 사용하나요?

객체 리터럴과의 차이점

객체 리터럴이란?

객체 리터럴이란, 중괄호 {}를 사용하여 직접 객체를 생성하고 속성(key)과 값(value)을 한 번에 정의하는 방법을 말한다.

const user = {
  name: "민준",
  age: 25,
  greet: function () {
    console.log("안녕하세요!");
  }
};

구분	객체 리터럴 `{}`	생성자 함수 `new + 함수`
작성 방식	중괄호 `{}` 안에 직접 속성과 값을 작성한다.	함수를 정의하고 `new` 키워드로 호출한다.
객체 생성 방법	객체를 하나하나 직접 만든다.	함수 호출을 통해 객체를 찍어낸다.
코드 재사용	비슷한 객체를 만들려면 매번 복사해서 작성해야 한다.	함수를 통해 같은 구조의 객체를 쉽게 여러 개 만들 수 있다.
확장성	객체가 늘어날수록 코드가 길어지고 복잡해진다.	생성자 함수 하나만 있으면 많은 객체를 효율적으로 생성할 수 있다.
프로토타입 사용 가능 여부	직접 작성한 객체마다 별도로 메서드를 추가해야 한다.	프로토타입을 활용해 메서드를 공유할 수 있다.

prototype이란?
prototype이란,
모든 자바스크립트 객체가 가지고 있는 숨겨진 참조 링크(속성)로,
공통되는 속성이나 메서드를 공유하기 위해 사용된다.

쉽게 말하면
객체끼리 공통으로 사용할 기능을 prototype에 올려놓고
각 객체들은 그걸 공유해서 쓰는 구조다.

예시

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log(`안녕하세요, ${this.name}입니다.`);
};

const MJ = new Person("민준");
MJ.sayHello(); // "안녕하세요, 민준입니다."