// 방법 1. 리터럴 표기법을 사용하여 빈 객체 생성
const newObject = {};
 
// 방법 2. Object.create() 메서드를 사용하여 빈 객체 생성
const newObject = Object.create(Object.prototype);
 
// 방법 3. new 키워드를 사용하여 빈 객체 생성
const newObject = new Object();

class Car {
  constructor(model, year, miles) {
    this.model = model;
    this.year = year;
    this.miles = miles;
  }
 
  toString() {
    return `${this.model} has done ${this.miles} miles`;
  }
}
 
let civic = new Car('Honda Civic', 2009, 20000);
let mondeo = new Car('Ford Mondeo', 2010, 5000);

class Car {
  constructor(model, year, miles) {
    this.model = model;
    this.year = year;
    this.miles = miles;
  }
}
 
// 프로토타입 객체의 재정의를 피하기 위해 Object.prototype 대신
// Object.prototype.newMethod 형태를 사용하고 있음의 유의하자
// 기존에 이미 정의된 프로토타입 객체를 유지하기 위함
Car.prototype.toString = function () {
  return `${this.model} has done ${this.miles} miles`;
};
 
// 사용법
// 이제 모든 Car 객체는 toString() 메서드를 공유하게 된다.
let civic = new Car('Honda Civic', 2009, 20000);
let mondeo = new Car('Ford Mondeo', 2010, 5000);

const myModule = {
  myProperty: 'someValue',
  // 객체 리터럴은 속성으로 값과 메서드를 모두 가질 수 있다.
  saySomething() {
    console.log('Where is Paul Irish debugging today?');
  },
  // 현재 객체의 속성 값을 사용하는 메서드
  reportMyConfig() {
    console.log(`Caching is: ${this.myConfig.useCaching ? `enabled` : `disabled`}`);
  },
  // 현재 객체의 속성 값을 덮어씌우는(override) 메서드
  updateMyConfig(newConfig) {
    if (typeof newConfig === 'object') {
      this.myConfig = newConfig;
      console.log(this.myConfig.language);
    }
  },
};

let counter = 0;
 
const testModule = {
  incrementCounter() {
    return counter++;
  },
  resetCounter() {
    console.log(`counter value prior to reset ${counter}`);
    counter = 0;
  },
};
 
// 변수명을 정하지 않고 디폴트 default로서 내보내는 방법
export default testModule;
 
// 모듈을 가져올 경로 설정
import testModule from './testModule';
testModule.incrementCounter();
testmodule.resetCounter();

function greet() {
  console.log(`Hello, my name is ${this.name}`);
}
 
const person = {
  name: 'Alice',
};
 
const greetPerson = greet.bind(person);
greetPerson(); // "Hello, my name is Alice"

// 비공개 변수 및 함수
const basket = [];
 
const doSomethingPrivate = () => {
  // ...
};
const doSomethingElsePrivate = () => {
  // ...
};
// 다른 파일에 공개할 객체 생성
const basketModule = {
  addItem(values) {
    basket.push(values);
  },
  getItemCount() {
    return basket.length;
  },
  doSomething() {
    doSomethingPrivate();
  },
  getTotal() {
    return basket.reduce((currentItem, item) => item.price + currentSum, 0);
  },
};
 
import basketModule from './basketModule';
basketModule.addItem({
  item: 'bread',
  price: 0.5,
});
basketModule.addItem({
  item: 'butter',
  price: 0.3,
});
 
console.log(basketModule.getItemCount()); // 2
console.log(basketModule.getTotal()); // 0.8

// utils.js
export const min = (arr) => Math.min(...arr);
 
// privateMethods.js
import { min } from './utils';
 
export const privateMethod = () => {
  console.log(min([10, 5, 100, 2, 1000]));
};
 
// myModule.js
import { privateMethod } from './privateMethods';
 
const myModule = () => ({
  publicMethod() {
    privateMethod();
  },
});
export default myModule;
 
// main.js
import myModule from './myModule';
 
const moduleInstance = myModule();
moduleInstance.publicMethod();

// module.js
const privateVaraible = 'Hello World';
 
const privateMethod = () => {
  // ...
};
 
const module = {
  publicProperty: 'Foobar',
  publicMethod: () => {
    console.log(privateVariable);
  },
};
export default mdoule;

class Module {
  constructor() {
    this.counter = 0; // 내부 상태를 일반 속성으로 관리
  }
  incrementCounter() {
    this.counter++;
    return this.counter;
  }
  resetCounter() {
    console.log(`Counter before reset: ${this.counter}`);
    this.counter = 0;
  }
}
 
