Функции

@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 (точка выхода или возврата результата) и возвращаемое значение.

Интерактивный редактор

function showNumberFive() {
  return 5
}

function showNumberFive() {
  return 5
}

Результат

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

Запомните!

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

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

Matryoschka

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

Интерактивный редактор

function learnJavaScript() {
  function showNumberFive() {
    return 5
  }
  return showNumberFive()
}

function learnJavaScript() {
  function showNumberFive() {
    return 5
  }
  return showNumberFive()
}

Результат

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

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

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

couple

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

function addThree(x) {
  return x + 3
}

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

addThree(5)

Ответ: 8

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

Пример кода:

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

Интерактивный редактор

function learnJavaScript() {
  function addThree(x) {
    return x + 3
  }

  return addThree(5)
}

function learnJavaScript() {
  function addThree(x) {
    return x + 3
  }

  return addThree(5)
}

Результат

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

Dedefencce

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

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

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

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

Пример:

Mathematics

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

Интерактивный редактор

function learnJavaScript() {
  function calcPrym(x, y) {
    return 2 * x + 2 * y
  }
  return calcPrym(7, 4)
}

function learnJavaScript() {
  function calcPrym(x, y) {
    return 2 * x + 2 * y
  }
  return calcPrym(7, 4)
}

Результат

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

Интерактивный редактор

function learnJavaScript() {
  return Math.random()
}

function learnJavaScript() {
  return Math.random()
}

Результат

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

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

Интерактивный редактор

function learnJavaScript() {
  return Math.random() * 100
}

function learnJavaScript() {
  return Math.random() * 100
}

Результат

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

Math.floor()

Floor

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

Math.floor(10.7) // 10
Math.floor(4.8) // 4
Math.floor(14.19723) // 14

Интерактивный редактор

function learnJavaScript() {
  return Math.floor(10.7)
}

function learnJavaScript() {
  return Math.floor(10.7)
}

Результат

Math.round()

rounding

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

Math.round(10.7) // 11
Math.round(4.8) // 5
Math.round(14.19) // 14

Интерактивный редактор

function learnJavaScript() {
  return Math.round(10.7)
}

function learnJavaScript() {
  return Math.round(10.7)
}

Результат

.toUpperCase() / .toLowerCase()

Words

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

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

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

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

Интерактивный редактор

function learnJavaScript() {
  return 'Я люблю пиццу!'.toUpperCase()
}

function learnJavaScript() {
  return 'Я люблю пиццу!'.toUpperCase()
}

Результат

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

Интерактивный редактор

function learnJavaScript() {
  return 'СЛУШАЙ, НУ ХВАТИТ УЖЕ ТАК ОРАТЬ.'.toLowerCase()
}

function learnJavaScript() {
  return 'СЛУШАЙ, НУ ХВАТИТ УЖЕ ТАК ОРАТЬ.'.toLowerCase()
}

Результат

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

Mix

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

Интерактивный редактор

function learnJavaScript() {
  // randomNumber - случайное число от 0 до 1
  let randomNumber = Math.random()
  // Умножим на 100 наше случайное число, чтобы получить число между [0 ; 100] сместив запятую на 2 разряда вправо
  let number100 = randomNumber * 100
  // Применим Math.floor() для округления В МЕНЬШУЮ СТОРОНУ
  let task = 'Выбрано число от 0 до 100: '
  let numberBig = Math.floor(number100)
  // Вывод результата
  return task + numberBig
}

function learnJavaScript() {
  // randomNumber - случайное число от 0 до 1
  let randomNumber = Math.random()
  // Умножим на 100 наше случайное число, чтобы получить число между [0 ; 100] сместив запятую на 2 разряда вправо
  let number100 = randomNumber * 100
  // Применим Math.floor() для округления В МЕНЬШУЮ СТОРОНУ
  let task = 'Выбрано число от 0 до 100: '
  let numberBig = Math.floor(number100)
  // Вывод результата
  return task + numberBig
}

Результат

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

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

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

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

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

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

Интерактивный редактор

function learnJavaScript() {
  // Исходная форма функции сложения 2-х чисел
  let calcSum1 = function (a, b) {
    return a + b
  }
  // Стрелочная форма (нет слова `function` и `return`)
  let calcSum2 = (a, b) => a + b

  return calcSum1(5, 2) + ' или ' + calcSum2(5, 2) // 7 или 7
}

function learnJavaScript() {
  // Исходная форма функции сложения 2-х чисел
  let calcSum1 = function (a, b) {
    return a + b
  }
  // Стрелочная форма (нет слова `function` и `return`)
  let calcSum2 = (a, b) => a + b

  return calcSum1(5, 2) + ' или ' + calcSum2(5, 2) // 7 или 7
}

Результат

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

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

only one

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

Интерактивный редактор

function learnJavaScript() {
  // Исходная форма функции сложения 2-х чисел:
  let num1 = function (n) {
    return n * 2
  }

  // удалите скобки вокруг n
  let num2 = (n) => n * 2 // prettier-ignore

  return num1(7) + ' или ' + num2(7) // 14
}

function learnJavaScript() {
  // Исходная форма функции сложения 2-х чисел:
  let num1 = function (n) {
    return n * 2
  }

  // удалите скобки вокруг n
  let num2 = (n) => n * 2 // prettier-ignore

  return num1(7) + ' или ' + num2(7) // 14
}

Результат

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

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

Интерактивный редактор

function learnJavaScript() {
  let messHello = () => 'Hello!'

  return messHello()
}

function learnJavaScript() {
  let messHello = () => 'Hello!'

  return messHello()
}

Результат

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

Самовыполняющиеся функции(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

Пишите в Telegram или ВКонтакте, а также подписывайтесь на наши новости

Вопросы

question

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

Esc
return
Hello

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

обязательна
не обязательна
по-разному

Дана функция

const addThree = x => x + 3

addThree(20)

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

20
x
x + 3

Дана функция

const addThree = x => x + 3

addThree(20)

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

20
x
x + 3

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

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

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

console.log()
myMessage()
return()

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

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

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

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

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

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

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

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

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

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

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

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

console.log()
Math.floor()
Math.random()

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

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

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

Math.floor()
Math.max()
Math.random()

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

false
true

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

false
true

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

toUpperCase()
toLowerCase()
Math.max()

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

Ссылки:

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Dmitriy K.}

_{Dmitriy Vasilev}
💵

_Resoner2005
🐛 🎨 🖋

_Navernoss
🖋 🐛 🎨

Don’t repeat yourself​

Видео​

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

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

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

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

Функции с return​

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

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

Пример кода:​

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

Пример:​

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

console.log()​

Math.random()​

Math.floor()​

Math.round()​

.toUpperCase() / .toLowerCase()​

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

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

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

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

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

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

Заключение​

React Native​

Проблемы?​

Вопросы​

Ссылки:​

Contributors ✨​

Don’t repeat yourself

Видео

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

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

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

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

Функции с return

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

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

Пример кода:

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

Пример:

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

console.log()

Math.random()

Math.floor()

Math.round()

.toUpperCase() / .toLowerCase()

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

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

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

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

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

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

Заключение

React Native

Проблемы?

Вопросы

Ссылки:

Contributors ✨