javascriptecmascript-6factorycompositionspread-syntax

Composition with spread objects


I watched a tutorial on composition, and it makes you compose objects like this:

const eater = (state) => ({
  eat(amount) {
    console.log(state.name + ' is eating');
    state.energy += amount;
  }
});

// using a factory
const Dog = (name, energy, breed) => {
  let dog = {
    name,
    energy,
    breed
  };
  return Object.assign(dog, eater(dog));
};

const leo = Dog('Leo', 10, 'Pug');
leo.eat(10); // Leo is eating
console.log(leo.energy); // 20

I was wondering if you could do something like that instead, and if there are any downsides to doing it like that:

const eater = {
  eat(amount) {
    console.log(this.name + ' is eating');
    this.energy += amount;
  }
};

const Dog = (name, energy, breed) => {
  let dog = {
    name,
    energy,
    breed,
    ...eater
  };
  return dog;
};

const leo = Dog('Leo', 10, 'Pug');
leo.eat(10); // Leo is eating
console.log(leo.energy); // 20

As you can see, instead of creating and assigning a function to the object, with Object.assign, I create another object eater with a method, then I spread that eater object and add it to the dog object being created inside the factory.

So, is there anything wrong with doing it like that?

Thank you!


Solution

  • These two approaches are very similar. Both are workable & good ways.

    Here are the differences:

    class Eater {
      eat(amount) {
        console.log(this.name + ' is eating');
        this.energy += amount;
      }
    };
    
    class Dog extends Eater{
      constructor (name, energy, breed) {
        super();
        Object.assign(this, {
          name,
          energy,
          breed
        })
      }
    };
    
    const leo = new Dog('Leo', 10, 'Pug');
    leo.eat(10); // Leo is eating
    console.log(leo.energy); // 20
    console.log(leo instanceof Dog) //true
    console.log(leo instanceof Eater) //true