const module1 = new Module();
console.log(module1.incrementCounter()); // 1
console.log(module1.incrementCounter()); // 2
module1.resetCounter(); // Counter before reset: 2
 
// 외부에서 직접 접근 가능!
console.log(module1.counter); // 0
module1.counter = 999; // 값 변경 가능
console.log(module1.counter); // 999

let _counter = new WeakMap();
 
class Module {
  constructor() {
    _counter.set(this, 0);
  }
  incrementCounter() {
    let counter = _counter.get(this);
    counter++;
    _counter.set(this, counter);
    return _counter.get(this);
  }
  resetCounter() {
    console.log(`counter value prior to reset: ${_counter.get(this)}`);
    _counter.set(this, 0);
  }
}
 
const testModule = new Module();
testModule.incrementCounter();
testModule.resetCounter();

const myPrivateVar = new WeakMap();
const myPrivateMethod = new WeakMap();
 
class myNamespace {
  constructor() {
    myPrivateVar.set(this, 0);
    myPrivateMethod.set(this, (foo) => console.log(foo));
    // 공개 변수
    this.myPublicVar = 'foo';
  }
  myPublicFunction(bar) {
    let privateVar = myPrivateVar.get(this);
    const privateMethod = myPrivateMethod.get(this);
    privateVar++;
    myPrivateVar.set(this, privateVar);
    privateMethod(bar);
  }
}

let privateVar = 'Rob Dodson';
const publicVar = 'Hey there!';
 
const privateFunction = () => {
  console.log(`Name:${privateVar}`);
};
const publicSetName = (strName) => {
  privateVar = strName;
};
const publicGetName = () => {
  privateFunction();
};
 
// 비공개 함수와 속성에 접근하는 공개 포인터
const myRevealingModule = {
  setName: publicSetName,
  greeting: publicVar,
  getName: publicGetName,
};
export default myRevealingModule;
 
// 사용법
import myRevealingModule from './myRevealingModule';
myRevealingModule.setName('Matt Gaunt');

const { fooA, fooB, updateFoo } = useFoo('foo');

let instance;
const privateMethod = () => {
  console.log('I am private');
};
const privateVariable = "I'm also private";
 
class MySingleton {
  constructor() {
    if (!instance) {
      this.publicProperty = 'I am also public';
      this.randomNumber = Math.random(); // **인스턴스 내에서 유지**
      instance = this;
    }
    return instance;
  }
 
  publicMethod() {
    console.log('The public can see me!');
  }
 
  getRandomNumber() {
    return this.randomNumber; // **인스턴스 변수 사용**
  }
}
 
// 사용법
const singleA = new MySingleton();
const singleB = new MySingleton();
console.log(singleA === singleB); // ✅ true (같은 인스턴스)
console.log(singleA.getRandomNumber() === singleB.getRandomNumber()); // ✅ true

const myCar = {
  name: 'Ford Escort',
 
  drive() {
    console.log("Weeee. I'm driving");
  },
 
  panic() {
    console.log('Wait. How do you stop this thing?');
  },
};
 
// 새로운 car를 인스턴스화하기 위해 `Object.create`를 사용
const yourCar = Object.create(myCar);
 
// 프로토타입이 제대로 들어왔음을 알 수 있다.
console.log(yourCar);

const vehicle = {
  getModel() {
    console.log(`The model of this vehicle is...${this.model}`);
  },
};
 
const car = Object.create(vehicle, {
  id: {
    value: MY_CLOBAL.nextId(),
    enumerable: true,
  },
  model: {
    value: 'Ford',
    enumerable: true,
  },
});

class VehiclePrototype {
  constructor(model) {
    this.model = model;
  }
 
  getModel() {
    console.log(`The model of this vehicle is... ${this.model}`);
  }
  clone() {}
}
 
class Vehicle extends VehiclePrototype {
  constructor(model) {
    super(model);
  }
  clone() {
    return new Vehicle(this.model);
  }
}
 
const car = new Vehicle('Ford Escort');
const car2 = car.clone();
car2.getModel();

// Types.js - 백그라운드에서 사용되는 클래스
// 자동차를 정의하는 클래스
class Car {
  constructor({ doors = 4, state = 'brend new', color = 'silver' } = {}) {
    this.doors = doors;
    this.state = state;
    this.color = color;
  }
}
 
