Цепочки методов

Когда вы выводите массив, вы видите его так, как он записан в коде: с квадратными скобками и кавычками. Чтобы превратить его в обычный текст, используйте join(). Он соединяет все элементы в одну строку и вставляет между ними то, что вы ему передали:

const names = ["Бим", "Лео", "Гоша"];
console.log(names.join(", "));
console.log(names.join(" и "));
console.log(names.join());

Бим, Лео, Гоша
Бим и Лео и Гоша
Бим,Лео,Гоша

Без аргумента join() ставит между элементами просто запятую, без пробела.

filter() и map() возвращают массивы, а у каждого массива есть эти методы. Поэтому следующий метод можно вызвать прямо на результате, не сохраняя его сначала в переменную. Это называется цепочкой методов:

const youngNames = animals
    .filter((animal) => animal.age < 5)
    .map((animal) => animal.name);

console.log(youngNames.join(", "));

Гоша, Пип

Читайте цепочку сверху вниз: возьмите животных, оставьте тех, кому меньше 5 лет, и составьте массив их имён. Это то же самое, что два шага с переменной между ними:

const young = animals.filter((animal) => animal.age < 5);
const youngNames = young.map((animal) => animal.name);

Если записать каждый метод на отдельной строке, начиная с точки, цепочку легче читать. Но это по-прежнему одна инструкция, поэтому точка с запятой ставится только в самом конце. join() тоже может быть последним звеном цепочки: animals.map((animal) => animal.name).join(", "). Он возвращает строку, а не массив, поэтому должен стоять последним.

Типичные ошибки:

• Неправильный порядок. В animals.map((animal) => animal.name).filter((animal) => animal.age < 5) сначала идёт map() и оставляет только имена. Имя — это строка, у неё нет age, поэтому условие никогда не выполняется и результат — []. Сначала отберите элементы, потом преобразуйте их.
• Точка с запятой посреди цепочки. После .filter(...); инструкция заканчивается, и следующая строка, которая начинается с точки, — это ошибка: SyntaxError: Unexpected token '.'.