반응형
소프트웨어 디자인 패턴 중에서 Creational Pattern(생성 패턴) 은 객체 생성 과정을 캡슐화하여 유연하고 확장성 있는 코드를 작성할 수 있게 해주는 구조입니다.
자바스크립트는 프로토타입 기반 언어이며, 객체 생성 방식이 다양해 생성 패턴이 더욱 유용하게 사용됩니다.
🧱 Creational Pattern이란?
Creational Pattern은 객체 생성 로직을 코드에서 분리하여 객체를 유연하고 일관되게 생성할 수 있도록 하는 구조적 설계 방식입니다.
자바스크립트에서는 다음과 같은 생성 패턴이 주로 사용됩니다.
대표적인 Creational 패턴 종류
- Constructor Pattern (생성자 패턴)
- Factory Pattern (팩토리 패턴)
- Singleton Pattern (싱글턴 패턴)
- Prototype Pattern (프로토타입 패턴)
- Builder Pattern (빌더 패턴)
⚙️ 패턴별 설명 및 예시
1. Constructor Pattern
function User(name, role) {
this.name = name;
this.role = role;
}
const admin = new User("Alice", "admin");
장점
- 객체 생성 구문이 직관적이다.
- new 키워드를 사용하여 클래스처럼 사용 가능하다.
단점
- 상속이 복잡할 수 있다.
- 잘못된 this 바인딩 문제가 발생할 수 있다.
2. Factory Pattern
function createUser(name, role) {
return {
name,
role,
introduce() {
return `Hi, I'm ${name}, a ${role}`;
}
};
}
const user = createUser("Bob", "editor");
장점
- 객체 생성 로직을 재사용 가능
- 서브타입을 쉽게 반환할 수 있다
단점
- 생성자 함수보다 구조가 복잡해질 수 있음
3. Singleton Pattern
const Singleton = (function () {
let instance;
function createInstance() {
return { value: Math.random() };
}
return {
getInstance: function () {
if (!instance) {
instance = createInstance();
}
return instance;
}
};
})();
장점
- 애플리케이션 전체에서 동일한 인스턴스를 공유할 수 있음
단점
- 테스트 및 모킹(mocking)이 어려움
- 전역 상태로 인한 사이드 이펙트 발생 가능
4. Prototype Pattern
const Animal = {
type: "unknown",
speak() {
console.log(`This is a ${this.type}`);
}
};
const dog = Object.create(Animal);
dog.type = "dog";
dog.speak(); // This is a dog
장점
- 객체 간 공유 가능한 메서드를 구현하기 좋음
- 메모리 효율적
단점
- 상속 계층이 깊어지면 관리가 어려워짐
5. Builder Pattern
class CarBuilder {
constructor() {
this.car = {};
}
setEngine(engine) {
this.car.engine = engine;
return this;
}
setWheels(wheels) {
this.car.wheels = wheels;
return this;
}
build() {
return this.car;
}
}
const car = new CarBuilder().setEngine("V8").setWheels(4).build();
장점
- 단계별 설정이 가능해 복잡한 객체 생성에 적합
- 메서드 체이닝으로 가독성이 높음
단점
- 간단한 객체에는 과한 구조일 수 있음
✅ 결론
자바스크립트에서 Creational Pattern을 잘 활용하면 객체 생성과 관련된 중복 코드를 줄이고, 코드 유지보수성과 확장성을 크게 높일 수 있습니다.
특히 협업 개발에서 일관된 객체 구조를 유지하는 데 큰 도움이 됩니다.
반응형
'Programing > javascript' 카테고리의 다른 글
자바스크립트 Factory Pattern (0) | 2025.04.19 |
---|---|
자바스크립트 Constructor Pattern (0) | 2025.04.19 |
자바스크립트의 Behavioral 패턴: 객체 간의 소통을 설계하다 (0) | 2025.04.19 |
자바스크립트의 Structural 패턴: 객체 구조의 유연함을 설계하다 (0) | 2025.04.19 |
💻 숫자를 한글 숫자 표기로 변환 (1) | 2025.04.18 |
💰 숫자를 한글로 금액 단위로 표현 (0) | 2025.04.18 |
📷 JavaScript로 이미지 리사이징 후 PHP로 업로드하는 방법 (1) | 2025.04.16 |
🎂 자바스크립트로 나이 계산하는 3가지 방법 (0) | 2025.04.16 |