Как запустить функцию

Функции в JS

Функция — это блок кода, который выполняет определенную задачу.

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

1. функцию, которая будет рисовать круг;
2. функцию, которая раскрашивает круг.

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

В JavaScript уже встроено огромное количество функций. Например, Math.sqrt() — функция, которая вычисляет квадратный корень числа.

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

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

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

• Функция объявляется с помошью ключевого слова function .
• Правила именования функций такие же, как у переменных. Желательно давать функциями описание, которое описывает, что они делают. Хорошая идея использовать для этого глаголы. Например, есть ваша функция складывает два числа, ее можно назвать add или addNumbers .
• Тело функции располагается внутри фигурных скобок <> .

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

В программе выше мы объявили функцию greet() . Чтобы использовать ее, функцию нужно вызвать.

Вот, как вызвать функцию greet():

Как это работает

Пример 1. Функция для вывода текста в консоль

Вывод

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

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

Примечание. Значение, которое указывается при объявлении функции, принято называть параметром. Фактическое значение, которое указывается при вызове функции, принято называть аргументом.

Пример 2. Функция с параметрами

Вывод

В этой программе функция greet() объявлена с параметром name . Поэтому при вызове greet() мы указываем аргумент name в круглых скобках.

Пример 3. Функция для сложения двух чисел

Вывод

В этой программе функция add() вычисляет сумму двух переданных чисел и выводит ее в консоль.

• Функция объявлена с двумя параметрами a и b .
• Функция вызывается с указанием двух аргументов: 3 и 4 в одном случае и 2 и 9 — в другом.

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

Возврат значения

Для возврата результата работы функции используют оператор return .

Оператор return передает управление вызывающей стороне. Это значит, что никакой код после return не выполняется.

Если не указывать оператор return , функция вернет значение undefined .

Как это работает

Пример 4. Функция для сложения двух чисел

Вывод

В этой программе функция возвращает результат сложения с помощью оператора return . Возвращаемое значение хранится в переменной result .

Зачем использовать функции

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

В JavaScript функции можно также объявлять как выражения.

Вывод

В этой программе переменная x используется для хранения функции. Здесь функция рассматривается как выражение. Функция при этом вызывается с помощью имени переменной.

Приведенная выше функция называется анонимной функцией.

Примечание. В ES2015 выражения записываются как стрелочные функции. Вы узнаете о них в следующих статьях.

Что в коробке? Как работают функции в JavaScript

Знакомимся с фундаментальным строительным блоком любого приложения на JavaScript — функцией.

Что такое функция

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

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

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

Как объявить функцию

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

Синтаксис функции на JavaScript

Например, функция, которая вызывает предупреждение:

Код функции с предупреждением

Как вызвать функцию

Функцию вызывают по имени. Например, чтобы вызывать функцию из нашего примера, нужно после функции написать showAlert();

Параметры и аргументы

Аргументы

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

Пример использования параметров и аргументов

В примере мы используем два параметра: from и text . Затем в теле функции соединяем from + ‘, ‘ + text . А снаружи функции присваиваем им аргументы и выводим на экран.

Передачи одной функции в другую

В функцию можно передать значение другой функции. Например:

Примеры передачи одной функции в другую

В примере задано две функции:

1. getDomNodesBySelector — преобразует найденные селекторы на веб странице в массив.
2. applyDiscount — считает какую-то величину и берет данные для этого из функции getDomNodesBySelector .

Колбэки

Строки кода в языке JavaScript выполняются по очереди. Например:

Пример функций, которые выполняются по порядку

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

Пример функций, которые выполняются не по порядку

Вызов функции с отсрочкой называется колбэк ( callback ).

Колбэк передают в виде параметра. Например:

Функция myHomework имеет два параметра subject и callback .

Затем мы вызываем параметр subject , а параметр callback вызовем функцией myHomeworkFinished .

Когда код выполнится, появятся два предупреждения: Starting my math homework и Finished my homework .

Локальные переменные

Локальные переменные видны только внутри тела функции. За пределами функции эти переменные уже не работают.

Пример кода с локальной переменной

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

В первом случае — получаем результат работы функции.

Во втором случае — получаем ошибку, потому что переменную видно только внутри функции.

Внешние переменные

Давайте возьмем пример выше. Оставим внутри функции значение переменной message . А за пределами функции заведем другую переменную и назовем ее message .

Пример кода с локальной и внешней переменной

