Найти в Дзене
Дзен.Framework

2.3.8 Функции в JS

Оглавление
Изображение из открытых источников
Изображение из открытых источников

Статья связана с репозиторием на GitHub.

Так... перейдем к функциональному программированию?

Для начала что такое функция. Обывательским языком если, то это какой-то фрагмент кода, который мы можем вызвать одной командой.

Самая большая проблема при разработке - дублирование кода. Чем больше по размеру ваш проект, тем больше будет таких мест. Дублирование кода плохо тем, что логика работы одинаковых "кусков" кода должна быть одинаковой всегда. И в момент написания они действительно у вас одинаковые. А теперь представим ситуацию, когда поменялась логика и нужно немного поправить такие "куски". Задача программиста в этом случае - найти все совпадающие фрагменты и внести в них изменения. Это очень плохой подход к разработке!

Вот для того и существуют функции. Синтаксис (как всегда) человекопонятен:

function myFirstFunction() {<какой-то код>}

начинаем со слова function (по русски функция), далее даём уникальное имя, далее идут скобки обычные и за ними - фигурные, внутри которых пишем код, который нам нужен.

На примере: я создал функцию и вызвал её, получив в консоли текст "Это работает!"
На примере: я создал функцию и вызвал её, получив в консоли текст "Это работает!"

Вызов функции - просто пишем в коде её имя.

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

Итак, объявление и вызов - элементарны. Давайте разберемся, что делать, если нужно передать функции какие-то данные. Есть два способа это сделать:

1. Передать данные непосредственно в функцию при вызове

-3

Для этого при объявлении функции в круглых скобках пишем переменные, которые будем использовать в коде функции, а при вызове в круглых скобках пишем параметры, которые мы передаём в неё.

В примере я использовал массив, который перебрал циклом, в котором для каждой пары ключ-значение вызывал функцию. Изменения между первым и вторым скрином:

// объявление функции с приёмом ключа (key) и значения (value)
function myFirstFunction(key, value)
/*
Вызов функции, где
i - ключ
a[i] - значение
*/
myFirstFunction(i, a[i]);

2. Объявить "глобальную" переменную

-4

Я создал переменную в начале скрипта (имя тут произвольное). В функции я умножаю его на 10 при каждом вызове.

Логичный вопрос: что сейчас было и почему нельзя делать так всегда. Вот это мы рассмотрим в отдельной статье "Область видимости в JS".

Идем дальше. Сейчас все примеры были на предмет банального вывода данных из функции в консоль. Но что, если нужно получить данные от функции?

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

Оператор return

-5

Разберем что я сделал. Я объявил массив newArray. Далее, циклом я прошел по массиву и отправил ключи и значения в функцию myThirdFunction. А теперь что делает код в функции: здесь я объявил переменную result, произвел с ней математические действия (индекс key умножил на 10 и прибавил значение value), после чего вернул полученный результат:

return result;

Обратим внимание на строку в цикле:

newArray.push(myThirdFunction(i, a[i]));

Здесь я добавляю в массив newArray результат, возвращенный функцией.

И еще немного о функциях...

В статье про объекты речь шла о свойствах и методах. Так вот, методы в объектах и есть функции.

-6

В этом примере я создал объект object со свойством value и объявил у него метод calculate. Разница с обычным объявлением функции в том, что в этом случае я написал, что свойство равно не значению, а конструкции function() {...}. Сам метод должен взять значение this.value (свойство value от этого объекта) и разделить его на 3.

Вобщем-то всё: вызов метода от вызова свойства объекта отличается лишь наличием круглых скобок.

При работе с JS вы должны помнить, что язык позволяет делать на уровне кода почти всё, что вы можете придумать. Рассмотренный вариант объявления метода объекта будет работать и в более широком смысле.

-7

В качестве примера я присвоил переменной func, а также элементам массива funcArray функции, которые затем успешно вызвал.

Зачем это нужно? Если по простому, то:

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

Все статьи попадают в "Оглавление канала". Не пропускаем новости!

-8