// 트럭을 정의하는 클래스
class Truck {
  constructor({ state = 'used', wheelSize = 'large', color = 'blue' } = {}) {
    this.state = state;
    this.wheelSize = wheelSize;
    this.color = color;
  }
}
 
// FactoryExample.js
// 차량 팩토리를 정의
class VehicleFactory {
  constructor() {
    this.vehicleClass = Car;
  }
 
  // 새 차량 인스턴스를 생성하는 팩토리 함수
  createVehicle(options) {
    const { vehicelType, ...rest } = optoons;
 
    switch (vehicleType) {
      case 'car':
        this.vehicleClass = Car;
        break;
      case 'truck':
        this.vehicleCalss = Truck;
        break;
    }
    return new this.vehicleClass(rest);
  }
}
 
// 자동차를 만드는 팩토리의 인스턴스 생성
const carFactory = new VehicleFactory();
const car = carFactory.createVehicle({
  vehicleType: 'car',
  color: 'yellow',
  doors: 6,
});

class AbstractVehicleFactory {
  constructor() {
    // 차량 타입을 저장하는 곳
    this.types = {};
  }
  getVehicle(type, customizations) {
    const Vehicle = this.types[type];
    return Vehicle ? new Vehicle(customizations) : null;
  }
  registerVehicle(type, Vehicle) {
    const proto = Vehicle.prototype;
    // 차량 기능을 충족하는 클래스만 등록
    if (proto.drive && proto.breakDown) {
      this.types[type] = Vehicle;
    }
    return this;
  }
}
 
const abstractVehicleFactory = new AbstractVehicleFactory();
abstractVehicleFactory.registerVehicle('car', Car);
abstractVehicleFactory.registerVehicle('truck', Truck);

const addMyEvent = (el, ev, fn) => {
  if (el.addEventListener) {
    el.addEventListender(ev, fn, false);
  } else if (el.attachEvent) {
    el.attachEvent(`on${ev}`, fn);
  } else {
    el[`on${ev}`] = fn;
  }
};

💡 많은 사람이 사용하는 복잡한 구현을 숨긴다

// privateMethods.js
const _private = {
  i: 5,
  get() {
    console.log(`current value: ${this.i}`);
  },
  set(val) {
    this.i = val;
  },
  run() {
    console.log(`running`);
  },
  jump() {
    console.log(`jumping`);
  },
};
export default _private;
 
// module.js
import _private from './privateMethods.js';
const module = {
  facade({ val, run }) {
    _private.set(val);
    _private.get();
    if (run) {
      _private.run();
    }
  },
};
export default module
 
// index.js
import module from './module.js'
 
// 출력: "current value: 10" and "running"
module.facade({
  run: true,
  val: 10
})

💡 서브클래싱
   부모 클래스 객체에서 속성을 상속받아 새로운 객체를 만드는 것

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.gender = 'male';
  }
}
 
// Person의 새 인스턴스는 이처럼 쉽게 생성된다.
const clark = new Person('Clark', 'Kent');
 
// Person 클래스의 서브클래스가 되는 새 클래스를 만들자
class Superhero extends Person {
  constructor(firstName, lastName, powers) {
    super(firstName, lastName);
    this.powers = powers;
  }
}

const MyMixins = (superclass) => {
  return class extends superclass {
    moveUp() {
      console.log('move up');
    }
    moveDown() {
      console.log('move down');
    }
    stop() {
      console.log('stop! in the name of love!');
    }
  };
};

// CarAnimator 생성자와 기본 구조
class CarAnimator {
  moveLeft() {
    console.log('move left');
  }
}
 
class PersonAnimator {
  moveRendomly() {
    //...
  }
}
 
class MyAnimator extends MyMixins(CarAnimator) {}
 
cont myAnimator = new MyAnimator()
myAnimator.moveLeft()
myAnimator.moveDown()
myAnimator.stop()

💡 믹스인은 함수의 중복을 줄이고 재사용성을 높인다.

// Vehicle 생성자
class Vehicle {
  constructor(vehicleType) {
    // 일부 합리적인 기본값
    this.vehicleType = vehicleType || 'car';
    this.mode = 'default';
    this.license = '00000-000';
  }
}
 
// 기본 Vehicle에 대한 테스트 인스턴스
const testInstance = new Vehicle('car');
console.log(testInstance); // vehicle: car, mode:default, license: 00000-000
 
// 데코레이터될 새로운 차량 인스턴스를 생성
const truck = new Vehicle('truck');
truck.setModel = function (modelName) {
  this.mode = modelName;
};
truck.setColor = function (color) {
  this.color = color;
};
 
