автордың кітабын онлайн тегін оқу React: современные шаблоны для разработки приложений
Литературный редактор А. Руденко
Художник В. Мостипан
Корректоры С. Беляева, Н. Сидорова
Алекс Бэнкс, Ева Порселло
React: современные шаблоны для разработки приложений 2-е издание. — СПб.: Питер, 2021.
ISBN 978-5-4461-1492-4
© ООО Издательство "Питер", 2021
Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав.
Предисловие
Эта книга предназначена для разработчиков, желающих изучить библиотеку React и освоить передовые технологии, внедряемые в язык JavaScript. Сейчас самое время стать JavaScript-разработчиком. Экосистема этого языка стремительно пополняется новыми инструментами, синтаксисом и методиками для решения множества проблем, стоящих перед разработчиками. Целью написания книги стала систематизация новых технологий, позволяющая сразу же приступить к работе с React. Мы рассмотрим библиотеку Redux, маршрутизатор React Router, а также инструменты разработчика и обещаем читателям, что не бросим их на произвол судьбы после того как дадим вводную информацию.
Книга не предполагает наличия у читателей начальных знаний React. Мы познакомим вас со всеми основами React с нуля. Также мы не предполагаем, что вы работали с новейшим синтаксисом JavaScript. О нем мы поговорим в главе 2, заложив тем самым фундамент для остальных глав.
Освоение книги станет для вас легче, если вы уже знакомы с HTML, CSS и JavaScript. Почти всегда лучше освоиться с этой большой тройкой, прежде чем погружаться в работу с библиотекой JavaScript.
В ходе изучения материала можете обращаться к репозиторию GitHub по адресу github.com/moonhighway/learning-react. Там находится весь код, позволяющий освоить практические примеры.
Условные обозначения
В этой книге приняты следующие типографские соглашения:
Курсив
Используется для обозначения новых терминов, адресов URL и электронной почты, имен файлов и расширений имен файлов.
Моноширинный шрифт
Применяется для оформления листингов программ и программных элементов внутри обычного текста, таких как имена переменных и функций, баз данных, типов данных, переменных окружения, инструкций и ключевых слов.
Моноширинный жирный
Обозначает команды или другой текст, который должен вводиться пользователем.
Моноширинный курсив
Обозначает текст, который должен замещаться фактическими значениями, вводимыми пользователем или определяемыми из контекста.
Использование примеров кода
Дополнительные материалы (примеры кода, упражнения и т.д.) можно скачать по ссылке github.com/moonhighway/learning-react.
Если у вас возникнет технический вопрос или проблема с использованием примеров кода, отправьте электронное письмо по адресу bookquestions@oreilly.com.
Эта книга призвана помочь вам выполнить свою работу. Обычно, если в этой книге предлагается пример кода, вы можете использовать его в своих программах и документации. Вам не нужно связываться с нами для получения разрешения, если вы не воспроизводите слишком значительную часть кода. Например, для написания программы, в которой используется несколько фрагментов кода из этой книги, разрешения не требуется. Продажа или распространение примеров из книг O’Reilly требует разрешения. Чтобы ответить на вопрос, можно сослаться на эту книгу и процитировать пример кода без разрешения. Для включения значительного количества примеров кода из этой книги в документацию по вашему продукту требуется разрешение.
Благодарности
Наше путешествие по React началось случайно. Когда в стенах компании Yahoo мы преподавали полный курс по разработке программ на JavaScript, то использовали для создания учебных материалов библиотеку YUI. А затем в августе 2014 года разработка на YUI прекратилась. Пришлось заменить все файлы нашего курса, но чем? Что теперь предполагалось использовать при разработке внешнего интерфейса? Ответ: React. В него мы влюбились не сразу, понадобилась пара часов на то, чтобы он зацепила нас. Казалось, React потенциально может изменить что угодно. Мы включились в работу с ним на ранней стадии и считаем, что нам очень повезло.
Мы благодарим Анджелу Руфино и Дженнифер Поллок за поддержку в разработке второго издания. Также хотим поблагодарить Элли Макдональд за всю ее помощь в редактировании первого издания. Мы благодарны нашим научным редакторам Скотту Ивако, Адаму Ракису, Брайану Слеттену, Максу Фиртману и Четану Каранде.
Кроме того, эта книга не состоялась бы без Шэрон Адамс и Мэрилин Мессинео. Они сговорились приобрести первый компьютер Алекса — цветной Tandy TRS 80. Также эта книга не возникла бы без любви, поддержки и поощрения Джима и Лорри Порселло, Майка и Шэрон Адамс.
Также хочется поблагодарить кофейню Coffee Connexion из Тахо-Сити, штат Калифорния, за их кофе, такой нужный для завершения этой книги, и владельца кофейни Робина, который дал нам не теряющий актуальности комментарий: «Книга по программированию? Скучища!»
От издательства
Ваши замечания, предложения, вопросы отправляйте по адресу comp@piter.com (издательство «Питер», компьютерная редакция).
Мы будем рады узнать ваше мнение!
На веб-сайте издательства www.piter.com вы найдете подробную информацию о наших книгах.
Глава 1. Добро пожаловать в React
Что делает библиотеку JavaScript хорошей? Количество звезд на GitHub? Количество загрузок на npm? Насколько важно количество твитов, которые оставляют ребята из ThoughtLeaders? Как выбрать лучший инструмент для создания лучшего продукта? Как узнать, стоит ли овчинка выделки? Как сделать выбор?
Когда появилась библиотека React, было много разговоров о том, хороша ли она, и многие относились к ней скептически. Она была новой, а новое часто разочаровывает.
В ответ на такую реакцию Пит Хант из команды React написал статью «Почему React?», в которой порекомендовал «дать ей [библиотеке React] пять минут». Он хотел побудить людей сначала поработать с React, а потом оценивать его.
Да, React — это небольшая библиотека, в которой нет всего, что вам может понадобиться для создания приложения. Но дайте ей пять минут.
Да, код на React выглядит как HTML, расположенный прямо в коде JavaScript. И да, эти теги требуют предварительной обработки для запуска в браузере. И для этого вам, вероятно, понадобится такой инструмент сборки, как webpack. Но дайте ей пять минут.
Скоро React отметит десятилетие, и многие команды уже решили, что она хороша, так как в свое время дали ей пять минут. Мы говорим об Uber, Twitter и Airbnb — огромных компаниях, которые попробовали React и поняли, что он может помочь командам быстрее создавать лучшие продукты. В конце концов, разве не для этого мы все здесь? Не для твитов. Не для звезд. Не для загрузок. Мы здесь, чтобы создавать крутые вещи с помощью инструментов, которые нам нравятся. Мы здесь ради славы от создания чего-то, чем мы можем гордиться. Если вам нравится делать такие вещи, вам, вероятно, понравится и React.
Прочный фундамент
Независимо от того, новичок вы в React или ищете в этой книге новейшие функции, мы хотим, чтобы эта книга стала прочной основой для всей вашей будущей работы с этой библиотекой. Цель книги — предотвратить путаницу и расположить материал в определенной последовательности, то есть предоставить дорожную карту обучения React.
Прежде чем углубиться в React, важно знать JavaScript. То есть освоить не весь язык и все его паттерны, но обязательно понимать массивы, объекты и функции.
В следующей главе мы рассмотрим новый синтаксис JavaScript, чтобы познакомить вас с новейшими функциями JavaScript, особенно с теми, которые часто используются с React. Затем мы познакомим вас с функциональным JavaScript, чтобы вы смогли понять парадигму, которая породила React. Хорошим побочным эффектом работы с React является то, что он может сделать вас более сильным разработчиком JavaScript, так как с его помощью вы начнете создавать паттерны, которые удобно читать, повторно использовать и тестировать. Он вас немного воспитает.
Затем мы рассмотрим основы React, чтобы понять, как создать пользовательский интерфейс с помощью компонентов. Научимся составлять эти компоненты и добавлять к ним логику с помощью свойств и состояний. Рассмотрим хуки React, позволяющие повторно использовать логику с отслеживанием состояния между компонентами.
Разобравшись с основами, мы создадим приложение, в котором пользователи смогут добавлять, редактировать и удалять цвета. Мы узнаем, как Hooks и Suspense помогают получить данные. В процессе создания приложения мы изучим множество инструментов из более широкой экосистемы React, которые используются для решения общих задач, таких как маршрутизация, тестирование и рендеринг (или отображение, глава 7) на стороне сервера.
Мы надеемся, что вы быстрее освоите экосистему React с использованием нашего подхода, так как мы не только проведем поверхностный обзор тем, но и вооружим вас инструментами и навыками, необходимыми для создания реальных приложений React.
Прошлое и будущее React
Библиотека React была создана Джорданом Уолком, инженером-программистом Facebook. Она попала в новостную ленту Facebook в 2011 году, а затем в Instagram, приобретенный Facebook в 2012 году. На JSConf 2013 React была представлена как система с открытым исходным кодом и присоединилась к обширной категории UI-библиотек, таких как jQuery, Angular, Dojo, Meteor и другие. В то время React называли «V в MVC». Другими словами, компоненты React выступали в качестве уровня представления или пользовательского интерфейса для приложений JavaScript.
С этого момента React начали принимать в сообществе. В январе 2015 года компания Netflix объявила, что использует React для разработки пользовательского интерфейса. В том же месяце была выпущена React Native — библиотека для создания мобильных приложений с использованием React. Facebook также выпустил ReactVR — еще один инструмент, решавший с помощью React широкий круг задач рендеринга. В 2015 и 2016 годах появилось огромное количество популярных инструментов, таких как React Router, Redux и Mobx, для обработки маршрутизации и управления состоянием. В конце концов, React стала позиционироваться как библиотека, поскольку она была связана с реализацией определенного набора функций, а не являлась инструментом для решения отдельных задач.
Еще одной серьезной вехой в развитии React стал выпуск React Fiber в 2017 году. Fiber — это волшебным образом переписанный алгоритм рендеринга React. Полная переработка части React, которая практически ничего не изменила в общедоступном API, позволила сделать React более современной и производительной, не затрагивая пользователей.
Совсем недавно, в 2019 году, вышел Hooks — новый способ добавления и совместного использования логики с отслеживанием состояния между компонентами. Мы также застали выпуск Suspense — способа оптимизации асинхронного рендеринга с помощью React.
В будущем мы обязательно увидим еще больше изменений, но одной из причин успеха React является сильная команда, которая работала над проектом на протяжении многих лет. Эта команда амбициозна, но осторожна, продвигает дальновидные оптимизации, постоянно учитывая влияние любых изменений на библиотеку, которые будут каскадно распространяться по сообществу.
В React и связанные с ним инструменты могут быть внесены критические изменения. Поэтому будущие версии этих инструментов могут нарушить работоспособность некоторых примеров кода в этой книге. Но вы все равно сможете ознакомиться с этими примерами. Мы предоставим точную информацию о версии в файле package.json, чтобы вы могли установить пакеты.
Также вы можете следить за изменениями в официальном блоге React по адресу facebook.github.io/react/blog. О выпуске новых версий React чтайте в блоге основной команды ее разработчиков и журналах изменений. Блог переводится на все большее число языков, локальные версии документов находятся на странице сайта документации по адресу reactjs.org/languages.
Изменения во втором издании книги
Это второе издание книги. Мы сочли важным обновить книгу, потому что React значительно изменился за последние несколько лет. Мы сосредоточимся на передовых методах, которые отстаивает команда React, но упомянем и устаревшие функции. Код, написанный на React много лет назад с использованием старых стилей, все еще хорошо работает и должен поддерживаться. Мы будем отмечать устаревшие функции на боковой панели.
Работа с файлами
В этом разделе мы обсудим, как работать с файлами для этой книги и как установить некоторые полезные инструменты React.
Файловый репозиторий
В репозитории GitHub для этой книги (github.com/moonhighway/learning-react) приведены все файлы кода, систематизированные по главам.
React Developer Tools
Мы настоятельно рекомендуем установить React Developer Tools для работы с React. Эти инструменты доступны как расширение браузера для Chrome и Firefox и как отдельное приложение для использования с Safari, IE и React Native. После установки инструментов разработчика вы сможете просматривать дерево компонентов React, их свойства, сведения об их состоянии и даже сайты, используемые React в настоящее время в производственной среде. Это по-настоящему полезно при отладке и изучении проектов на основе React.
Чтобы установить эти инструменты, перейдите на репозиторий GitHub (oreil.ly/5tizT). Там вы найдете ссылки на расширения для Chrome (oreil.ly/Or3pH) и Firefox (oreil.ly/uw3uv).
После установки React Developer Tools вы увидите, какие сайты используют React, с помощью загорающегося значка на панели инструментов браузера (рис. 1.1).
Рис. 1.1. Просмотр React Developer Tools в Chrome
Когда вы откроете React Developer Tools, появится новая вкладка под названием React (рис. 1.2). Нажав на нее, вы увидите компоненты, составляющие просматриваемую страницу.
Рис. 1.2. Проверка DOM с помощью React Developer Tools
Установка Node.js
Node.js — это среда выполнения JavaScript, используемая для создания полнофункциональных приложений. У Node открытый исходный код, и ее можно установить на Windows, macOS, Linux и другие платформы. Мы будем использовать Node в главе 12 при сборке сервера.
У вас должен быть установлен Node, но вам не обязательно быть экспертом по Node, чтобы использовать React. Если вы не уверены, что на вашем компьютере установлен Node.js, откройте окно терминала или командной строки и введите команду:
node -v
После запуска этой команды вы должны увидеть номер версии Node, желательно 8.6.2 или выше. Если вы увидите сообщение об ошибке Command not found, значит, Node.js не установлен. Это легко исправить, установив Node.js с сайта проекта (nodejs.org). Просто выполните указания по установке, и, когда вы снова введете команду node -v, то увидите номер версии.
npm
Вместе с Node.js автоматически установится npm — менеджер пакетов Node. В сообществе JavaScript инженеры совместно используют проекты с открытым исходным кодом, чтобы избежать необходимости самостоятельно переписывать фреймворки, библиотеки или вспомогательные функции. Сам React — это пример прикладной библиотеки npm. В этой книге мы будем использовать npm для установки множества пакетов.
Большинство проектов JavaScript, которые можно встретить сегодня, содержат множество файлов и, в числе прочего, файл package.json. В нем описан проект и его зависимости. Если вы запустите команду npm install в папке, содержащей файл package.json, npm установит все пакеты, перечисленные в проекте.
Если вы начинаете собственный проект с нуля и хотите включить зависимости, просто выполните команду:
npm init -y
Эта команда инициализирует проект и создаст файл package.json. После этого вы сможете установить свои зависимости с помощью npm. Чтобы установить пакет с помощью npm, запустите команду:
npm install имя-пакета
Чтобы удалить пакет с помощью npm, запустите команду:
npm remove имя-пакета
Yarn
Альтернативой npm является Yarn. Этот менеджер пакетов был выпущен в 2016 году Facebook в сотрудничестве с Exponent, Google и Tilde. Он помогает Facebook и другим компаниям надежно управлять своими зависимостями. Если вы знакомы с рабочим процессом npm, разобраться с Yarn не составит для вас труда. Сначала установите Yarn глобально с помощью npm:
npm install -g yarn
После этого вы будете готовы к установке пакетов. При установке зависимостей из pack.json вместо команды npm install вы можете запустить команду run yarn.
Чтобы установить конкретный пакет с помощью Yarn, запустите команду:
yarn add имя-пакета
Для удаления зависимости используйте соответствующую команду:
yarn remove имя-пакета
Yarn используется в рабочем процессе Facebook и входит в такие проекты, как React, React Native и Create React App. В проекте, использующем Yarn, есть файл yarn.lock. Чтобы установить все зависимости такого проекта, вместо npm install наберите yarn.
Теперь, когда ваша среда для разработки React настроена, вы готовы приступить к изучению React. В главе 2 мы познакомимся с новейшим синтаксисом JavaScript, который чаще всего встречается в коде React.
Глава 2. JavaScript для React
С момента своего появления в 1995 году JavaScript претерпел множество изменений. Поначалу он использовался для интерактивных элементов веб-страницы: нажатия кнопок, проверки наведения, проверки формы и т.д. Позже JavaScript стал надежнее благодаря появлению технологий DHTML и AJAX. Сегодня, когда есть Node.js, он стал настоящим языком программирования, который используется для создания полнофункциональных приложений. JavaScript везде.
Эволюцией JavaScript руководили представители компаний, использующих его, поставщики браузеров и лидеры сообщества. Комитет, отвечающий за изменения в JavaScript на протяжении многих лет, — Европейская ассоциация производителей компьютеров (ECMA). Изменения в языке инициируются сообществом и исходят из предложений, написанных членами сообщества. Кто угодно может направить свое предложение в комитет ECMA (https://tc39.es/process-document/). Обязанность комитета ECMA — заниматься этими предложениями: определять их приоритеты и решать, какие из них будут включены в спецификацию.
Первый выпуск ECMAScript произошел в 1997 году под названием ECMAScript1. За ним в 1998 году последовал ECMAScript2. ECMAScript3 вышел в 1999 году, и в нем появились регулярные выражения, обработка строк и многое другое. Процесс согласования ECMAScript4 превратился в хаотичный политический беспорядок, и выпуск так и не состоялся. В 2009 году вышел ECMAScript5 (ES5), в котором были такие функции, как новые методы массива, свойства объектов и поддержка библиотеки для JSON.
С тех пор согласования происходят активнее. После выпуска ES6 или ES2015 в 2015 году новые функции JavaScript выпускаются ежегодно. Все, что является частью стадии предложения, обычно называется ESNext — другими словами, следующий элемент, который будет частью спецификации JavaScript.
Предложения проходят через четко определенные этапы: от этапа 0, на котором находятся новейшие предложения, до этапа 4, на котором представлены готовые функции. Когда предложение начинает проходить эти этапы, поставщики браузеров, такие как Chrome и Firefox, должны реализовать соответствующие функции. Например, при появлении ключевого слова const (подробнее об этом позже в этой главе), поставщики браузеров внесли соответствующие изменения для его поддержки, чтобы иметь возможность использовать его в коде JavaScript.
Многие функции, которые мы обсудим в этой главе, уже поддерживаются новейшими браузерами, но мы также расскажем, как транспилировать код JavaScript, то есть преобразовать новый синтаксис в более старый синтаксис, который понимает браузер. В таблице совместимости (oreil.ly/oe7la) можно найти много информации о последних функциях JavaScript и степени их поддержки браузерами.
В этой главе мы покажем весь синтаксис JavaScript, который будем использовать в книге. Эти базовые знания синтаксиса JavaScript помогут вам в работе с React. Если вы еще не перешли на последнюю версию синтаксиса, сейчас самое время сделать это. Если вы уже знакомы с новейшими языковыми функциями, переходите к следующей главе.
Объявление переменных
До появления ES2015 объявить переменную можно было только с помощью ключевого слова var. Теперь у нас есть несколько вариантов объявления, обеспечивающих более широкие функциональные возможности.
Ключевое слово const
Константа — это переменная, которую нельзя переопределить. После ее объявления вы не можете изменить ее значение. Такие переменные часто используются в JavaScript. Как и в других языках, в JavaScript константы появились с выходом ES6.
До начала использования констант все переменные можно было переопределять:
var pizza = true;
pizza = false;
console.log(pizza); // false
Значение переменной, объявленной константой, переопределить нельзя, и при подобной попытке на консоль будет выведена ошибка (рис. 2.1):
const pizza = true;
pizza = false;
Рис. 2.1. Попытка переопределить константу
Ключевое слово let
В современном JavaScript есть область видимости лексических переменных. Мы создаем блоки кода с помощью фигурных скобок ({}). В функциях эти фигурные скобки закрывают область видимости любой переменной, объявленной с помощью var. В то же время вспомните инструкции if…else. Если до настоящего момента вы работали на других языках программирования, то можете предположить, что в этих блоках блокируется и область видимости переменных. Но это не так.
Если переменная создается внутри блока if…else, она не будет привязана к блоку:
var topic = "JavaScript";
if (topic) {
var topic = "React";
console.log("block", topic); // block React
}
console.log("global", topic); // global React
Переменная topic внутри блока if переопределяет значение topic вне блока.
При наличии ключевого слова let мы можем ограничить переменную любым блоком кода. Использование let защищает значение глобальной переменной:
var topic = "JavaScript";
if (topic) {
let topic = "React";
console.log("block", topic); // React
}
console.log("global", topic); // JavaScript
Значение переменной topic не переопределяется вне блока.
Еще одна область, где фигурные скобки не блокируют область видимости переменной, — циклы for:
var div,
container = document.getElementById("container");
for (var i = 0; i < 5; i++) {
div = document.createElement("div");
div.onclick = function() {
alert("This is box #" + i);
};
container.appendChild(div);
}
В этом цикле мы создаем пять блоков div, которые появятся внутри общего контейнера. Каждому div назначается обработчик события щелчка onclick, который создает окно с отображением индекса. Объявление переменной i в цикле for создает глобальную переменную с именем i, а затем выполняет итерацию по ней, пока ее значение не достигнет 5. Когда вы щелкаете по любому из этих полей, появляется сообщение, что i равно 5 для всех div, потому что текущее значение глобального i равно 5 (рис. 2.2).
Рис. 2.2. Переменная i равна 5 в каждом поле
Объявление счетчика цикла i с помощью let вместо var блокирует область видимости переменной i. Теперь щелчок по любому окну отобразит значение для i, которое было привязано к итерации цикла (рис. 2.3):
const container = document.getElementById("container");
let div;
for (let i = 0; i < 5; i++) {
div = document.createElement("div");
div.onclick = function() {
alert("This is box #: " + i);
};
container.appendChild(div);
}
Область видимости переменной i защищена оператором let.
Рис. 2.3. Ограничение области действия переменной i с помощью оператора let
Шаблонные строки
Шаблонная строка — это альтернатива конкатенации строк. Она позволяет вставлять переменные в строку. Также ее называют шаблоном литерала или строковым шаблоном.
Традиционная конкатенация строк — это использование знака + для создания строки со значениями переменных и строк:
console.log(lastName + ", " + firstName + " " + middleName);
С помощью шаблона мы можем создать одну строку и вставить значения переменных, заключив их в ${ }:
console.log(`${lastName}, ${firstName} ${middleName}`);
Любой код JavaScript, возвращающий значение, может быть добавлен в шаблонную строку между ${ и }.
Шаблонные строки учитывают пробелы, что упрощает создание шаблонов электронной почты, примеров кода или чего-либо еще, что содержит пробелы. Таким образом вы можете использовать шаблонную строку, занимающую несколько строк, не разбивая код:
const email = `
Hello ${firstName},
Thanks for ordering ${qty} tickets to ${event}.
Order Details
${firstName} ${middleName} ${lastName}
${qty} x $${price} = $${qty*price} to ${event}
You can pick your tickets up 30 minutes before the show.
Thanks,
${ticketAgent}
`
Раньше, чтобы использовать HTML-строку непосредственно в коде JavaScript, нужно было прописывать ее целиком в одной строке. Теперь, когда пробелы распознаются как текст, вы можете вставить отформатированный код HTML, легкий для чтения и понимания:
document.body.innerHTML = `
<section>
<header>
<h1>The React Blog</h1>
</header>
<article>
<h2>${article.title}</h2>
${article.body}
</article>
<footer>
<p>copyright ${new Date().getYear()} | The React Blog</p>
</footer>
</section>
`;
Обратите внимание, что в этот код можно добавить переменные для заголовка страницы и текста статьи.
Создание функций
Чтобы с помощью JavaScript выполнить задачу повторно, используйте функцию. Рассмотрим некоторые варианты синтаксиса, которые можно использовать для создания функции, и содержание функций.
Объявление функций
Объявление (или определение) функции начинается с ключевого слова function, за которым следует имя функции: logCompliment. Операторы JavaScript, являющиеся частью функции, определяются между фигурными скобками:
function logCompliment() {
console.log("You're doing great!");
}
Когда вы объявили функцию, ее можно вызвать, чтобы увидеть, как она выполняется:
function logCompliment() {
console.log("You're doing great!");
}
logCompliment();
После вызова этой функции вы увидите в консоли комплимент.
Функциональные выражения
Вместо объявления функции можно использовать функциональное выражение. В этом случае функция создается как переменная:
const logCompliment = function() {
console.log("You're doing great!");
};
logCompliment();
Результат тот же — в консоли появится комплимент.
При выборе между объявлением функции и функциональным выражением помните, что первые записываются в память, а вторые — нет. Другими словами, вы можете вызвать функцию до того, как объявите ее, но не можете вызвать функцию, созданную с помощью функционального выражения, так как это вызовет ошибку. Например:
// Invoking the function before it’s declared
hey();
// Function Declaration
function hey() {
alert("hey!");
}
Такой код сработает. Вы увидите, что в браузере появится предупреждение. Здесь функция поднимается и перемещается в верхнюю часть области видимости файла. Выполнение того же кода с функциональным выражением вызовет ошибку:
// Invoking the function before it's declared
hey();
// Function Expression
const hey = function() {
alert("hey!");
};
TypeError: hey is not a function
Это примитивный пример, но ошибка TypeError может иногда возникать при импорте файлов и функций в проект. Если она появилась, вы всегда можете выполнить рефакторинг кода и использовать объявление.
Передача аргументов
Сейчас функция logCompliment не принимает аргументы или параметры. Чтобы предоставить функции динамические переменные, мы можем передать именованные параметры функции, просто добавив их в круглых скобках. Начнем с добавления первой переменной Name:
const logCompliment = function(firstName) {
console.log(`You're doing great, ${firstName}`);
};
logCompliment("Molly");
Теперь, когда мы вызовем функцию, значение переменной firstName будет добавлено в консоль.
Можно продолжить улучшать код, создав дополнительный аргумент с именем message. Теперь мы не будем жестко кодировать сообщение, а передадим динамическое значение в качестве параметра:
const logCompliment = function(firstName, message) {
console.log(`${firstName}: ${message}`);
};
logCompliment("Molly", "You're so cool");
Возвращаемое значение функции
Наша функция logCompliment пишет комплимент в консоль, но чаще мы будем использовать функцию для возврата значения. Добавим к этой функции оператор return. Он будет указывать значение, возвращаемое функцией. Переименуем функцию в createCompliment:
const createCompliment = function(firstName, message) {
return `${firstName}: ${message}`;
};
createCompliment("Molly", "You’re so cool");
Чтобы проверить, правильно ли работает функция, оберните ее вызов в console.log:
console.log(createCompliment("You're so cool", "Molly"));
Параметры по умолчанию
Многие языки, включая C++ и Python, позволяют разработчикам задавать значения по умолчанию для аргументов функций. Значения по умолчанию появились в спецификации ES6, согласно которой в случае, если значение для аргумента не указано, используется значение по умолчанию.
Например, можно настроить строки по умолчанию для параметров name и activity:
function logActivity(name = "Shane McConkey", activity = "skiing") {
console.log(`${name} loves ${activity}`);
}
Если функции logActivity не будут переданы аргументы, она сработает как надо, используя значения по умолчанию. Значения аргументов по умолчанию могут быть любого типа, не обязательно строками:
const defaultPerson = {
name: {
first: "Shane",
last: "McConkey"
},
favActivity: "skiing"
};
function logActivity(person = defaultPerson) {
console.log(`${person.name.first} loves ${person.favActivity}`);
}
Стрелочные функции
Стрелочные функции — это еще одно полезное нововведение ES6. С помощью стрелочных функций вы можете создавать функции без использования ключевого слова function. Вам также часто не нужно использовать ключевое слово return. Рассмотрим функцию, которая принимает аргумент firstName и возвращает строку, превращая любого человека в лорда:
const lordify = function(firstName) {
return `${firstName} of Canterbury`;
};
console.log(lordify("Dale")); // Dale of Canterbury
console.log(lordify("Gail")); // Gail of Canterbury
С помощью стрелочной функции мы можем значительно упростить синтаксис:
const lordify = firstName => `${firstName} of Canterbury`;
Эта стрелка создает полноценное объявление функции в одной строке. Ключевое слово function не используется. Мы также убрали слово return, потому что стрелка указывает на то, что нужно вернуть. Причем, если функция принимает только один аргумент, можно убрать скобки вокруг аргументов.
При использовании более одного аргумента нужны круглые скобки:
// Typical function
const lordify = function(firstName, land) {
return `${firstName} of ${land}`;
};
// Arrow Function
const lordify = (firstName, land) => `${firstName} of ${land}`;
console.log(lordify("Don", "Piscataway")); // Don of Piscataway
console.log(lordify("Todd", "Schenectady")); // Todd of Schenectady
Функцию удалось выразить в одной строке, поскольку возвращению подлежал результат только одного выражения. Если тело функции состоит более чем из одной строки, то его следует заключить в фигурные скобки:
const lordify = (firstName, land) => {
if (!firstName) {
throw new Error("A firstName is required to lordify");
}
if (!land) {
throw new Error("A lord must have a land");
}
return `${firstName} of ${land}`;
};
console.log(lordify("Kelly", "Sonoma")); // Kelly of Sonoma
console.log(lordify("Dave")); // ! ОШИБКА JAVASCRIPT
Инструкции if…else заключены в квадратные скобки, но синтаксис стрелочной функции полезен и для них тоже.
Возврат объектов
Что произойдет, если вы захотите вернуть объект? Рассмотрим функцию с именем person, которая создает объект на основе параметров, пер
