생성자 함수

JavaScript의 생성자 함수에 대해 알아보자.

생성자 함수(Constructor Function)?

새로운 객체를 생성하는 틀 역할을 하는 함수를 말한다.
간단하게 '생성자'라고 부르기도 하며, 생성된 객체에게 공통 속성과 메서드를 제공한다.

생성자 함수란, 객체를 찍어내는 도장!

생성자 함수 사용 이유

그렇다면 생성자 함수를 사용하는 이유는 무엇일까?

개발을 하다보면 동일한 형태의 객체를 여러개 만들어야 하는 순간이 온다.

예를 들어, 인스타그램의 게시물을 하나의 객체라고 치자.
여러개의 게시물을 만들기 위해서는 똑같은 모양의 게시물 객체를 여러개 만들어야 한다.

이러한 순간에 생성자 함수를 사용하게 된다면 공통된 코드를 반복해서 작성해야 하는 번거로움을 줄여주며, 순수 코드의 길이도 줄일 수 있다.
또한, 하나의 기능을 수정할 때 여러번의 반복 수정이 없이 생성자 함수 하나만 수정하면 모든 객체에 반영이 된다.

생성자 함수의 구조

생성자 함수의 구조는 일반 함수와 크게 다르지 않다.
다만, 관례상 생성자 함수의 이름은 대문자로 시작하며, new 연산자와 함께 호출된다.

/* 생성자 함수 선언 */
function Person(name, age) {
    this.name = name;
    this.age = age;
}
  
/* Person 생성자 함수를 사용하여 새로운 객체 생성 */
const person1 = new Person("hong", 15); // person1 객체 생성
console.log(person1.name); // "hong"
console.log(person1.age); // 15

const person2 = new Person("gang", 28); // person2 객체 생성
console.log(person2.name); // "gang"
console.log(person2.age); // 28

new 연산자

new 연산자 뒤에 생성자 함수를 작성하여 해당 함수를 호출한다.
이때 생성되는 객체를 인스턴스 객체라고 한다.
호출된 생성자 함수 내에서 this 키워드를 사용하여 새로운 객체의 속성을 초기화하고, 생성된 객체를 반환할 수 있다.

/* 생성자 함수 선언 */
function Person(name, age) {
    this.name = name;
    this.age = age;
}
  
/* Person 생성자 함수를 사용하여 새로운 객체 생성 */
const person1 = new Person("hong", 15);
const person2 = new Person("gang", 28);

생성자 함수 내에서 this

생성자 함수 내에서 this 키워드는 생성된 새로운 객체를 가리킨다.
this 키워드를 사용하여 객체의 속성과 메서드를 초기화한다.

/* 생성자 함수 선언 */
function Person(name, age) {
    this.name = name;
    this.age = age;
}

return

생성자 함수는 반환해야 할 내용은 대부분 this에 저장이 되고 자동으로 반환되므로 보통 return문을 사용하지 않는다.

만약 생성자 함수 내에서 return문을 사용한다면 어떻게 될까?

객체를 return하게 된다면 this 대신 입력한 객체가 반환된다.

function User() {
  this.name = "hong";

  return { name: "gang" };  // <-- this가 아닌 새로운 객체를 반환함
}
alert( new User().name );  // gang

만약 원시형을 return한다면 return문은 무시되고 this가 그대로 반환된다.

function User() {
  this.name = "hong";

  return; // <-- this를 반환함
}
alert( new User().name );  // hong

메서드

생성자 함수를 사용하면 매개변수를 이용해 객체 내부를 자유롭게 구성할 수 있다.
또한 생성자 함수 내에 메서드를 더할 수 있다.

function User(name) {
  this.name = name;
  this.sayHi = function() {
    alert( "제 이름은 " + this.name + "입니다." );
  };
}

let user1 = new User("hong");

user1.sayHi(); // 제 이름은 hong입니다.

위와 같이 작성하면 프로퍼티 name과 메서드 sayHi를 가진 객체를 만들 수 있다.

new function(){}

재사용할 필요가 없지만 복잡한 객체를 만들어야 하는 경우 익명 생성자 함수로 작성할 수 있다.

let user = new function() {
  this.name = "hong";
  this.age = 29;

  ...
};

처음 단 한 번만 호출할 목적으로 만들어진 익명함수이기 때문에 함수 자체는 어디에도 저장이 되지 않는다.
위와 같이 익명 생성자 함수를 사용하는 경우 재사용은 막고 코드를 캡슐화 할 수 있다.

생성자 함수와 일반 함수의 차이점

일반 함수

기능