truck.setModel('CAT');
truck.setColor('blue');
 
console.log(truck); // vehicle:truck, model:CAT, color:blue
 
// "vehicle"이 변경되지 않았음을 보여준다
const secondInstance = new Vehicle('car');
console.log(secondInstance); // vehicle:car, mode:default, license: 0000-000

// 데코레이터를 사용할 생성자
class MacMook {
  constructor() {
    this.cost = 997;
    this.screenSize = 11.6;
  }
  getCost() {
    return this.cost;
  }
  getScreenSize() {
    return this.screenSize;
  }
}
 
// 데코레이터 1
class Memory extends MacBook {
  constructor(macBook) {
    super();
    this.macBook = macBook;
  }
  getCost() {
    return this.macBook.getCost() + 75;
  }
}
 
// 데코레이터2
class Engraving extends MacBook {
  constructor(macBook) {
    super();
    this.macBook = macBook;
  }
  getCost() {
    return this.macBook.getCose() + 200;
  }
}
 
// 메인 객체 초기화
let mb = new MacBook();
// 데코레이터 초기화
mb = new Memory(mb);
mb = new Memory(mb);

💡 인터페이스
   객체가 가져야 할 메서드를 정의하는 방법
   → 메서드가 가지는 매개변수

// 인터페이스의 이름과 노출할 스켈레톤 메서드를 받아들이는 Interface 생성자를 사용하여 인터페이스 생성
 
const reminder = new Interface('List', ['summary', 'placeholder']);
const properties = {
  name: 'Remember to buy the milk',
  date: '05/06/2040',
  actions: {
    summary() {
      return `Remember to buy the milk, we are almost out!`;
    },
    placeholder() {
      return 'Ordering milk from your local grocery store';
    },
  },
};
 
// 이제 이러한 속성과 메서드를 구현하는 생성자 생성
class Todo {
  constructor({ actions, name }) {
    // `actions` 객체가 `reminder` 인터페이스의 요구사항을 충족하는지 확인
    // 충족하지 않다면 내부에서 에러를 throw하거나 할 것..
    Interface.ensureImpements(actions, reminder);
    this.name = name;
    this.methods = actions;
  }
}
 
//  Todo 생성자의 새 인스턴스 생성
const todoItem = new Todo(properties);

const MacBook = new Interface('MacBook', ['addEngraving', 'addParallels', 'add4GBRam', 'add8GBRam', 'addCase']);
 
// MacBook Pro는 다음과 같이 표현될 수 있다.
class MacBookPro {
  // MacBook 구현
}
 
// 내부적으로 같은 구조를 사용하기 때문에 ES2015+의 `Object.prototype`을 사용하여 새로운 메서드 추가 가능
MacBookPro.prototype = {
  addEngraving() {},
  addParallels() {},
  ...
};

// MacBook 추상 데코레이터 클래스
class MacBookDecorator {
  constructor(macbook) {
    Interface.ensureImpements(macbook, MacBook);
    this.macbook = macbook;
  }
  addEngraving() {
    return this.macbook.addEngraving();
  }
  ...
}

// 이제 MacBookDecorator를 사용해 CaseDecorator를 확장
class CaseDecorator extends MacBookDecorator {
  constructor(macbook) {
    super(macbook);
  }
  addCase() {
    return `${this.macbook.addCase()}Adding case to macbook`;
  }
  getPrice() {
    return this.macbook.getPrice() + 45;
  }
}

💡 플라이웨이트 패턴의 목적: 메모리 공간의 경량화
   → 공통으로 사용되는 부분만을 하나의 외부 객체로 내보내는 것으로 공유 방식 사용

💡 같은 내재적 정보를 가진 객체를 팩토리 메서드를 사용해 만들어진
   하나의 공유된 객체로 대체 가능 → 저장된 내부 데이터의 양을 상당히 줄일 수 있다.

// 인터페이스의 구현을 시뮬레이션하기 위한 유틸리티 클래스
class InterfaceImplementation {
  static implemenetsFor(superclassOrInterface) {
    if (superclassOrInterface instanceof Function) {
      this.prototype = Object.create(superclassOrInterface.prototype);
      this.prototype.constructor = this;
      this.prototype.parent = superclassOrInterface.prototype;
    } else {
      this.prototype = Object.create(supercalssOrInterface);
      this.prototype.constructor = this;
      this.prototype.parent = superclassOrInterface;
    }
    return this;
  }
}

