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

Функции

@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 Declaration
function sum(num1, num2) {
return num1 + num2
}

// Function Expression
const sum = function (num1, num2) {
return num1 + num2
}

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

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

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

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

myMessage() // вызов функции

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

Функции с return

Return

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

Интерактивный редактор
Результат
Loading...

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

Запомните!

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

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

Matryoschka

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

Интерактивный редактор
Результат
Loading...

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

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

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

couple

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

function addThree(x) {
return x + 3
}

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

addThree(5)

Ответ: 8

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

Пример кода:

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

Интерактивный редактор
Результат
Loading...

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

Dedefencce

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

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

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

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

Пример:

Mathematics

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

Интерактивный редактор
Результат
Loading...

Когда мы вызовем эту функцию⚙️, мы должны будем задать ей в качестве аргументов два 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, то функция⚙️ просто не запустится!

Интерактивный редактор
Результат
Loading...

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

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

Интерактивный редактор
Результат
Loading...

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

Math.floor()

Floor

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

Math.floor(10.7) // 10
Math.floor(4.8) // 4
Math.floor(14.19723) // 14
Интерактивный редактор
Результат
Loading...

Math.round()

rounding

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

Math.round(10.7) // 11
Math.round(4.8) // 5
Math.round(14.19) // 14
Интерактивный редактор
Результат
Loading...

.toUpperCase() / .toLowerCase()

Words

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

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

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

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

Интерактивный редактор
Результат
Loading...

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

Интерактивный редактор
Результат
Loading...

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

Mix

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

Интерактивный редактор
Результат
Loading...

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

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 с левой стороны!

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

Интерактивный редактор
Результат
Loading...

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

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

only one

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

Интерактивный редактор
Результат
Loading...

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

no

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

Интерактивный редактор
Результат
Loading...

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

Самовыполняющиеся функции(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, где можно реализовать нужный вам функционал.

EnglishMoji!

Проблемы?

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()

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

EnglishMoji!

Ссылки:

  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

🖋 🐛 🎨