특정 작업을 수행하거나 값을 반환하는 등의 기능 수행.

this

this의 값은 글로벌 객체, 객체 메서드 내부, 이벤트 핸들러 등 호출되는 위치에 따라 this가 가리키는 대상이 다름.

// 일반 함수 정의
function showThis() {
	console.log(this);  // this는 호출되는 환경에 따라 다름
}

// 일반 함수 호출 - 글로벌 객체 (브라우저에서는 window)
showThis(); // 글로벌 객체 (브라우저에서는 window)

// 객체를 생성하고 메서드 정의
const obj = {
	name: "Bob",
	showThis: showThis // 객체의 메서드로서 일반 함수 참조
};

// 객체의 메서드 호출 - this는 해당 객체
obj.showThis(); // obj 객체

반환값

함수 내에서 return 문을 통해 특정 값을 반환할 수 있으며, 반환하지 않으면 undefined가 반환.

호출 방식

new 연산자 없이 직접 호출하거나, 다른 객체의 메서드로 호출

생성자 함수

기능

새로운 객체를 생성하기 위한 목적.
new 연산자와 함께 사용하여 객체 인스턴스를 생성.

this

this는 new 연산자와 함께 호출될 때 생성되는 새로운 객체를 가리킴.
생성자 함수 내에서 this 키워드를 통해 프로퍼티 설정 가능.

// 생성자 함수 정의
function Person(name, age) {
    this.name = name;  // this는 새로 생성된 객체를 가리킴.
    this.age = age;
}
  
// Person 생성자 함수를 사용하여 새로운 객체 생성
const person1 = new Person("홍길동", 30);
console.log(person1.name); // "홍길동" - this를 통해 객체의 속성에 접근
console.log(person1.age);  // 30

반환값

명시적으로 값을 반환하지 않더라도, new 연산자와 함께 호출되면 생성된 객체를 자동으로 반환.

호출 방법

new 연산자와 함께 호출.

JavaScript 내장 생성자 함수

자바스크립트에는 여러 '내장 생성자 함수'가 제공되어 있어, 이를 통해 다양한 객체를 쉽게 생성할 수 있다.

Object()

모든 객체의 기반이 되는 객체를 생성한다.

const obj = new Object(); 
obj.name = "홍길동";
console.log(obj); // {name: '홍길동'}

Array()

배열을 생성한다.

const arr = new Array(1, 2, 3); 
console.log(arr); // [1, 2, 3]

String()

문자열 객체를 생성하며, 문자열 데이터를 다루기 위한 다양한 메서드를 제공한다.

const str = new String("Hello");
console.log(str); // "Hello"

Number()

숫자형 객체를 생성하는 함수로, 숫자 데이터를 객체로 취급할 수 있다.

const num = new Number(123);
console.log(num); // 123

Boolean()

불린(boolean) 객체를 생성하여 참(true) 또는 거짓(false) 값을 나타낸다.

const bool = new Boolean(true);
console.log(bool); // true

Function()

새로운 함수를 동적으로 생성할 때 사용한다.

const sum = new Function("a", "b", "return a + b");
console.log(sum(2, 3)); // 5

Date()

날짜 및 시간을 다루는 객체를 생성한다.

const date = new Date();
console.log(date); // 현재 날짜와 시간 출력

RegExp()

정규 표현식 객체를 생성하여 문자열 패턴 매칭을 수행한다.

const regex = new RegExp("\\d+", "g"); 
const result = "123abc".match(regex); 
console.log(result); // ['123']

Error()

오류 객체를 생성하며, 예외 처리 시 사용한다.

const error = new Error("뭔가 오류가 있어요.");
console.log(error.message); // "뭔가 오류가 있어요."

Promise()

비동기 작업의 성공 또는 실패를 처리하는 객체를 생성한다.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Done!"), 1000);
});
promise.then(result => console.log(result)); // 1초 후 "Done!" 출력

URL()

URL 객체를 생성하여 URL을 다루는 기능을 제공한다.

const url = new URL("https://example.com/path?name=John&age=30");

// URL의 프로토콜, 호스트, 경로 등을 접근할 수 있습니다.
console.log(url.protocol); // "https:"
console.log(url.host);     // "example.com"
console.log(url.pathname); // "/path"
console.log(url.search);   // "?name=John&age=30"

// URL 검색 매개변수 수정
url.searchParams.set("name", "Doe");
console.log(url.href); // "https://example.com/path?name=Doe&age=30"

참고

mdn 객체로 작업하기
mdn new 연산자
new 연산자와 생성자 함수
생성자 함수 – 개념과 일반 함수와의 차이점