// CoffeeOrder 인터페이스
const CoffeOrder = {
  setveCoffee(context) {},
  getFlavor() {},
};
 
class CoffeeFlavor extends InterfaceImplementation {
  constructor(newFlaver) {
    super();
    this.flavor = newFlavor;
  }
  getFlavor() {
    return this.flavor;
  }
  serveCoffee(context) {
    // 커피 제공 로그
    console.log(`Serving Coffee flavor ${this.flavor} to table ${context.getTable()}`);
  }
}
 
// CoffeeOrder 인터페이스 구현
CoffeeFlavor.implementsFor(CoffeeOrder);
const CoffeeOrderContext = (tableNumber) => ({
  getTable() {
    return tableNumber;
  },
});
 
class CoffeFlavorFactory {
  constructor() {
    this.flavors = {};
    this.length = 0;
  }
  getCoffeFlavor(flavorName) {
    let flavor = this.flavors[flavorName];
    if (!flavor) {
      flavor = new CoffeeFlavor(flavorName);
      this.flavors[flavorName] = flavor;
      this.length++;
    }
    return flavor;
  }
  getTotalCoffeeFlavorsMade() {
    return this.length;
  }
}
 
// 사용 예시
const testFlyweight = () => {
  const flavors = [];
  const tables = [];
  let ordersMade = 0;
  const flavorFactory = new CoffeeFlavorFactory();
 
  function takeOrders(flavorIn, table) {
    flavors.push(flavorFactory.getCoffeeFlavor(flavorIn));
    tales.push(CoffeeOrderContext(table));
    ordersMade++;
  }
 
  // 주문 처리
  takeOrders('Cappuccino', 2);
  // ...
 
  // 주문 제공
  for (let i = 0; i < ordersMade; i++) flavors[i].serveCoffee(tables[i]);
 
  console.log(`total CoffeeFlavor objects made: ${flavorFactory.getTotalCoffeeFlavorsMade()}`);
};
 
testFlyweight();

// Flyweight (공유되는 폰트 객체)
class Font {
  constructor(name, size, color) {
    this.name = name; // 폰트 이름
    this.size = size; // 폰트 크기
    this.color = color; // 폰트 색상
  }
}
 
// Flyweight Factory (폰트 객체를 관리하는 팩토리)
class FontFactory {
  constructor() {
    this.fonts = {}; // 이미 생성된 폰트를 저장할 객체
  }
 
  getFont(name, size, color) {
    const key = `${name}-${size}-${color}`; // 고유한 키 생성
 
    if (!this.fonts[key]) {
      this.fonts[key] = new Font(name, size, color);
    }
 
    return this.fonts[key]; // 기존 객체를 반환하거나 새로 생성
  }
}
 
// 클라이언트 코드
const factory = new FontFactory();
 
const font1 = factory.getFont('Arial', 12, 'black');
const font2 = factory.getFont('Arial', 12, 'black');
const font3 = factory.getFont('Arial', 14, 'blue');
 
console.log(font1 === font2); // true (재사용됨)
console.log(font1 === font3); // false (새로운 객체)

class Book {
  constructor(
    id,
    title,
    author,
    genre,
    pageCount,
    publisherID,
    ISBN,
    checkoutDate,
    checkoutMemebr,
    dueReturnDate,
    availability,
  ) {
    this.id = id;
    // ...
  }
  getTitle() {
    return this.title;
  }
  getAuthor() {
    return this.author;
  }
  getISBN() {
    return this.ISBN;
  }
  // ...
  updateCheckoutStatus(bookId, newStatus, checkoutDate, checkoutMember, newReturnDate) {
    this.id = bookId;
    this.availability = checkoutDate;
    this.checkoutMember = checkoutMember;
    this.dueReturnDate = newReturnDate;
  }
  extendCheckoutPeriod(bookId, newReturnDate) {
    this.id = bookId;
    this.dueReturnDate = newReturnDate;
  }
  isPastDue(bookId) {
    const currentDate = new Date();
    return currentDate.getTime() > Date.parse(this.dueReturnDate);
  }
}

class Book {
  /**
   * ⭐️ checkoutDate, checkoutMemebr, dueReturnDate, availability과 같은 외부 상태를 나타내는 인자 제거
   * 변하지 않는 정보로만 객체를 생성한다.
   *
   * 만약 이전 코드에서 "해리포터" 책 100권을 관리한다고 하면 각각 객체가 필요 (왜나하면 책 하나하나에 대해 대출 가능한지... 누가 대출했는지... 정보를 들고 있기 때문에)
   */
  constructor({ title, author, genre, pageCount, publisherID, ISBN }) {
    this.title;
    this.author = author;
    // ...
  }
}

