자바스크립트 Flyweight Pattern

Flyweight Pattern(플라이웨이트 패턴) 은 많은 수의 유사 객체들을 메모리 절약을 위해 공유 가능한 객체로 분리하여 사용하는 구조 디자인 패턴입니다. 특히 대규모 객체 생성을 최적화해야 하는 경우 매우 효과적입니다.

---

🧱 Flyweight Pattern이란?

Flyweight Pattern은 객체의 공통 속성은 공유하고, 개별 속성만 외부에서 전달받아 사용하는 방식입니다. 불필요한 객체 생성을 줄이고, 메모리 사용량을 크게 줄일 수 있습니다.

class Shape {
    constructor(color) {
        this.color = color; // 공유 속성
    }
    draw(x, y) {
        console.log(`Draw ${this.color} circle at (${x}, ${y})`);
    }
}

class ShapeFactory {
    constructor() {
        this.shapes = {};
    }
    getShape(color) {
        if (!this.shapes[color]) {
            this.shapes[color] = new Shape(color);
        }
        return this.shapes[color];
    }
}

const factory = new ShapeFactory();

const redCircle1 = factory.getShape("red");
redCircle1.draw(10, 10);

const redCircle2 = factory.getShape("red");
redCircle2.draw(20, 20);

console.log(redCircle1 === redCircle2); // true

---

✅ 장점

1. 메모리 절약: 동일한 객체를 재사용하여 메모리 낭비 감소
2. 객체 수 최소화: 불필요한 인스턴스 생성 방지
3. 성능 향상: 대량의 객체 생성/관리 비용 최소화

---

❌ 단점

1. 복잡한 구조: 팩토리와 외부 상태 관리가 필요함
2. 객체 간 결합도 증가: 외부 속성을 별도로 관리해야 함
3. 직관성 저하: 내부 상태와 외부 상태가 분리되어 이해하기 어려움

---

🛠️ 실전 예시: 글자 렌더링 최적화

class Character {
    constructor(char, font) {
        this.char = char;     // 외부 상태
        this.font = font;     // 공유 상태
    }
    draw(position) {
        console.log(`Render '${this.char}' with font '${this.font}' at ${position}`);
    }
}

class FontFactory {
    constructor() {
        this.fonts = {};
    }
    getFont(fontName) {
        if (!this.fonts[fontName]) {
            this.fonts[fontName] = fontName;
        }
        return this.fonts[fontName];
    }
}

const fontFactory = new FontFactory();

const c1 = new Character("A", fontFactory.getFont("Arial"));
const c2 = new Character("B", fontFactory.getFont("Arial"));
c1.draw(1);
c2.draw(2);

---

🧩 결론

Flyweight Pattern은 많은 객체를 다뤄야 하는 시스템에서 메모리 최적화 및 객체 재사용을 통해 성능을 높이는 데 유리합니다. 특히 반복되는 속성이 많고, 개별 상태가 적은 경우에 적용하면 큰 효과를 볼 수 있습니다.