В коде у нас две переменные с одинаковым именем. Но наш сценарий будет считать их разными переменными.

В первом случае переменная будет видна программе только внутри функции showMessage() , во втором случае переменная будет видна всей программе.

Параметры по умолчанию

Когда мы указали параметр и не присвоили ему аргумент, то его значение будет undefined .

Пример кода с параметром по умолчанию

В примере параметру text мы не передали значение аргумента. Поэтому в результате мы видим аргумент параметра from и undefined .

Возврат значения

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

Пример возврата значения функции с помощью директивы return

В примере мы говорим функции, что необходимо возвращать сумму значений аргументов с помощью директивы return .

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

Функция, которая возвращает функцию

Функцию из предыдущего примера можно записать так:

Пример функции, которая возвращает функцию

1. Создали переменную generateSumFinder и присвоили ей значение стрелочной функции. Когда мы видим значок => , перед нами стрелочная функция.
2. Внутри функции создали переменную sum . Это локальная переменная и видна только внутри функции и присвоили ей значение стрелочной функции, которая складывает аргументы a и b.
3. Вернули переменную sum .
4. За пределами функции создали переменную sum . Это внешняя переменная и она не зависит от переменной внутри функции. Этой переменной мы присвоили значение функции generateSumFinder .

Рекурсия

В рекурсии функция вызывает саму себя. Рекурсия достигается за счет конструкции if…else . Чтобы применить рекурсию нужно определить базовый и рекурсивный случай. Функция будет вызывать саму себя, пока результат не приведет к базовому случаю. В других случаях будет выполняться рекурсивный случай.

Функция будет вызываться каждый раз, пока значение ее параметра i больше 1 – это рекурсивный случай. Или вызывается при базовом случае при i<=1 .

Перегрузка функций в JavaScript

У перегруженных функций одинаковые имена, но разные параметры. JavaScript не поддерживает перегрузку.

Пример функции без перегрузки

Несмотря на то, что в первой функции один параметр, вывод аргументов этой функции выведет два параметра. Как вы помните, второй ее параметр будет undefined .

В JavaScript есть способы, как перегрузить функцию. Для этого используют метод arguments.length .

Пример функции с перегрузкой

В примере с помощью метода arguments.length мы узнаем количество параметров в функции и выводим столько параметров, сколько аргументов мы задаем.

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

Чтобы выбрать имя функции, необходимо следовать правилам:

Комментарии в функции

Комментарии нужны, чтобы кто-то кроме вас понимал, что происходит в функции.

Пример комментария в функции

Замыкания

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

Пример замыкания функции на внешней переменной

В примере функция sayHi() будет оперировать со вторым значением переменной name . Таким образом, функция замыкает свое действие на известной переменной, где бы не задали ее значение.

Приведем еще один пример:

Пример замыкания функции на внутренней переменной

В примере функция makeWorker() замыкается на внутренней переменной name = «Nikolay» . Поэтому при инициализации переменных, следует обращать внимание, какая функция будет ими пользоваться и на какой из них будет замыкаться.

Стрелочные функции

Функцию можно задать не только с помощью слова function . Есть способ короче, для этого используют значок => .

Пример функции, которая складывает параметры a и b

Если параметр в функции один, то скобки можно не писать.

Пример записи стрелочной функции с одним параметром n

Если параметров нет, то пишут круглые скобки.

Пример стрелочной функции без параметров

Лексика this

В стрелочных функциях нет лексики this. Если происходит обращение к this , его значение берется снаружи.

Пример использования this в стрелочной функции

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

Продвинутая работа с функциями JavaScript

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Регулярки

• Урок №
  Учебник
  по регулярным выражениям
• Урок №
  Работа с регулярными
  выражениями. Глава 1.
• Урок №
  Работа с регулярными
  выражениями. Глава 2.
• Урок №
  Работа с регулярными
  выражениями. Глава 3.
• Урок №
  Работа с регулярными
  выражениям. Глава 4.
• Урок №
  Отличия
  от PHP версии

Разное

• Урок №
  Работа
  с форматом JSON
• Урок №
  Работа
  с куки (cookie)
• Урок №
  Работа
  с локальным хранилищем
• Урок №
  Анимация
  и другие эффекты

Работа с канвасом

• Урок №
  Учебник
  по работе с canvas
• Урок №
  Основы
  работы с canvas
• Урок №
  Продвинутая
  работа с canvas