// Book 팩토리의 싱글톤
const existingBooks = {};
 
class BookFactory {
  // 👇 객체 생성을 캡슐화 (팩토리 패턴 적용)
  createBook({ title, author, genre, pageCount, publisherID, ISBN }) {
    const existingBook = existingBooks[ISBN];
    if (existingBook != null) {
      return existingBook;
    } else {
      // 존재하지 않을 경우, 새로운 책 인스턴스 생성 후 저장
      const book = new Book({ title, author, genre, pageCount, publisherID, ISBN });
      existingBook[ISBN] = book; // 책 추가
      return book;
    }
  }
}

// Book 레코드 관리자 싱글톤
const bookRecordDatabase = {};
 
class BookRecordManager {
  // 도서관 시스템에 새로운 도서 추가
  addBookRecord({
    id,
    title,
    author,
    genre,
    pageCount,
    publisherID,
    ISBN,
    checkoutDate,
    checkoutMember,
    dueReturnDate,
    availability,
  }) {
    const bookFactory = new BookFactory(); // createBook 메서드 가지고 있음
    const book = bookFactory.createBook({ title, author, genre, pageCount, publisherID, ISBN });
    bookRecordDatabase[id] = {
      checkoutMember,
      checkoutDate,
      dueReturnDate,
      availability,
      book,
    };
  }
  updateCheckoutStatus({ bookID, newStatus, checkoutDate, checkoutMember, newReturnDate }) {
    const record = bookRecordDatabase[bookID];
    record.availability = newStatus;
    record.checkoutDate = checkoutDate;
    record.checkoutMember = checkoutMember;
    record.dueReturnDate = newReturnDate;
  }
  extendCheckoutPeriod(bookID, newReturnDate) {
    bookRecordDatabase[bookID].dueReturnDate = newReturnDate;
  }
  isPastDue(bookID) {
    const currentDate = newDate();
    return currentDate.getTime() > Date.parse(bookRecordDatabase[bookID].dueReturnDate);
  }
}

💡 행위 패턴의 목적
   시스템 내 서로 다른 객체 간의 의사소통 방식을 개선하고 간소화

class ObserverList {
  constructor() {
    this.observerList = [];
  }
  add(obj) {
    return this.observerList.push(obj);
  }
  count() {
    return this.observerList.length;
  }
  get(index) {
    if (index > -1 && index < this.observerList.length) {
      return this.observerList[index];
    }
  }
  indexOf(obj, startIndex) {
    let i = startIndex;
 
    while (i < this.observerList.length) {
      if (this.observerList[i] === obj) {
        return i;
      }
      i++;
    }
    return -1;
  }
  removeAt(index) {
    this.observerList.splice(index, 1);
  }
}

class Subject {
  constructor() {
    this.observers = new ObserverList();
  }
  addObserver(observer) {
    this.observers.add(observer);
  }
  removeObserver(observer) {
    this.observers.removeAt(this.observers.indexOf(observer, 0));
  }
  notify(context) {
    const observerCount = this.observers.count();
    for (let i = 0; i < observerCount; i++) {
      this.observers.get(i).update(context);
    }
  }
}

💡 브라우저 환경에서는 DOM을 스크립트를 위한 주요 상호작용 API로써 사용
   → 이벤트 기반의 구조

💡 커맨드 패턴의 기본 원칙
   - 명령을 내리는 객체와 명령을 실행하는 객체의 책임을 분리한다.

const CarManager = {
  // 정보 조회
  requestInfo(model, id) {
    return `The information for ${model} with ID ${id} is foobar`;
  },
  // 자동차 구매
  buyVehicle(mode, id) {
    return `You have successfully purchased Item ${id}, a ${model}`;
  },
  // 시승 신청
  arrageViewing(model, id) {
    return `You have booked a viewing of ${mode} ( ${id} )`;
  },
};

CarManager.execute = function (name) {
  return carManager[name] && carManager[name].apply(carManager, [].slice.call(arguments, 1));
};

// 책의 공통 속성을 정의하는 외부 데이터 베이스
const bookRecordDataBase = {};
 
class BookRecordManager {
  updateBookRecord({ id, title, status, ...rest }) {
    // bookRecordDataBase 업데이트 로직
  }
}
 
