Перейти к основному содержимому

Функции

@serverSerrverlesskiy

Функции⚙️ нужны, чтобы не повторять один и тот же код📟 во многих местах программного алгоритма. В современных программах функции являются основными «блоками».

Don’t repeat yourself#

DRY (рус. не повторяйся) — это принцип разработки программного обеспечения, нацеленный на снижение повторения информации различного рода, особенно в системах со множеством слоёв абстрагирования. Функции это как раз тот тип данных, который служит этому принципу разработки.

Видео#

Выбор имени функции#

Функция⚙️ – это действие! Поэтому имя функции обычно является глаголом. Оно должно быть простым, точным и описывать действие функции, чтобы программист, который будет читать код📟 , получил верное представление о том, что делает функция.

Choice

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

Например, функции⚙️, начинающиеся с "show" обычно что-то показывают.

Функции⚙️, начинающиеся с…

"get.."     – возвращают🔄 значение,"calc.."    – что-то вычисляют,"create.."  – что-то создают,"check.."   – что-то проверяют и возвращают🔄 логическое значение, и т.д.

Примеры таких имён:

showMessage(..)     // показывает сообщениеgetAge(..)          // возвращает возраст (в каком либо значении)calcSum(..)         // вычисляет сумму и возвращает результатcreateForm(..)      // создаёт форму (и обычно возвращает её)checkPermission(..) // проверяет доступ, возвращая true/false

Благодаря префиксам, при первом взгляде на имя функции становится понятным что делает её код📟 , и какое значение она может возвращать🔄.

В любом случае вы и ваша команда должны точно понимать, что значит префикс и что функция⚙️ с ним может делать, а чего не может.

Сверхкороткие имена функций⚙️

Имена функций⚙️, которые используются очень часто, иногда делают сверхкороткими.

Например, во фреймворке jQuery есть функция⚙️ с именем $. В библиотеке Lodash основная функция⚙️ представлена именем нижнего подчеркивания _

Это исключения. В основном имена функций должны быть в меру краткими и описательными 🖊️ .

Функции === Комментарии#

cut

Функции⚙️ должны быть короткими и делать только что-то одно. Если это что-то большое, имеет смысл разбить функцию⚙️ на несколько меньших. Cледовать этому правилу определённо полезно, особенно в командной работе.

Небольшие функции⚙️ не только облегчают тестирование и отладку – само существование таких функций⚙️ выполняет роль хороших комментариев.

Объявление функции#

Announcement

Для создания функций⚙️ мы используем объявление🗣️ функции⚙️.

Вначале идёт ключевое🗝️ слово function, после него имя функции⚙️, затем список параметров в круглых скобках через запятую (в приведённом примере он пустой) и, наконец, код📟 функции⚙️, также называемый «телом функции⚙️», внутри фигурных скобок.

Это классический способ написания 🖊️ функций называется Function Declaration.

Синтаксис📖:

function имя(параметры) {  ... тело ...  // Алгоритм  return итоговоеЗначение}
Внимание !

Если return не указан, вместо него функция⚙️ возвращает🔄 undefined и по умолчанию считается, что функция⚙️ заканчивается пустой заглушкой return, выполняя лишь внутренние скрипты.

В JavaScript создавать функцию⚙️ кроме классического способа Function Declaration можно ещё посредством:

  • Function Expression
  • Arrow Function(стрелочные функции)

Function Expression - это объявление🗣️ функции⚙️, которая является частью какого-либо выражения (например, присваивания).

const имя = function (параметры) {  // инструкции}

Сравним Function Declaration и Function Expression:

// Function Declarationfunction sum(num1, num2) {  return num1 + num2}
// Function Expressionconst sum = function (num1, num2) {  return num1 + num2}

C синтаксисом Arrow Function (стрелочные функции) мы познакомимся позже в этой главе. Это упрощенный и самый часто используемый способ написания 🖊️ функций.

Вызов функции#

Чтобы вызвать функцию⚙️, исполнить ее, необходимо обраться к ней по имени и после указать две круглые скобки myMessage():

// объявление функцииfunction myMessage() {  let str = 'Hello!'}
myMessage() // вызов функции

Обратите внимание, что в данном примере функция⚙️ вызывается, но не возвращает🔄 значения.

Функции с return#

Return

Чтобы функция⚙️ что-то возвращала🔄, в ее теле указывают ключевое🗝️ слово return (точка выхода или возврата🔄 результата) и возвращаемое🔄 значение.

Интерактивный редактор
Результат
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Экспериментируйте, поставьте вместо исходной цифры9️⃣ количество ваших лет.

Запомните!

Объявив🗣️ функцию⚙️, а затем вызвав её, мы в любом случае получаем результат выполнения алгорима (заранее описанных действий) в теле функции⚙️.

Функция внутри другой функции#

Matryoschka

Внутри функции⚙️ можно размещать другие функции⚙️. Например функция⚙️ showNumberFive() вернет цифру 5️⃣, значение которой выведем через вызов функции⚙️ learnJavaScript().

Интерактивный редактор
Результат
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Давайте рассмотрим всё это шаг за шагом:

  • Ключевое слово function указывает интерпретатору на то, что следующий далее код является пользовательским, то есть созданной Вами, а не встроенной функцией.
  • Написанное 🖊️ верблюжьимРегистром showNumberFive является пользовательским названием этой функции. Для интерпретатора в общем‑то нет разницы, как именно называется эта функция, но лучше давать функциям названия, из которых чётко следует, что именно они делают.
  • () скобки обязательный элемент любой функции. Порой в скобки заключается одна, две и более переменных 🔔 , в нашем случае в скобках нет ничего.
  • В фигурные скобки {} должно быть заключено само тело функции - суть алгоритма программы.
  • Само тело функции принято выделять отступами справа (при помощи клавиши TAB). Это не обязательно для выполнения программы, но обязательно для коллективной работы, поскольку значительно облегчает читабельность кода.
  • Ключевое слово return означает, что всякий раз когда мы вызываем эту функцию, значение будет передано, то есть «возвращено», интерпретатору, поэтому оно называется «возвращаемое значение функции».

Параметры и аргументы функций#

couple

Объявим🗣️ ещё одну функцию⚙️, но уже с переменной в скобках. Когда при функции⚙️ в скобках есть ещё и переменная 🔔 , мы будем называть её формальным параметром (заранее неопределенным, мы же не знаем чему будет равно значение x). У большей части функций⚙️ будут параметры, но иногда нам встретятся функции⚙️ и без них.

function addThree(x) {  return x + 3}

После объявления🗣️ функции⚙️ и её параметров, мы можем вызвать (запустить) «блок кода» с конкретным значением (например: 5). Такое присваивание значения мы будем называть аргументом:

addThree(5)
Ответ: 8

В нашем примере цифра 5️⃣ является аргументом функции - конкретное передаваемое значение внутрь функции⚙️. Как только наша функция⚙️ получила свой аргумент, она тот час же присвоила его значение переменной x (которое является формальным параметром нашей функции⚙️).

Пример кода📟:#

Экспериментируйте 👇:

Интерактивный редактор
Результат
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Разница между параметрами и аргументами#

Dedefencce

Состоит в следующем:

аргумент — это конкретное значение, которое мы «передали» функции⚙️ при её вызове в скобочках. Это значение или набор значений присваивается формальным параметрам этой функции⚙️.

параметр — это название переменной 🔔 , указанное в объявлении функции и ожидающее присваивания конкретного значения в момент вызова функции. Присваиваемое параметру значение и есть аргумент.

Множество программистов используют эти термины (аргумент и параметр) взаимозаменяемо, но мы то разницу поняли.

Пример:#

Mathematics

Давайте попробуем объявить🗣️ функцию⚙️ расчета по двум сторонам периметра прямоугольника, параметры которой будут ожидать два 2️⃣ числа в качестве своего значения. Обратите внимание, что если у вас более одного параметра, то их необходимо отделять друг от друга запятой.

Интерактивный редактор
Результат
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Когда мы вызовем эту функцию⚙️, мы должны будем задать ей в качестве аргументов два 2️⃣ числа - значения сторон конкретного прямоугольника (отделённых друг от друга запятой):

calcPrym(7, 8)
Ответ: 30

О, большое спасибо, компьютер🖥️!

Передавая функции⚙️ уже другие значения, она сразу посчитает периметры и других прямоугольников.

Еще раз!

Одно из главных предназначений функций⚙️ - это избавление от дублирования кода📟 и возможности их многократного вызова для решения ваших задач.

Встроенные функции#

Integration

console.log()#

Secret

Cпособ вывести (логгировать) в консоль отладочную информацию только для разработчиков (пользователи её увидеть не смогут; как вы знаете, большинство людей не подозревает даже о существовании самой консоли, а не то что о секретных «логах»!).

Нажмите в браузере Google Chrome сочетание клавиш🎹 Ctrl + Shift + I и на вкладке Console наберите:

console.log('Совершенно секретно! Только для разработчиков!')

Как явствует из названия функции⚙️, мы выводим в консоль «лог» (то есть информацию о работе системы); этой доброй суперспособностью разработчики пользуются постоянно. Скажем, когда у вас были сообщения💬 об ошибках🙅‍♂️, вы видели в консоли именно это — интерпретатор выдавал («логгировал») в консоль информацию о работе системы, чтобы вы могли прочесть и исправить нужные параметры. Словом, очень полезная штука. Вам не раз и не два 2️⃣ придётся прибегнуть к помощи console.log(), так что запомните эту функцию⚙️!

Построчно введите следующий команды:

console.log('Выведите любое сообщение, какое пожелаете')console.log('просто введите сюда какую‑нибудь ' + 'строку')let myMessage = 'А ещё в качестве аргумента можно использовать переменные!'console.log(myMessage)

Пока вы играете с логами в консоли, я покажу вам ещё один трюк. Его мне поможет выполнить наш старый добрый друг — обратный слэш!

При его содействии \n можно разбивать свой код📟 по строчкам. Попробуйте сами! Построчно введите следующий команды:

console.log('Можно разбить любой текст\n на многие\n строчки.')console.log('Вот первая.\nА вот 2‑я.\n3‑я\n4‑я\n5‑я!')

Эта штука с \n вообще‑то имеет множество полезных практических применений. Например, можно нарисовать в кодировке📟 ASCII мишку в консоли. Набирайте в консоли:

console.log(" c___c\n /. .\\\n \\_T_/\n /' '\\\n(/ . \\)\n/';‑;'\\\n()/ \\()")

Понятно, почему так выходит?

Каждый \n задаёт переход на новую строчку, так что последующие символы как бы «спускаются» ниже, и вуаля! Мы с вами внесли серьёзный вклад в развитие общества нарисовав премилого мишку!

Math.random()#

Random

Ещё одна полезная встроенная функция⚙️: Math.random(). Обратите внимание, что, в отличие от предыдущих, название этой функции⚙️ начинается с прописной буквы 'M'. Тому есть причины, приписные и строчные буквы в JavaScript различаются по внутренним кодам📟 . В каждом языке👅, будь то русский, английский или JavaScript, всегда есть какие‑то исключения из правил. Вот это — одно из них. Все прочие переменные и функции⚙️, которые вы встретите, следует писать со строчной буквы. Помните, что регистр — это важная штука и, если название Math.random() начать с math, то функция⚙️ просто не запустится!

Интерактивный редактор
Результат
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Каждый раз новое число! Функция⚙️ выдаёт случайное вещественное число между 0 и 1.

Давайте модернизируем уравнение 👇 :

Интерактивный редактор
Результат
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Если вам вдруг понадобится случайное число в диапазоне 0 до 100, то эта функция⚙️ вам очень пригодится.

Math.floor()#

Floor

Эта функция⚙️ требует число или цифру5️⃣ в качестве аргумента и получив округляет их в меньшую сторону.

Math.floor(10.7) // 10Math.floor(4.8) // 4Math.floor(14.19723) // 14
Интерактивный редактор
Результат
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Math.round()#

rounding

Math.round(x) же наоборот до ближайшего целого, без каких‑либо десятых долей после запятой.

Math.round(10.7) // 11Math.round(4.8) // 5Math.round(14.19) // 14
Интерактивный редактор
Результат
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

.toUpperCase() / .toLowerCase()#

Words

Вы КОГДА‑НИБУДЬ замечали, ЧТО в НЕКОТОРЫХ сообщениях💬 ЧЕРЕСЧУР много СЛОВ, выделенных ПРОПИСНЫМИ буквами? Что ж, именно этому мы сейчас и научимся.

Вы можете запросто взять любую строку и вернуть её новую версию через прописные 🖊️ буквы (то есть в верхнем / нижнем регистре), используя встроенный метод .toUpperCase() / .toLowerCase(). И, соответственно, можно вернуть любую строку в строчных буквах (то есть в нижнем регистре).

Помните, что метод — это всего лишь функция, прикреплённая к описанному 🖊️ объекту, в данном случае к универсальной строке.

Работает это так, .toUpperCase() в прописные 🖊️ буквы 👇 :

Интерактивный редактор
Результат
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

А .toLowerCase() в строчные:

Интерактивный редактор
Результат
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

А теперь всё вместе!#

Mix

Попробуем замешать небольшой коктейль из только что выученных функций⚙️.

Интерактивный редактор
Результат
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Надеюсь, ничего из сделанного не оказалось для вас трудной задачкой, и вы всё поняли. Если нет, то не торопясь просмотрите каждую строчку и комментарии к ней.

Arrow Function (стрелочные функции)#

Arrow

Существует ещё более простой и краткий синтаксис📖 для создания функций⚙️, который часто лучше, чем другие виды.

Итак, классический вариант записи 🖊️ функции⚙️:

Function Declaration:

function func1(arg1, arg2, ...argN) {  return expression}

Function Expression:

let func1 = function (arg1, arg2, ...argN) {  return expression}

Такой код📟 создаёт функцию⚙️ func1 с аргументами arg1, .. argN и вычисляет expression - набор действий алгоритма с правой стороны с их использованием, возвращая🔄 результат вычислений через ключевое🗝️ слово return.

Теперь давайте применим стрелочные функции - Arrow functions:

let func1 = (arg1, arg2, ...argN) => expression

Другими словами, это более короткий вариант такой записи 🖊️ .

Во как !

=> нам заменила { return ... } с правой стороны и позволила не писать🖊️ ключевое 🗝️ слово function с левой стороны!

Давайте взглянем на конкретный пример 👇 :

Интерактивный редактор
Результат
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Оба варианта правильны! function практически не используется в современом написании🖊️ кода📟 , поэтому используйте "стрелочные функции⚙️"!

Только один аргумент#

only one

Если у нас только один аргумент, то круглые скобки вокруг параметров можно опустить, сделав запись ещё короче let num2 = n => n * 2

Интерактивный редактор
Результат
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Если нет аргументов#

no

Если нет аргументов, то чтобы не получилось двойное ==, указываются пустые круглые скобки 👇 :

Интерактивный редактор
Результат
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

"Функции-стрелки" удобны и очень компактны!

Самовыполняющиеся функции(IIFE)#

Start

Immediately Invoked Function Expression - это JavaScript функция, которая выполняется сразу же после того, как она была определена. JavaScript позволяет создавать, кроме обычных и стрелочных, также и анонимные функции⚙️, выполняющие важную роль в JavaScript.

Анонимные функции#

Anonym

Если после function есть имя — функция⚙️ именованная, во всех остальных случая анонимная. Анонимные функции⚙️ зачастую создаются и сразу же запускаются. Еще одно важное отличие в том, что именованные функции⚙️ объявляются🗣️, а анонимные создаются при помощи оператора function.

Наберите в консоле Google Chrome следующий код:

(function (num1, num2) {  return num1 + num2})(7, 4)

Самовызывание создается скобками в конце функции⚙️, которые говорят интерпретатору, что эту функцию⚙️ необходимо запустить сразу.

Заключение#

conclusion

Поняв суть стрелочных и обычных функций⚙️, вы сможете передавать функции в объекты-переменные 🔔 и перестроить код📟 по модулям. Функции такого рода можно использовать также и для создания и возврата🔄 других функций⚙️. Тут речь уже заходит о замыкании, о котором мы поговорим в следующих сериях.

React Native#

Компоненты React Native - это строительные блоки библиотеки react-native, из которых мы создаём интерфейсы для приложений. Концептуально, компоненты похожи на JavaScript-функции. Самый простой способ объявить компонент – это написать JavaScript-функцию. Вспомнили пример из первой серии Hello world?

Усложним пример и создадим кнопку нажатие на которую будет вызывать функцию onPress, где можно реализовать нужный вам функционал.

Проблемы?#

Problem

Пишите в Discord или телеграмм чат, а также подписывайтесь на наши новости

JavaScript Camp

Вопросы#

question

Точка выхода или возврата результата в функции?

  1. Esc
  2. return
  3. Hello

Ключевое слово return внутри тела функции ___

  1. обязательна
  2. не обязательна
  3. по-разному

Дана функция

const addThree = x => x + 3
addThree(20)

Определите формальный параметр:

  1. 20
  2. x
  3. x + 3

Дана функция

const addThree = x => x + 3
addThree(20)

Определите аргумент:

  1. 20
  2. x
  3. x + 3

Для кого содержит информацию команда console.log?

  1. Пользователь
  2. Разработчик
  3. Интерпретатор JavaScript

Где встроенная функция?

  1. console.log()
  2. myMessage()
  3. return()

Какой синтаксис используют стрелочные функции?

  1. Вперед()
  2. =>
  3. go.Стрелка

Использование стрелочных функций позволяет?

  1. Писать код компакто и более безопасно
  2. Увеличивает структуру кода
  3. Позволяет использовать новые переменные

Самовыполняющаяся функция - это

  1. Функция, которая выполняется сразу же после того, как она была определена
  2. Встроенная функция в JavaScript
  3. Это обыкновенная процедура, выполняющая последовательность команд

Какие символы окружают тело функции?

  1. Фигурные скобки {и}
  2. ()
  3. =>

Какая аббревиатура используется для описания намерения хороших разработчиков избегать повторения подобных блоков кода снова и снова?

  1. D.R.Y. (Don't Repeat Yourself - Не повторяйся)
  2. R.Y. (Repeat Yourself - Повторить себя)

Если в функцию передается несколько значений, какой символ используется для их разделения?

  1. ,
  2. .
  3. /

Какая встроенная функция подходит для отправки секретных сообщений разработчикам (или себе во время отладки собственного веб-сайта), которые пользователи, вероятно, не увидят?

  1. console.log()
  2. Math.floor()
  3. Math.random()

Встроенная функция рандомизации возвращает значение больше ____, но меньше ____.

  1. 0 и 100(Math.random())
  2. 0 и 1(Math.random())
  3. 1 и 0(Math.random())

Какая встроенная функция округляет любое число до ближайшего целого?

  1. Math.floor()
  2. Math.max()
  3. Math.random()

Функция может быть заключена в другую функцию.

  1. false
  2. true

При оценке вызовов вложенных функций интерпретатор будет оценивать их изнутри.

  1. false
  2. true

Какой метод (функцию) вы можете использовать для преобразования строки в использование заглавных букв?

  1. toUpperCase()
  2. toLowerCase()
  3. Math.max()

Для того чтобы понять, на сколько вы усвоили этот урок, пройдите тест в мобильном приложении нашей школы по этой теме или в нашем телеграм боте.

Sumerian school

Ссылки:#

  1. MDN web docs - Function
  2. Learn.javascript.ru - Статья "Функции"
  3. Learn.javascript.ru - Статья "Функции-стрелки"
  4. Анонимные и самовыполняющиеся функции в JavaScript
  5. Developer.mozilla.org - Статья "Math"
  6. Developer.mozilla.org - Статья "Стрелочные функции"
  7. Basicweb.ru - Статья "JavaScript функции"
  8. Javascript.ru - Статья "Функции"
  9. Код для подростков: прекрасное руководство по программированию для начинающих, том 1: Javascript - Jeremy Moritz

Contributors ✨#

Thanks goes to these wonderful people (emoji key):


Dmitriy K.

📖

Dmitriy Vasilev

💵

Resoner2005

🐛 🎨 🖋

Navernoss

🖋 🐛 🎨

Become a Patron!