자바스크립트 생성자 함수 – 쉬운 설명과 예제

생성자 함수 이해하기

생성자 함수(Constructor Function)란
새로운 객체를 생성하는 틀 역할을 하는 함수를 말합니다.
간단히 '생성자'라고도 부르며, 이 함수는 생성된 객체에게 공통적인 속성과 메서드를 제공한다는 점에서 일반 함수와는 달리 특별한 종류의 함수입니다.

쉽게 말해, 객체를 찍어내는 도장이라고 생각하면 됩니다.
이 함수를 사용하여 동일한 구조를 가진 객체를 여러 개 만들 수 있습니다.

'생성자 함수'는 간단하게 '생성자'라고도 부릅니다.

'생성자 함수'는 좀 더 정확한 표현으로, 함수의 종류임을 명확히 나타내는 용어입니다.
'생성자'는 더 간결하고 일반적으로 사용되는 약칭입니다.

두 용어 모두 같은 의미로 사용되며, 어떤 용어를 사용하더라도 생성자 함수의 개념을 정확하게 나타낼 수 있습니다.

왜 생성자 함수를 사용할까요?

객체의 반복 생성: 동일한 형태의 객체를 여러 개 만들 때 매우 유용합니다.
코드의 재사용성: 한 번 정의된 생성자 함수를 통해 다양한 객체를 생성할 수 있어 코드를 효율적으로 관리할 수 있습니다.
객체 지향 프로그래밍의 기반: 자바스크립트에서 객체 지향 프로그래밍을 구현하는 데 필수적인 요소입니다.

생성자 함수의 구조와 사용법

생성자 함수와 일반 함수에서 구문적인 차이는 없습니다.
일반 함수와 비슷하게 보이지만, 몇 가지 중요한 차이점이 있습니다.

관례상 생성자 함수의 이름은 일반적으로 대문자로 시작하여 일반 함수와 구분합니다.
생성자 함수는 항상 new 연산자와 함께 호출되어야 합니다.

간단한 예시

JavaScript

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

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

위 예시에서 Person은 생성자 함수이며, new 연산자를 사용하여 person1과 person2라는 두 개의 객체를 생성했습니다. 각 객체는 name과 age라는 속성(property)을 가지고 있습니다.

`new` 연산자

new는 생성자 함수를 사용하여 새로운 객체(일명 '인스턴스' 객체)를 생성할 때 반드시 붙여서 실행해야 하는 연산자입니다. new 연산자의 역할은 다음과 같습니다.

생성자 함수 호출: new 연산자 뒤에 생성자 함수를 작성하여 해당 함수를 호출합니다.
객체 생성: 호출된 생성자 함수 내에서 this 키워드를 사용하여 새로운 객체의 속성을 초기화하고, 생성된 객체를 반환합니다.

생성자 함수 내에서 `this`

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

위 예시에 주석을 추가하여 설명하겠습니다.

JavaScript

/* 생성자 함수 선언 */
function Person(name, age) {
    // this는 생성된 새로운 객체를 가리킵니다.
    this.name = name;  // 새로운 객체의 name 속성을 초기화합니다.
    this.age = age;    // 새로운 객체의 age 속성을 초기화합니다.
}
  
/* Person 생성자 함수를 사용하여 새로운 객체 생성 */
const person1 = new Person("둘리", 15); // person1 객체 생성
console.log(person1.name); // "둘리" (person1의 name 속성)
console.log(person1.age);  // 15 (person1의 age 속성)

const person2 = new Person("마이콜", 28); // person2 객체 생성
console.log(person2.name); // "마이콜" (person2의 name 속성)
console.log(person2.age);  // 28 (person2의 age 속성)

/* 설명:
 - 생성자 함수 내에서 `this` 키워드는 생성된 새로운 객체를 가리킵니다.
 - 예를 들어, `person1` 객체가 생성될 때 `this.name`은 `person1.name`을, `this.age`는 `person1.age`를 의미합니다.
 - 마찬가지로, `person2` 객체가 생성될 때 `this.name`과 `this.age`는 각각 `person2` 객체의 속성을 의미합니다.
 - 이처럼 생성자 함수는 `this`를 사용하여 각 객체의 속성과 메서드를 고유하게 초기화합니다.
*/

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

자바스크립트에서 함수는 크게 두 가지 종류로 나눌 수 있습니다. 바로 생성자 함수와 일반 함수입니다. 둘 다 함수라는 공통점을 가지고 있지만, 사용 목적과 동작 방식에 있어서 큰 차이가 있습니다.