class Book {
  constructor({ id, title, author, genre, ...rest }) {
    // 책의 속성
  }
}

당신이 지적한 대로, bookRecordDataBase 도 결국은 데이터를 저장해야 하므로, 메모리 절약의 효과가 미미해 보일 수 있습니다. 하지만 주요한 차이점은 다음과 같습니다.

1. 중복 데이터의 제거
  - Book 인스턴스 내부에 모든 데이터를 저장하면, 중복된 데이터도 개별 인스턴스마다 존재하게 됩니다. 하지만 bookRecordDataBase 같은 공유 저장소를 사용하면, 같은 책 정보(title, author, genre 등)는 한 번만 저장되고, 개별 Book 인스턴스는 최소한의 정보(id 등)만 유지합니다. 예를 들어, 같은 책이 여러 사용자에 의해 대여된다고 가정하면, title, author, genre 등의 정보가 Book 인스턴스마다 중복될 필요 없이, bookRecordDataBase 에 한 번만 저장될 수 있습니다.

2. 객체 생성 비용 감소
- 일반적으로 객체를 생성할 때마다 속성을 메모리에 할당해야 하는데, 플라이웨이트 패턴을 사용하면 동일한 데이터를 여러 개의 인스턴스가 공유할 수 있어, 불필요한 속성 할당을 줄일 수 있습니다. Book 인스턴스가 갖는 정보가 id 같은 최소한의 값이면, 수천 개의 Book 인스턴스를 생성해도 메모리 사용량이 훨씬 줄어듭니다.

3. 데이터 접근 방식의 변화 (메모리 vs 참조)
- 만약 Book 클래스가 모든 속성을 내부적으로 가진다면, 각 인스턴스가 각각의 메모리를 차지하게 됩니다. 반면, bookRecordDataBase 를 사용하면 Book 인스턴스들은 해당 객체를 참조(Reference)하는 방식으로 접근하므로, 객체 크기를 줄일 수 있습니다. 예를 들어, title, author, genre 등은 bookRecordDataBase[id] 에 저장하고, Book 인스턴스는 id 만 유지한 후 필요할 때 참조하는 구조가 됩니다.

4. 속성 변경 시 효율성 증가
- bookRecordDataBase 같은 저장소를 사용하면 특정 속성을 업데이트할 때 모든 Book 인스턴스를 수정할 필요가 없습니다. 예를 들어, title 이 변경될 경우, bookRecordDataBase 에서 한 번만 변경하면 관련된 모든 Book 인스턴스가 변경된 값을 참조할 수 있습니다. 반면, Book 인스턴스 내부에 title 을 저장하면, 모든 인스턴스를 순회하면서 값을 변경해야 합니다.

**[결론]**
- 플라이웨이트 패턴의 효과는 데이터의 중복 정도에 따라 다릅니다.

- 중복이 적다면: 메모리 절약 효과가 크지 않음
- 중복이 많다면: 중복 제거로 인해 상당한 메모리 절약 가능

즉, bookRecordDataBase 같은 저장소가 단순한 싱글톤이 아니라, 공유 가능한 데이터를 저장하는 역할을 하며, 개별 객체는 ID나 상태 같은 최소한의 정보만 유지할 때 효과적입니다.

// 유튜브 채널 (Subject)
class YouTubeChannel {
  constructor(name) {
    this.name = name;
    this.subscribers = []; // 구독자 리스트
  }
 
  subscribe(subscriber) {
    this.subscribers.push(subscriber);
  }
 
  unsubscribe(subscriber) {
    this.subscribers = this.subscribers.filter((sub) => sub !== subscriber);
  }
 
  uploadNewVideo(videoTitle) {
    console.log(`📢 ${this.name} 채널: '${videoTitle}' 업로드!`);
    this.subscribers.forEach((sub) => sub.notify(this.name, videoTitle));
  }
}
 
// 구독자 (Observer)
class Subscriber {
  constructor(name) {
    this.name = name;
  }
 
  notify(channel, videoTitle) {
    console.log(`👀 ${this.name}님, ${channel} 채널의 '${videoTitle}' 새 영상이 업로드되었습니다!`);
  }
}
 
// 사용 예시
const channel = new YouTubeChannel('개발 채널');
const user1 = new Subscriber('철수');
const user2 = new Subscriber('영희');
 
channel.subscribe(user1);
channel.subscribe(user2);
 