Практика

• урок исключен (мало материала), по аяксу скоро будет отдельный учебник (много материала)
  Работа с
  AJAX в JavaScript —>
  Работа с
  AJAX + PHP —>

Контекст

• Урок №
  Работа
  с контекстом и this
• Урок №
  Продвинутая
  работа с контекстом

Drag-and-Drop

• Урок №
  новая вкладка с new.code.mu
  Доступные события
• Урок №
  новая вкладка с new.code.mu
  Перемещение элемента по окну
• Урок №
  новая вкладка с new.code.mu
  Перемещение на другой элемент
• Урок №
  новая вкладка с new.code.mu
  Объект event.dataTransfer
• Урок №
  новая вкладка с new.code.mu
  Картинка при перетягивании
• Урок №
  новая вкладка с new.code.mu
  Вид курсора

• Урок №
  Введение
  в ООП в стиле ES6
• Урок №
  Основы
  работы с ООП
• Урок №
  Наследование
  классов в JavaScript
  Продвинутая работа
  с классами на JavaScript —>
• Урок №
  Применение
  ООП при работе с DOM
• Урок №
  Практика
  по ООП в JavaScript
• Тут скоро будут еще уроки
  по функциональному и прототипному
  стилю ООП.

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

• Урок №
  новая вкладка ютуб
  Игра 5 точек в ряд без ООП для разминки
• Урок №
  новая вкладка ютуб
  Игра 5 точек в ряд ООП вариант
• Урок №
  новая вкладка ютуб
  Хранение массива в локальном хранилище (предварительная теория)
• Урок №
  новая вкладка ютуб
  Стикеры ООП (нужны основы Drag-and-Drop, выше в учебнике есть)

Практика

• Урок №
  новая вкладка с new.code.mu
  Тип Symbol
• Урок №
  новая вкладка с new.code.mu
  Итераторы и генераторы

Promise ES6

• Урок №
  новая вкладка с new.code.mu
  Функции resolve reject
• Урок №
  новая вкладка с new.code.mu
  Метод catch
• Урок №
  новая вкладка с new.code.mu
  Цепочки промисов
• Урок №
  новая вкладка с new.code.mu
  Перехват ошибок
• Урок №
  новая вкладка с new.code.mu
  Promise.all
• Урок №
  новая вкладка с new.code.mu
  Promise.race
• Урок №
  новая вкладка с new.code.mu
  async await
• Урок №
  новая вкладка с new.code.mu
  Загрузка картинок

Библиотека jQuery

Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

• Урок №
  Учебник
  jQuery для новичков
• Урок №
  Основы
  работы с jQuery
• Урок №
  Манипулирование
  элементами страницы
• Урок №
  Работа
  с набором элементов
• Урок №
  Работа
  с событиями jQuery
• Урок №
  Эффекты и анимация
  библиотеки jQuery
• Урок №
  Практика на отработку
  библиотеки jQuery
• Урок №
  Работа с
  библиотекой jQueryUI
• Урок №
  Популярные плагины
  библиотеки jQuery

В данном уроке мы разберем анонимные функции и замыкания на языке JavaScript.

Режим use strict

В JavaScript существует специальный режим, по которому код будет выполнятся по современному стандарту ES5, а не по более старому (это по умолчанию).

Этот режим включается директивой «use strict»; или ‘use strict’; и ставится в начале скрипта:

Строгий режим можно активировать только для кода функции:

Исходный код функции и результат

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

Функция как переменная

В JavaScript функции — это такие же переменные. К примеру, если у нас есть какая-то функция — мы можем записать ее в другую переменную — и эта функция станет доступна с другим именем:

Можно также создать безымянную функцию и записать ее в какую-то переменную:

Так как функция — это переменная, то невозможно существование переменной и функции с одинаковым именем. В следующем примере функция func будет затерта и вместо нее станет строка ‘hello’:

Функциональные выражения и объявление функций

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

Первый способ называется Function Declaration (объявление функции), а второй — Function Expression (функциональное выражение):

По сути это одно и то же, но есть существенная разница: функции, объявленные как Function Declaration, создаются до выполнения кода. Поэтому их можно вызвать до объявления, например:

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

Функциональные выражения

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

Особенности Function Declaration при use strict

Function Declaration при use strict видны только внутри блока, в котором объявлены. В данном случае функция func объявлена внутри ифа, но не будет видна снаружи:

Без use strict все будет нормально.

Передача функции по ссылке

Функции в JavaScript — это объекты. А объекты в JavaScript копируются по ссылке — это значит, что если у нас есть две переменные с одной и той же функцией — в них не лежит копия этой функции, а обе эти переменные ссылаются на одну и ту же функцию:

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

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

Пример: пусть у нас есть переменная elem, в которой лежит ссылка на какой-то элемент. Привяжем в качестве события onclick анонимную функцию:

Тоже самое при addEventListener:

Впрочем, если имя функции вам нужно, например, для того, чтобы открепить ее через removeEventListener — можно дать и имя:

Это имя будет доступно только внутри самой функции — и нигде извне.

Функция как параметр другой функции

Пусть у нас даны 2 функции:

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

Наша функция go запишет первую функцию в переменную func1, а вторую — в func2, затем просуммирует числа, возвращаемые этими функциями и выведет их на экран:

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

Рассмотрим еще пример: сейчас в функцию и go будем передавать параметром разные функции — и будем видеть разный результат:

А можем вообще использовать анонимную функцию, создаваемую в момент передачи параметра:

Функция в функции

Одну функцию можно объявить внутри другой. В этом случае внутренняя функция не будет доступна извне:

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

Функция, возвращающая функцию

Функция может возвращать другую функцию, например так:

В этом случае, если мы посмотрим результат работы внешней функции — мы увидим исходный код внутренней функции:

Чтобы увидеть результат работы внутренней функции — нужно вызвать внешнюю функции с двумя круглыми скобками:

Могут быть и такие вызовы функций: func()()() и func()()()() — и так далее до бесконечности. Для этого нужно, чтобы внутренняя функция тоже возвращала функцию, та — еще одну и так далее.

Область видимости переменных

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

То же самое будет, если у нас функция содержит внутри другую функцию — переменные внешней функции видны во внутренней:

Замыкания

Пусть у нас есть переменная num, определенная снаружи функции:

Если вызвать нашу функцию — то она сначала увеличит переменную num на единицу, а затем вернет новое значение num:

Если вызвать нашу функцию несколько раз — каждый раз она будет выводить на единицу больше, так как каждый вызов func приводит к увеличению внешней переменной num:

В нашем примере есть недостаток — переменная num видна во всем скрипте. Любая другая функция может случайно затереть num — и вся наша конструкция перестанет работать правильно. Давайте реализуем более продвинутый счетчик, избавленный от этого недостатка.

Обернем всю нашу конструкцию в функцию (назовем ее createCounter), а функцию func, которая у нас была ранее, сделаем анонимной и сделаем так, чтобы новая функция createCounter возвращала эту анонимную функцию:

Рассмотрим подробнее, что тут происходит: переменная num является локальной внутри функции createCounter, но при этом она доступна в анонимной функции (это мы видели в предыдущих примерах). В строчке var counter = createCounter() анонимная функция запишется в переменную counter. Получится, что у нас далее есть функция counter, внутри которой доступна переменная num из createCounter.

Давайте убедимся в этом:

Давайте теперь запустим функцию counter несколько раз — мы увидим, что каждый раз она будет выводить на единицу больше:

Еще раз: преимуществом такого подхода является то, что переменная num не видна снаружи createCounter и ее никто не сможет случайно затереть. Снаружи она не видна, но доступ к ней есть — через функцию counter, но только через нее.

Такая штука называется замыкание. Замыкание — это функция со всеми доступными внешними переменными (типа num в нашем случае). Эти переменные называются лексическим окружением функции.

Давайте вернемся назад к счетчику — осталось самое интересное: если createCounter вызвать несколько раз, записав результат в разные переменные — каждая из них станет независимым счетчиком.

В следующем примере у нас есть 2 функции: counter1 и counter2 — и они работают совершенно не мешая друг другу (получается, что у каждой из них своя переменная num):

Вызов функции на месте

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

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

Для вызова функции на месте хотелось бы сделать что-то в таком роде:

Однако, это не будет работать, так как на месте разрешен вызов только функциональных выражений. Поэтому необходимо сделать из нашей функции выражение, например, поставив перед ней плюс, такое уже будет работать:

Так тоже будет работать:

Но более принято брать такие функции в круглые скобки, вот так:

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

Иногда во избежания ошибок в начале ставится точка с запятой (ошибки могут возникнуть при сжатии файла минимизатором):