Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-26

1 <h2>Транскрипт урока</h2>

2 В прошлый раз мы упростили вычисление с помощью констант: мы создали константу для pi, и использовали её для вычисления площади поверхности разных планет. Таким образом мы сократили объём кода, но нам всё ещё требовалось множество повторений:

3 Строка кода называетсяинструкцией, в JavaScript инструкции должны заканчиваться точкой с запятой. Тут у нас две инструкции и нам нужно повторять всю формулу в каждой из них. Помните - мы не хотим, чтобы в наших программах что-то повторялось.

4 Было бы здорово, если бы у нас была какая-нибудь специфическая машина, которая вычисляет площадь поверхности любой сферы. Чтобы мы могли делать что-то подобное:

5 Чтобы можно было просто сказать ей: "эй, surfaceAreaCalculator, скажи мне площадь поверхности сферы с радиусом 3390" и она бы сразу давала ответ.

6 Отличные новости! Мы можем создавать подобные машины! Их называютфункциями, их можно представить в виде чёрных ящиков. Положите что-нибудь внутрь ящика, и она выплюнет что-то другое. В данном случае ящик surfaceAreaCalculator возьмёт одно число - радиус, а выплюнет другое - площадь поверхности.

7 В этом примере

8 мы вызываем ящик surfaceAreaCalculator, даём ему 3390 и получаем ответ. Этот ответ затем сохраняется в константе surfaceOfMars.

9 Важно понимать разницу между определением функции и её вызовом. То, что мы только что сделали, называется вызовом - мывызвалифункцию surfaceAreaCalculator, другими словами, мы предположили, что она уже существует и использовали её.

10 Но она должна существовать, так что нужно создать её перед тем, как использовать. Нам нужноопределитьфункцию surfaceAreaCalculator. Это определение функции:

11 Эта структура со скобками, стрелкой и фигурными скобками определяет функцию. Слово radius в скобках - то, как функция называет число, которое мы передаем в нее. Этопараметрфункции. Эта конкретная функция принимает одинаргумент, но другие функции могут принимать больше аргументов или вообще не принимать аргументов.

12 Фигурные скобки создаютблок. В JavaScript и других языках вы часто сталкиваетесь с блоками. Они создают группуинструкций, таким способом мы понимаем где функция начинается и заканчивается. Эта функция содержит всего одну инструкцию, она начинается с return, а дальше вы видите уже знакомую формулу.

13 Вы, возможно, уже догадались, что return заставляет ящик выплёвывать результат. Результат вычисления 4 * pi * radius * radius это то, что функциявозвращаетнам после того, как мы её вызываем.

14 Теперь нам нужно дать этой функции какое-нибудь название, чтобы по этому названию мы её вызывали. Мне захотелось назвать её surfaceAreaCalculator, но вы можете давать любой функции любое название. Есть определенные правила для названий: например, название не должно содержать пробелы и использовать некоторые специфические слова, как const, но в остальном и функции и константы можно называть почти как захочется.

15 Мы уже знаем как давать названия численным константам:

16 С функциями все точно также:

17 const, название, которое вы хотите, знак равенства и сама функция

18 Давайте теперь соберём всё вместе:

19 В верхней части - определение функции, а затем вызов функции.

20 Давайте заглянем внутрь коробки - что происходит, когда она вызывается с числом 3390 в качестве аргумента. return хочет возвратить результат, но он ещё не готов - в начале нужно произвести вычисление. В вычислении используется аргумент, так что вначале нужно заменить название radius на само значение, которое было передано в функцию при вызове, а затем уже выполнять умножения.

21 И функция возвращает число 144340776. Можно представить, что происходит снаружи, когда наша функция возвращает значение:

22 Теперь surfaceOfMars - это константа с конкретным числовым значением.

23 Давайте посмотрим на другой пример:

24 Эта функция принимает два числа и возвращает процент. Если вы дадите ей 40 и 80, она вернёт 50, потому что 40 это 50% от 80.

25 Как вы видите, когда есть несколько параметров, они разделяются запятыми.

26 Давайте выведем результат на экран:

27 Сегодня 16 декабря, и я хочу узнать, какой процент этого месяца уже прошёл. Посмотрите на код. Вначале мы напечатали строку с вопросом, а потом напечатали то, что возвращает функция percentageCalculator().

28 Важный момент: вызов функции может быть аргументом для других функций! Как работает функция console.log()? Она принимает аргумент и выводит его на экран. Мы использовали вызов функции percentageCalculator() КАК АРГУМЕНТ и это сработало. Почему? Потому что вначале вызывается наша функция percentageCalculator(), она возвращает результат. Затем с этим результатом как аргументом вызывается функция console.log(). В итоге результат работы percentageCalculator() выводится на экран.

29 Ок, я свою часть закончил. Теперь ваша очередь писать функции.

30 <h2>Дополнение к уроку</h2>

31 <h3>Способы записи функций</h3>

32 Кроме указанного в видео определения функции:

33 Существует несколько других. Например, если у вас функция-однострочник, то можно использовать сокращенный синтаксис:

34 Отличия от полного определения два: пропали фигурные скобки и инструкция return. Сокращенная запись функции делает возврат автоматически. Подразумевается, что внутри такой функции ровно одно выражение, которое вычисляется, и его результат сразу возвращается наружу.

35 Пример с двумя аргументами:

36 Так же можно определять функции, используя ключевое слово function:

37 или

38 Мы изучаем новый стандарт ES7 и используем стрелочные функции. Поэтому в наших курсах мы будем придерживаться такой () => {} формы записи по многим причинам. Во-первых, она лаконичнее, во-вторых, обладает одним важным свойством, которое будет изучено позже, ну а в-третьих, такой способ записи визуально стирает грань между функциями и данными, что очень пригодится нам в будущем.

39 Некоторые особенности такой формы записи вместо function выходят за рамки базовых курсов, вы о них узнаете в будущем. Если любопытно, то можете почитать статьи по запросу "стрелочные функции es6", например<a>https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions</a>или<a>https://habr.com/company/mailru/blog/213455/</a>.

40 <h3>Формальные и фактические параметры функции</h3>

41 Формальными параметрами(или простопараметрами) функции называются имена переменных вопределении функции. Например у функции const f = (a, b) => a - b; формальные параметры - это a и b.

42 - Фактические парамет��ы- это то, что былопередано в функциюв момент вызова. Например если предыдущую функцию вызвать так f(5, z), где const z = 8, то фактическими параметрами являются 5 и z. Результатом этого вызова будет число -3, а внутри функции на момент конкретного вызова параметр a становится равным 5, а b становится равным 8. Фактические параметры еще называютаргументамифункции.

42 + Фактические параметры- это то, что былопередано в функциюв момент вызова. Например если предыдущую функцию вызвать так f(5, z), где const z = 8, то фактическими параметрами являются 5 и z. Результатом этого вызова будет число -3, а внутри функции на момент конкретного вызова параметр a становится равным 5, а b становится равным 8. Фактические параметры еще называютаргументамифункции.

43 Как видите, нет никакой связи между именами формальных и фактических параметров. Более того, у фактических параметров вообще может не быть имен, как в примере выше, где мы сразу передали число 3 в функцию. Что имеет значение, так этопозиция. Во время вызова функции параметры должны передаваться в правильном порядке, и только тогда функция отработает, как предполагается.

44 <h3>Return</h3>

45 Вызов оператора return приводит к изменению течения программы. Последующие инструкции никогда не будут выполнены:

46 <h2>Выводы</h2>

47 <ul><li>Функции подобны специальным машинам, которые мы создаём, чтобы они выполняли что-нибудь для нас.</li>

48 <li>Функции можно представить в виде ящиков, которыепринимают что-тоичто-то выплёвывают.<ul><li>Функции могут приниматьаргументы.</li>

49 <li>И могутвозвращатьчто-то.</li>

50 </ul></li>

51 </ul>Вот пример определения и вызова функции:

52 Здесь radius - это параметр функции surfaceAreaCalculator.

53 Вы можете вызывать функцию и вкладывать вызов другой функции в качестве аргумента: