Hi developer, in this small article I want to talk about one concept introduced by Martin Fowler in your amazing book Refactoring, Chapter 6.

Motivation

Sometimes we faced a group of data organized together, appearing in one function and another. In this case, we could gather these data in a unique data structure.

According to the author, the true efficiency of this refactor is in the mode of how it allows modifications deeper in the code.

Example

function getProfile(name, age, skills) {
  const skillsList = skills.split(",");
  return `Hey ${name}, your age is ${age}, your skills are: ${skillsList}`;
}

Now, we could create a class to pass into the function replacing all the parameters, it could be an object, but a class gives us the power to carry methods through the instance, giving to us more flexibility and power.

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

  get name() {
    return this._data.name;
  }

  get age() {
    return this._data.age;
  }

  get skills() {
    return this._data.skills;
  }
}

First, we get a new instance of the class:

const oneGuy = new Person('Diogo', '30', ['React', 'Javascript']);

And then we to refactor the method:

export function getProfile(person) {
  const skillsList = person.skills.join(",");
  return `Hey ${person.name}, your age is ${person.age}, your skills are: ${skillsList}`;
}

Replace the old call with the new class parameter:

getProfile(oneGuy);

As explained, one advantage of use class is we can bring methods to the instance turning the code more clear and powerful. I will create a method to abstract the resume into the class Person `resume()`:

// Person class
// ...
resume() {
    const skillsList = this._data.skills.join(",");
    return `Hey ${this._data.name}, your age is ${this._data.age}, your skills are: ${skillsList}`
}

Finally, we can replace a bunch of code of `getProfile` and have a method more clear and easy to read:

export function getProfile(person) {
  return person.resume();
}

Try it using my CodeSandBox example 🚀