Функции

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

Зачем? 🤔

Повторяющиеся действия.

Программа представляет собой последовательность выражений языка. Нередко случается, что какая-то часть программы (блок кода) неоднократно повторяется. Чтобы устранить подобного рода избыточность программного кода, используют понятие функции. Функция — это именованный блок кода, который вызывается в нужных местах программы по имени. Другими словами, функция представляет собой подпрограмму, которую можно вызвать из основной программы, причем неоднократно.

DRY

Don't repeat yourself. Один из основополагающих принципов разработки. Если код не дублируется, то для изменения логики достаточно внесения исправлений всего в одном месте и проще тестировать одну (пусть и более сложную) функцию, а не набор из десятков однотипных. Следование принципу DRY всегда приводит к декомпозиции сложных алгоритмов на простые функции.

KISS

Keep It Simple, Stupid. Решайте задачи самым простым способом. это принцип проектирования и программирования, при котором простота системы декларируется в качестве основной цели или ценности. Есть два варианта расшифровки аббревиатуры: «keep it simple, stupid» и более корректный «keep it short and simple».

DRY > KISS

Зачастую эти принципы противоречат друг другу; уменьшение объема кода требует более мощных и сложнее отлаживаемых средств языка; однако в долгосрочной перспективе принцип DRY полезней, чем простота кода (KISS).

Объявление функции (function declaration)

Объявление функции начинается с ключевого слова function, после которого ( через пробел ) следует имя функции ( правила те же, что для имен переменных )

Определение функции (также известное как объявление, или инструкция функции) всегда начинается с ключевого слова function. Затем следует название этой функции, параметры, которые помещаются в скобки.

Дальше идут инструкции JavaScript, которые располагаются в фигурных скобках { } и которые исполняются при вызове функции.

1function multiply(a, b) {
2  return a * b;
3}
4
5multiply(1,2)
6multiply(5,6)

Функция multiply принимает два аргумента (a и b). Внутри фигурных скобок располагается утверждение, которое возвращает результат умножения первого параметра a на второй b.

Функциональное выражение (function expression)

Есть еще один способ определения функции, а именно, функциональное выражение. Такие типы функций могут быть анонимными. Нет необходимости давать им название. Предыдущую функцию multiply можно записать следующим образом:

1var multiply = function(a, b) { return a * b; };
2var x = multiply(2,2); // x возвращает 4

Где бы ни было объявление функции ( function declaration ), функция будет доступна в любом месте кода:

1console.log ( add );
2func( 2,1 );
3
4var add = function ( a,b ) {
5    console.log ( a,b )
6}

Выражение вычисляется в том месте, где оно находится

При использовании выражений ( function expression ) функция будет доступна только после того, как будут выполнены строки кода, в котором она объявляется:

1console.log ( add ) // undefined
2
3var add = function ( a,b ) {
4    return a+b;
5}

1console.log ( boom )
2console.log ( say )
3
4function boom (  ) {
5    return 'Boom'
6}
7var say = function ( message ) {
8    console.log ( message )
9}

Аргументы функции

Параметры функции играют роль локальных переменных в теле функции. При указании параметров функции ключевое слово var использовать не нужно, JavaScript объявляет их в качестве локальных переменные автоматически. Параметров может быть указано любое количество:

1function foo(a, b, c) { ... }   // a, b, c – параметры функции

При вызове функции, ей могут передаваться значения, которыми будут инициализированы параметры. Значения, которые передаются при вызове функции называются аргументами. Аргументы, указываются через запятую:

1function add(a, b) {
2  var sum =  a + b;
3
4  return sum
5}
6
7add(5, 7);   // 12

Когда при вызове функции ей передаётся список аргументов, эти аргументы присваиваются параметрам функции в том порядке, в каком они указаны: первый аргумент присваивается первому параметру, второй аргумент – второму параметру и т. д.

Если число аргументов отличается от числа параметров, то никакой ошибки не происходит. В JavaScript подобная ситуация разрешается следующим образом:

Если при вызове функции ей передаётся больше аргументов, чем задано параметров, "лишние" аргументы просто не присваиваются параметрам. Допустим, имеется следующее объявление функции:

1function add(a, b, c) { // ... }

Если при её вызове указать add(1, 2, 3, 4), то аргументы 1, 2 и 3 будут присвоены параметрам a, b и c соответственно.

В то же время аргумент 4 не будут присвоен ни одному из параметров данной функции. Если функция имеет больше параметров, чем передано ей аргументов, то параметрам без соответствующих аргументов присваивается значение undefined.

Возвращаемое значение.

С помощью инструкции return функция может возвратить некоторое значение (результат работы функции) программе, которая её вызвала. Возвращаемое значение передаётся в точку вызова функции.

Инструкция return имеет следующий синтаксис:

1function getName(name){
2    return name
3}
4
5getName('John') // John

В программу возвращается не само выражение, а результат его вычисления.

Для дальнейшего использования возвращаемого значения, результат выполнения функции можно присвоить к примеру переменной:

1function multiply(a) {
2  return a * a;
3}
4
5var x = multiply(5);
6console.log(x) // 25

Инструкция return может быть расположена в любом месте функции. Как только будет достигнута инструкция return, функция возвращает значение и немедленно завершает своё выполнение. Код, расположенный после инструкции return, будет проигнорирован:

1function foo() {
2  return 1;
3  console.log('код не выполнится')  //
4
5}
6
7var x = foo();
8console.log('x',x)//1

Внутри функции можно использовать несколько инструкций return:

1function check(a, b) {
2  if(a > b) return a;
3  else return b;
4}
5
6console.log(check(3, 5));   // 5

1function bar() {}
2function foo() { return; }
3
4console.log(bar());   // undefined. Инструкция return не указана
5console.log(foo());   // undefined. Возвращаемое значение не указано

Именование функций

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

Практика 👩‍💻👨‍💻

Цель: научится работать с функциями

Задание:one:

Напишите функцию с именем predictTheFuture, которая:

1. принимает 4 аргумента: количество детей, имя партнера, географическое положение, должность.

2. выводит ваше состояние на экран следующим образом: «Вы будете X в Y, женаты на Z и у вас будет N детей».

3. Вызовите эту функцию 3 раза с 3 разными значениями аргументов.

Задание:two:

Напишите функцию с именем calculateDogAge, которая:

1. принимает 1 аргумент: возраст вашей собаки.
2. вычисляет возраст вашей собаки на основе коэффициента преобразования 1 человеческий год === 7 годам собаки.
3. выводит результат на экран следующим образом: «Вашей собаке NN лет по собачьим!»
4. Вызовите функцию трижды с разными наборами значений.

Задание:three:

Создайте 2 функции, которые вычисляют свойства круга, используя определения здесь.

Создайте функцию с именем calcCircumFrence:

1. Передайте радиус функции.
2. Рассчитайте длину окружности на основе радиуса и выведите «Длина окружности равна NN».

Создайте функцию с именем calcArea:

1. Передайте радиус функции.
2. Вычислите площадь на основе радиуса и выведите «Площадь равна NN».

Задание:four:

Создайте функцию celsiusToFahrenheit:

1. Сохраните температуру по Цельсию в переменной.
2. Преобразуйте его в градусы Фаренгейта и выведите «NN ° C - NN ° F».

Создайте функцию с именем fahrenheitToCelsius:

1. Сохраните температуру по Фаренгейту в переменной.
2. Преобразуйте его в градусы Цельсия и выведите «NN ° F - NN ° C».

Проверить правильно ли работает конвертер можно здесь.