생성자 함수와 일반 함수의 차이점은 자바스크립트에서 매우 중요하며, 이 두 가지는 객체를 다루는 방식에서 큰 차이가 있습니다. 주요 차이점을 몇 가지로 정리해보면 다음과 같습니다.

사용 목적

생성자 함수와 일반 함수의 차이점: 사용 목적
생성자 함수	새로운 객체를 생성하기 위한 목적으로 사용됩니다. `new` 연산자와 함께 사용하여 객체의 인스턴스를 생성합니다.
일반 함수	특정 작업을 수행하거나 값을 반환하는 등의 기능을 수행합니다.

`this` 키워드의 의미

생성자 함수와 일반 함수의 차이점: this 키워드의 의미
생성자 함수	`new` 연산자와 함께 호출될 때, `this`는 생성되는 새로운 객체를 가리킵니다. 즉, 생성자 함수 내에서 `this`를 통해 객체의 프로퍼티를 설정할 수 있습니다.
일반 함수	`this`의 값은 호출되는 환경에 따라 달라집니다. 글로벌 객체, 객체 메서드 내부, 이벤트 핸들러 등 호출되는 위치에 따라 `this`가 가리키는 대상이 다릅니다.

JavaScript

/* 생성자 함수 */

// 생성자 함수 정의
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

////////////////

/* 일반 함수 */

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

// 일반 함수 호출 - 전역 객체를 가리킵니다 (브라우저에서는 window)
showThis(); // 전역 객체 (브라우저에서는 window)

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

// 객체의 메서드 호출 - this는 해당 객체를 가리킵니다.
obj.showThis(); // obj 객체

반환 값

생성자 함수와 일반 함수의 차이점: 반환 값
생성자 함수	명시적으로 값을 반환하지 않더라도, `new` 연산자와 함께 호출되면 생성된 객체를 자동으로 반환합니다.
일반 함수	함수 내에서 `return` 문을 통해 특정 값을 반환할 수 있습니다. 반환하지 않으면 `undefined`가 반환됩니다.

호출 방식

생성자 함수와 일반 함수의 차이점: 호출 방식
생성자 함수	`new` 연산자와 함께 호출해야 합니다.
일반 함수	`new` 연산자 없이 직접 호출하거나, 다른 객체의 메서드로 호출할 수 있습니다.

자바스크립트의 내장 생성자 함수 개요

지금까지 생성자 함수의 개념에 대해 살펴보았습니다.
개발자가 직접 생성자 함수를 생성하는 것을 '사용자 정의 생성자 함수'라고 합니다.

한편, 자바스크립트에는 여러 '내장 생성자 함수'가 제공되어 있으며, 이를 통해 다양한 객체를 쉽게 생성할 수 있습니다. 내장 생성자 함수는 기본적으로 제공되는 도구로, 자바스크립트의 기본 객체와 자료형을 다루는 데 매우 유용합니다. 또한, 이를 활용하면 복잡한 객체 구조를 간편하게 생성하고, 다양한 데이터 타입을 효율적으로 처리할 수 있습니다.

아래는 자바스크립트에서 자주 사용되는 주요 내장 생성자 함수들의 개요입니다.

`Object()`

자바스크립트에서 모든 객체의 기반이 되는 객체를 생성합니다.

`Array()`

자바스크립트에서 배열을 생성합니다.

`String()`

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

`Number()`

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

`Boolean()`

부울(boolean) 객체를 생성하여 참(true) 또는 거짓(false) 값을 나타냅니다.

`Function()`

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

`Date()`

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

`RegExp()`

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

`Error()`

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

`Promise()`

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

JavaScript

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

`URL()`

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

JavaScript

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"

참고문헌

같이 보기

자바스크립트 프로토타입 상속 – 객체 지향 프로그래밍을 이해하는 새로운 방법

생성자 함수 이해하기

왜 생성자 함수를 사용할까요?

생성자 함수의 구조와 사용법

간단한 예시

new 연산자

생성자 함수 내에서 this

관련 용어

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

사용 목적

this 키워드의 의미

반환 값

호출 방식

자바스크립트의 내장 생성자 함수 개요

Object()

Array()

String()

Number()

Boolean()

Function()

Date()

RegExp()

Error()

Promise()

URL()

참고문헌

같이 보기

`new` 연산자

생성자 함수 내에서 `this`

`this` 키워드의 의미

`Object()`

`Array()`

`String()`

`Number()`

`Boolean()`

`Function()`

`Date()`

`RegExp()`

`Error()`

`Promise()`

`URL()`