12. Функции

В этом уроке мы познакомимся с такой конструкцией JavaScript как функция. Функция необходима, чтобы вы могли хранить внутри ее инструкции, которые необходимо использовать во многих участках вашей программы. Т.е. чтобы постоянно не копировать часть инструкций с одного места в другое в вашей программе, вы можете создать функцию, поместить в неё необходимые инструкции и просто где будет необходимо использовать этот код, вы будете писать имя функции.

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

Вот такая полезная конструкция.

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

Внутри фигурных скобок пишем какое-нибудь простую инструкцию, например 5+7.

Вот такую примитивную функцию мы написали. Как с условным оператором if, эта инструкция 5+7 является частью инструкции function. Т.е. одна инструкция является частью другой.

Теперь, если мы хотим, чтобы этот инструкция 5+7 выполнилась, нам необходимо вызвать эту функцию. Вызывается она так: вначале пишем имя функции. По сути это переменная, которая внутри себя содержит не число, массив или объект, а функцию, если мы сейчас нажмем Enter, то Консоль просто вернет нам функцию внутри этой переменной. Но чтобы именно запустить функцию, нам надо еще после имени переменной, т.е. функции, написать слитно круглые скобки. Нажимаем Enter.

Консоль вернула нам undefined. Дело в том что все функции по умолчанию возвращают именно это значение. Т.е. функция сперва вычислила значение выражения 5+7, а потом по умолчанию вернула undefined. Если мы хотим вернуть именно результат выражения 5+7, то перед этим выражением нам надо поставить оператор return.

Оператор return возвращает значение, которое написано справа от него и завершает выполнение функции, даже если после этой инструкции далее идут еще инструкции.

Перепишем наш код так:

И как видим функция вернула 12. Так как имя функции это переменная, то мы можем ее использовать как мы используем остальные переменные, например присвоить ее другой переменной.

Или присвоить переменной именно то что вернет функция.

Кстати, перед тем как транслятор начнет выполнять ваш код, он прочитает все ваши функции в первую очередь. А это нам говорит о том, что можно вызывать функцию, до ее создания.

Т.е. здесь мы сперва вызвали функцию, а потом ее создали, и транслятор не выдал ошибки, так как он сперва прочел функцию, а уже потом увидел что мы ее вызвали.

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

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

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

А зачем же нужны круглые скобки для функции. Дело в том, что с помощью них мы можем передавать функции различные значения. Например, мы можем написать в квадратных скобках два числа, которые нужно сложить. Для этого нам надо чуть переписать функцию.

В скобках напишем имя двух переменных, которая функция при ее вызове создаст. Имена переменных пишутся через запятую. Допустим это будут x и y. И далее в фигурных скобках просто вернем результат сложения:

Имена переменных, которые находятся в круглых скобках называются параметрами, и эти переменные могут использоваться только внутри функции. Это из-за области видимости переменных, которую мы не так давно затрагивали вскольз.

Теперь вызовем эту функцию, и поместим в не такие значения:

Теперь когда мы нажмем Enter, функция создаст внутри себя переменные a и b, и присвоит им значения 34 и 59 соответственно. Кстати, когда мы пишем значения в этих скобках – это уже называется аргументами функции. Т.е. имена переменных – это параметры, их значения – это аргументы. Запускаем.

А что будет если мы при вызове функции не напишем аргументы. Тогда функция вернет нам NaN, что расшифровывается как Not a Number – не число. Дело в том, что если мы не укажем аргументы, то функция переменным a и b присвоит значения undefined, а их сложение вернет NaN, так как в результате получилось не число.

Если мы впишем только один аргумент. То функция все равно вернет NaN, так как она переменной а присвоит число 34, а переменной b значение underfined. 34+undefined тоже будет NaN.

Если мы напишем три аргумента

То функция просто проигнорирует третий аргумент.

Но иногда мы хотим изменить значения по умолчанию, чтобы функция использовала не undefined, а какое-нибудь число, для этого надо при создании функции написать так.

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

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

И вызвать ее мы можем так.

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

И вызывается она так. На этом урок заканчивается. До встречи на следующих уроках.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *