JavaScript: Цепочка вызовов

У чисел есть метод, который преобразует их в строку:

const peopleCount = 5;
peopleCount.toString(); // 5

Попробуйте ответить на вопрос, заработает ли следующий код — и если да, то что он напечатает на экран?

const name = 'Tirion';
console.log(name.length.toString());

Синтаксис нескольких подряд идущих точек мы видим впервые, но все операции, которые здесь встречаются, нам знакомы. Всё, что произошло в этом коде — это объединение уже известных возможностей языка. Такое в программировании происходит довольно часто. Даже не зная синтаксиса, можно пробовать комбинировать различные подходы, и есть неплохая вероятность, что они заработают.

Самый простой способ понять как работает этот код — разбить цепочку на отдельные операции:

const name = 'Tirion';
const len = name.length;
console.log(len.toString());

Эти примеры абсолютно эквивалентны. Мы можем выполнять операции последовательно с промежуточным созданием констант, а можем строить непрерывную цепочку из свойств и методов. В цепочках вычисления всегда идут слева направо. Каждый метод возвращает новое значение, и следующий метод применяется уже к нему:

' Hello, World! '.trim().toLowerCase().replace('world', 'js')
                  │       │             │
                  ↓       ↓             ↓
          'Hello, World!' │             │
                  'hello, world!'       │
                            'hello, js!'

Ещё один пример для закрепления:

const name = 'Tirion';
console.log(name.toUpperCase().toLowerCase());

Подобный код требует небольших умственных усилий. Важно понимать, что .toLowerCase() применяется к результату вызова метода, который находится левее. А метод toUpperCase() возвращает строку. Новички часто делают ошибки в цепочках с методами, забывая ставить вызов:

const name = 'Tirion';
// Этот код отработает неверно!
console.log(name.toUpperCase.toLowerCase());

Продолжая эту идею, возможно строить бесконечно длинные (хотя, в данном случае, бесполезные) цепочки:

// Чему равен результат такого вызова?
console.log(name.toUpperCase().toLowerCase().length.toString().length);

Цепочка после среза

Методы можно вызывать и после других операций, например после среза строки:

const text = '  Hello, Hexlet!  ';
// Убираем пробелы, берём подстроку и переводим в нижний регистр
console.log(text.trim().slice(7).toLowerCase()); // => hexlet!

Здесь сначала вызывается trim(), который удаляет пробелы. Затем берётся срез slice(7), начиная с восьмого символа. И уже после этого вызывается toLowerCase(). Такая запись читается слева направо и показывает весь путь преобразования данных в одной строке.

Где цепочка заканчивается

Цепочку можно продолжать, пока результат остаётся значением, у которого есть нужные методы. Как только метод или свойство возвращает значение другого типа, набор доступных методов меняется:

const text = 'hexlet';
// .length возвращает число — у него уже нет строковых методов
console.log(text.length.toUpperCase()); // TypeError: ... is not a function

Число 6, которое вернуло свойство .length, не умеет .toUpperCase() — это строковый метод. Зато у числа есть свои методы, например .toString(), поэтому text.length.toString() работает. Важно следить за тем, какой тип возвращает каждое звено цепочки.

С функциями подобный трюк не сработает, так как при обычном использовании они вкладываются друг в друга f(f(f())), что значительно ухудшает анализ. Но это не значит, что нельзя сделать красиво — можно и даже нужно. В других языках это реализуется через композицию функций или пайплайн-оператор, который, кстати говоря, постепенно начинает использоваться и в самом JavaScript: https://github.com/tc39/proposal-pipeline-operator.

С помощью метода slice() получите часть предложения, записанного в константу text, с 5 по 15 символы включительно. Полученную подстроку обработайте методом .trim() и выведите на экран длину итоговой подстроки. Выполните эти методы подряд в цепочке без создания промежуточных переменных.

• slice()
• trim()