Статья связана с репозиторием на GitHub.
Так... перейдем к функциональному программированию?
Для начала что такое функция. Обывательским языком если, то это какой-то фрагмент кода, который мы можем вызвать одной командой.
Самая большая проблема при разработке - дублирование кода. Чем больше по размеру ваш проект, тем больше будет таких мест. Дублирование кода плохо тем, что логика работы одинаковых "кусков" кода должна быть одинаковой всегда. И в момент написания они действительно у вас одинаковые. А теперь представим ситуацию, когда поменялась логика и нужно немного поправить такие "куски". Задача программиста в этом случае - найти все совпадающие фрагменты и внести в них изменения. Это очень плохой подход к разработке!
Вот для того и существуют функции. Синтаксис (как всегда) человекопонятен:
function myFirstFunction() {<какой-то код>}
начинаем со слова function (по русски функция), далее даём уникальное имя, далее идут скобки обычные и за ними - фигурные, внутри которых пишем код, который нам нужен.
Вызов функции - просто пишем в коде её имя.
Обратите внимание, что в рамках одного скрипта нам все-равно в какой последовательности указывается и вызывается функция. К примеру, у меня на скрине сначала вызов функции, а лишь затем - её обновление. Связано это с тем, что скриптовые языки сначала анализируют и собирают код, а лишь затем его выполняют.
Итак, объявление и вызов - элементарны. Давайте разберемся, что делать, если нужно передать функции какие-то данные. Есть два способа это сделать:
1. Передать данные непосредственно в функцию при вызове
Для этого при объявлении функции в круглых скобках пишем переменные, которые будем использовать в коде функции, а при вызове в круглых скобках пишем параметры, которые мы передаём в неё.
В примере я использовал массив, который перебрал циклом, в котором для каждой пары ключ-значение вызывал функцию. Изменения между первым и вторым скрином:
// объявление функции с приёмом ключа (key) и значения (value)
function myFirstFunction(key, value)
/*
Вызов функции, где
i - ключ
a[i] - значение
*/
myFirstFunction(i, a[i]);
2. Объявить "глобальную" переменную
Я создал переменную в начале скрипта (имя тут произвольное). В функции я умножаю его на 10 при каждом вызове.
Логичный вопрос: что сейчас было и почему нельзя делать так всегда. Вот это мы рассмотрим в отдельной статье "Область видимости в JS".
Идем дальше. Сейчас все примеры были на предмет банального вывода данных из функции в консоль. Но что, если нужно получить данные от функции?
Отчасти, вариант передачи был во втором примере: функция в процессе работы изменяла глобальной значение. Следовательно, код следующий за вызовом функции может оперировать уже изменившимся значением. Но есть отдельный механизм получения результата.
Оператор return
Разберем что я сделал. Я объявил массив newArray. Далее, циклом я прошел по массиву и отправил ключи и значения в функцию myThirdFunction. А теперь что делает код в функции: здесь я объявил переменную result, произвел с ней математические действия (индекс key умножил на 10 и прибавил значение value), после чего вернул полученный результат:
return result;
Обратим внимание на строку в цикле:
newArray.push(myThirdFunction(i, a[i]));
Здесь я добавляю в массив newArray результат, возвращенный функцией.
И еще немного о функциях...
В статье про объекты речь шла о свойствах и методах. Так вот, методы в объектах и есть функции.
В этом примере я создал объект object со свойством value и объявил у него метод calculate. Разница с обычным объявлением функции в том, что в этом случае я написал, что свойство равно не значению, а конструкции function() {...}. Сам метод должен взять значение this.value (свойство value от этого объекта) и разделить его на 3.
Вобщем-то всё: вызов метода от вызова свойства объекта отличается лишь наличием круглых скобок.
При работе с JS вы должны помнить, что язык позволяет делать на уровне кода почти всё, что вы можете придумать. Рассмотренный вариант объявления метода объекта будет работать и в более широком смысле.
В качестве примера я присвоил переменной func, а также элементам массива funcArray функции, которые затем успешно вызвал.
Зачем это нужно? Если по простому, то:
- первый вариант - к примеру для передачи в другую функцию в качестве параметра (это на самом деле вырожденный случай, так как логичней - объявить функцию обычным способом и передавать непосредственно);
- второй вариант - вызов нужной функции в зависимости от обрабатываемого значения, что видно на скрине выше.
Все статьи попадают в "Оглавление канала". Не пропускаем новости!