JavaScript 디자인 패턴 예시들

책 <자바스크립트 + 리액트 디자인 패턴> (한빛미디어)를 읽고 19개의 패턴의 간단한 정의와 예시들을 정리해본다.

사진: Unsplash 의 Hardingferrent

생성 패턴

객체를 생성하는 방법을 다루는 패턴

 

생성자 패턴

*ES6의 class 문법을 사용

 

객체 지향 프로그래밍을 위한 문법적 설탕(syntactic sugar)으로, constructor 메서드를 통해 객체 초기화를 수행하고 new 키워드를 사용하여 인스턴스를 생성하는 구조이다. class 내부에서 속성과 메서드를 정의하며, 상속 및 캡슐화 같은 OOP 개념도 자연스럽게 표현할 수 있다.

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

const person1 = new Person('John', 30);
person1.sayHello(); // Hello, my name is John and I am 30 years old.

const person2 = new Person('Jane', 25);
person2.sayHello(); // Hello, my name is Jane and I am 25 years old.

 

장점

• 코드 재사용성 up
• 캡슐화 용이