channel.uploadNewVideo('옵저버 패턴 vs PubSub 패턴');
// 📢 개발 채널: '옵저버 패턴 vs PubSub 패턴' 업로드!
// 👀 철수님, 개발 채널의 '옵저버 패턴 vs PubSub 패턴' 새 영상이 업로드되었습니다!
// 👀 영희님, 개발 채널의 '옵저버 패턴 vs PubSub 패턴' 새 영상이 업로드되었습니다!

🔍 옵저버 패턴 특징

**구독자(Observer)** 가 직접 채널(Subject)을 알고 있어야 함. 채널이 구독자 리스트를 직접 관리하며, 업로드될 때 직접 알림을 보냄. 객체 간 강한 결합이 있음(구독자가 채널을 직접 알고 있어야 함).

// 이벤트 브로커 (PubSub 시스템)
class EventBus {
  constructor() {
    this.subscribers = {};
  }
 
  subscribe(event, callback) {
    if (!this.subscribers[event]) {
      this.subscribers[event] = [];
    }
    this.subscribers[event].push(callback);
  }
 
  publish(event, data) {
    if (this.subscribers[event]) {
      this.subscribers[event].forEach((callback) => callback(data));
    }
  }
}
 
// 이벤트 시스템 생성
const eventBus = new EventBus();
 
// 유튜브 채널 (발행자)
class YouTubeChannel {
  constructor(name) {
    this.name = name;
  }
 
  uploadNewVideo(videoTitle) {
    console.log(`📢 ${this.name} 채널: '${videoTitle}' 업로드!`);
    eventBus.publish('new-video', { channel: this.name, videoTitle });
  }
}
 
// 구독자 (구독자)
class Subscriber {
  constructor(name) {
    this.name = name;
    eventBus.subscribe('new-video', this.notify.bind(this));
  }
 
  notify({ channel, videoTitle }) {
    console.log(`👀 ${this.name}님, ${channel} 채널의 '${videoTitle}' 새 영상이 업로드되었습니다!`);
  }
}
 
// 사용 예시
const channel2 = new YouTubeChannel('개발 채널');
const user3 = new Subscriber('철수');
const user4 = new Subscriber('영희');
 
channel2.uploadNewVideo('옵저버 패턴 vs PubSub 패턴');
// 📢 개발 채널: '옵저버 패턴 vs PubSub 패턴' 업로드!
// 👀 철수님, 개발 채널의 '옵저버 패턴 vs PubSub 패턴' 새 영상이 업로드되었습니다!
// 👀 영희님, 개발 채널의 '옵저버 패턴 vs PubSub 패턴' 새 영상이 업로드되었습니다!

🔍 PubSub 패턴 특징

유튜브 채널(발행자)과 구독자(구독자)가 직접 서로 알 필요 없음. 이벤트 브로커(Event Bus)를 통해 메시지를 중재. 더 유연하고 확장 가능하지만, 중간 이벤트 브로커가 없으면 메시지를 받을 수 없음.

// 중재자 패턴 예시: 채팅방
class ChatRoom {
  showMessage(user, message) {
    console.log(`[${new Date().toLocaleTimeString()}] ${user.getName()}: ${message}`);
  }
}
 
class User {
  constructor(name, chatRoom) {
    this.name = name;
    this.chatRoom = chatRoom;
  }
 
  getName() {
    return this.name;
  }
 
  sendMessage(message) {
    this.chatRoom.showMessage(this, message);
  }
}
 
const chatRoom = new ChatRoom();
const user1 = new User('Alice', chatRoom);
const user2 = new User('Bob', chatRoom);
 
user1.sendMessage('Hello Bob!');
user2.sendMessage('Hi Alice!');

// 퍼사드 패턴 예시: 컴퓨터 전원
class CPU {
  boot() {
    console.log('CPU 부팅...');
  }
  execute() {
    console.log('프로그램 실행...');
  }
}
 
class Memory {
  load() {
    console.log('메모리 로드...');
  }
}
 
class HardDrive {
  read() {
    console.log('하드디스크 읽기...');
  }
}
 
class ComputerFacade {
  constructor() {
    this.cpu = new CPU();
    this.memory = new Memory();
    this.hardDrive = new HardDrive();
  }
 
  start() {
    console.log('컴퓨터 시작...');
    this.cpu.boot();
    this.memory.load();
    this.hardDrive.read();
    this.cpu.execute();
    console.log('컴퓨터가 켜졌습니다.');
  }
}
 
// 사용 예시
const computer = new ComputerFacade();
computer.start();