Ланцюжки методів

Ланцюжок методів - це спосіб викликати послідовність методів на об'єкті чи значенні безпосередньо один за одним.

Ланцюжок методів допомагає за допомогою групування викликів методів позбутися проміжних змінних після кожної операції, крім фінальної. Такі проміжні змінні зазвичай лишаються баластом в коді й ніде більше не використовуються.

Ланцюжок методів може бути довільної довжини, але, зазвичай, не більше 2-3 операцій. Адже, виклик кожного наступного методу - це додаткове перебирання масиву, що за великої кількості, може позначитися на продуктивності.

Приклад

Нехай у нас є масив користувачів і необхідно:

1. Відфільтрувати користувачів молодше 20 років

2. розкласти в одномірний масив хоббі усіх цих користувачів

3. вибрати тільки унікальні хоббі (позбутися повторів)

4. відсортувати масив хоббі за алфавітом

Спочатку реалізуємо ці дії з використанням проміжних змінних без використання ланцюжків методів:

const people = [
  {
    name: "Alex",
    age: 18,
    hobby: ["electronics", "programming", "sport", "gym"],
  },
  {
    name: "Max",
    age: 67,
    hobby: ["reading", "cinema"],
  },
  {
    name: "Helga",
    age: 14,
    hobby: ["sport", "gym", "dancing", "singing"],
  },
  {
    name: "Mathew",
    age: 36,
    hobby: ["singing", "sport", "swimming"],
  },
];

const youngPeople = people.filter((el) => el.age < 20);

const hobbies = youngPeople.flatMap((el) => el.hobby);

const unicHobbies = hobbies.filter((el, id, arr) => arr.indexOf(el) === id);

const sortedUnicHobbies = [...unicHobbies].sort((a, b) => a.localeCompare(b));

console.log("people: ", people); // All users

console.log("youngPeople: ", youngPeople); //Users younger than 20yo

console.log("hobbies: ", hobbies);
// ['electronics', 'programming', 'sport', 'gym', 'sport', 'gym', 'dancing', 'singing']

console.log("unicHobbies: ", unicHobbies);
// ['electronics', 'programming', 'sport', 'gym', 'dancing', 'singing']

console.log("sortedUnicHobbies: ", sortedUnicHobbies);
// ["dancing", "electronics", "gym", "programming", "singing", "sport"];

Реалізуємо те саме завдання з використанням ланцюжків методів:

const people = [
  {
    name: "Alex",
    age: 18,
    hobby: ["electronics", "programming", "sport", "gym"],
  },
  {
    name: "Max",
    age: 67,
    hobby: ["reading", "cinema"],
  },
  {
    name: "Helga",
    age: 14,
    hobby: ["sport", "gym", "dancing", "singing"],
  },
  {
    name: "Mathew",
    age: 36,
    hobby: ["singing", "sport", "swimming"],
  },
];

const sortedUnicHobbies = [...people]
  .filter((el) => el.age < 20)
  .flatMap((el) => el.hobby)
  .filter((el, id, arr) => arr.indexOf(el) === id)
  .sort((a, b) => a.localeCompare(b));

console.log("sortedUnicHobbies: ", sortedUnicHobbies);
// ["dancing", "electronics", "gym", "programming", "singing", "sport"];

Як бачимо, результат такий само. От тільки ми уникли використання "мертвих" змінних youngPeople, hobbies та unicHobbies, які більше ніде не використовуються.